added copy btn

magmalamps · Apr 2, 2024 · cd68f9a · cd68f9a
1 parent 9fefd8e
commit cd68f9a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/fortunecookie/fortune.css b/fortunecookie/fortune.css
@@ -1,5 +1,5 @@
 body {
-    background-color: rgb(33, 33, 33);
+    background-color: rgb(47, 47, 47);
     color: aliceblue;
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -10,16 +10,16 @@ h1 {
 
 p {
     text-align: center;
-    margin: 2px;
 }
 
 input {
+    font-size: large;
     border-radius: 7px;
-    height: 30px;
+    height: 50px;
     width: 100%;
     background-color: rgb(65, 65, 65);
     color: aliceblue;
-    border-style: dashed;
+    border-style: solid;
 }
 
 button {
@@ -29,6 +29,7 @@ button {
     border-radius: 7px;
     border-style: solid;
     margin: 7px;
+    cursor: pointer;
 }
 
 div.button {
@@ -52,4 +53,16 @@ button.copy {
     color: #121113;
     margin: 0px;
     height: auto;
+}
+
+button:disabled,
+button[disabled] {
+    border: 1px solid #272727;
+    background-color: #292929;
+    color: #666666;
+    cursor: not-allowed;
+}
+
+p.txt {
+    padding-bottom: 7px;
 }
diff --git a/fortunecookie/fortunecookie.html b/fortunecookie/fortunecookie.html
@@ -9,7 +9,7 @@
     <title>Fortune Cookie Creator</title>
 </head>
 
-<body>
+<body onload="onload()">
     <h1>Fortune Cookie Creator</h1>
     <br>
 
@@ -22,14 +22,20 @@ <h1>Fortune Cookie Creator</h1>
     <br>
     <div class="button">
         <button onclick="bake()">Bake your fortune cookie</button>
-        <p id="textdisplay"></p>
+        <button onclick="copy_code()" id="copybtn">Copy cookie-code</button>
+        <p id="textdisplay" class="txt"></p>
     </div>
 
     <p><em>This website uses JavaScript. Make sure that you have enabled it.</em></p>
     <a href="../index.html" class="back">-Go Back-</a>
 </body>
 
 <script>
+    function onload() {
+        copybtn = document.getElementById('copybtn')
+        copybtn.disabled = true;
+    }
+
     function encrypt(text) {
         let encryptedText = [];
 
@@ -48,22 +54,30 @@ <h1>Fortune Cookie Creator</h1>
         return encryptedText.join(".");
     }
 
-
     function bake() {
         var message = document.getElementById("message").value;
         var text = document.getElementById("textdisplay")
         var link = encrypt(message)
+        var copybtn = document.getElementById('copybtn')
 
         setTimeout(function () {
             text.innerHTML = "Turning oven to 200°C..."
             setTimeout(function () {
                 text.innerHTML = "Baking your cookie..."
                 setTimeout(function () {
-                    text.innerHTML = "Your digital-cookie-code: " + link
+                    text.innerHTML = "Done! You can click the copy button now"
+                    copybtn.disabled = false;
                 }, 4000)
             }, 4000)
         }, 0)
     }
+
+    function copy_code() {
+        var message = document.getElementById("message").value;
+        var link = encrypt(message)
+        navigator.clipboard.writeText(link)
+        alert("Copied: " + link)
+    }
 </script>
 
 </html>
diff --git a/fortunecookie/redeemcookie/redeem.css b/fortunecookie/redeemcookie/redeem.css
@@ -6,6 +6,7 @@ body {
 }
 
 input {
+    font-size: large;
     width: 100%;
     height: 50px;
     border-radius: 7px;
@@ -15,12 +16,14 @@ input {
 }
 
 button {
+    font-size: medium;
     width: 70%;
     background-color: rgb(72, 72, 72);
     border-radius: 7px;
     height: 40px;
     border: 3px solid rgb(44, 44, 44);
     color: aliceblue;
+    cursor: pointer;
 }
 
 a {