Added Download and Clear buttons

Author: bobjoerules

index.html

@@ -116,6 +116,11 @@
       <input type="color" id="favcolor" name="favcolor" value="#005A78" style="padding: 0; border:none; cursor:pointer;">  
 
     </div>
+    <div>
+      <br>
+      <button id="download" onclick="download()">Download Emoji</button>
+      <button id="download" onclick="clearemoji()">Clear Emoji</button>
+    </div>
     </div>
       <!--
       Todo List:
@@ -134,6 +139,7 @@
       <img id="highlights" class="highlights" src="images/nothing.png" draggable = "false">
       <img id="face" class="face" src="images/Face Background.png" draggable = "false">
     </div>
+    <canvas id="canvas" width="500" height="500" style="display: none;"></canvas>
     <p style="position: absolute; bottom: 0; right: 10px" draggable="false"><a color="grey" href="https://github.com/bobjoerules/Emojisite">GitHub</a> · Emoji Site V2.0 © <a color="grey" href="https://bobjoerules.com">Bobjoerules</a> 2025</p>
     <script src="script.js"></script>
   </body>

script.js

@@ -186,15 +186,44 @@ function enablemouth() {
 }
 
 colorInput.addEventListener("input", function () {
-  // Get the selected color value from the input element
   const selectedColor = colorInput.value;
-
-  // Update the background color of the entire page
   document.body.style.backgroundColor = selectedColor;
 });
 
 dragElement(document.getElementById("settings"));
 
+function clearemoji() {
+  document.querySelectorAll('button').forEach(btn => {
+    if (btn.textContent.trim().toLowerCase() === 'none') {
+      btn.click();
+    }
+  });
+}
+
+function download() {
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+  const images = [
+    document.getElementById("face"),
+    document.getElementById("mouth"),
+    document.getElementById("leye"),
+    document.getElementById("reye"),
+    document.getElementById("glasses"),
+    document.getElementById("accessories"),
+    document.getElementById("highlights")
+  ];
+
+  images.forEach(img => {
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  });
+
+  const combinedImage = canvas.toDataURL("image/png");
+  const link = document.createElement("a");
+  link.href = combinedImage;
+  link.download = "newemoji.png";
+  link.click();
+}
+
 function dragElement(elmnt) {
   let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 

style.css

@@ -6,51 +6,6 @@ div, p {
   1px 1px 0 black;
 }
 
-.mouthbutton {
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.righteyebutton {
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.lefteyebutton {
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.accessoriesbutton {
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.highlightsbutton {
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-}
-
 .settings{
   position: absolute;
   z-index: 9;
@@ -63,64 +18,52 @@ div, p {
   cursor:grabbing;
 }
 
-.glasses {
+.glasses, .accessories, .leye, .reye, .mouth, .highlights, .face {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+} 
+.glasses {
   z-index: 5;
 }
 
-
 .accessories {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 5;
 }
 
 .leye {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 3;
 }
 
 .reye {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 2;
 }
 
 .mouth {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 4;
 }
 
 .highlights {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 1;
 }
 
 .face {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   z-index: 0;
 }
 
+#download {
+  background-color: black;
+  padding: 10px;
+}
+
 button {
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;  
   border-radius: 5px;
   background-color: rgba(0, 0, 0, 0.1);
   color: white;