Fix some screen Issues and added Reset button

Keshav-Aneja · Aug 6, 2023 · 622c332 · 622c332
1 parent 0e574ee
commit 622c332
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -51,12 +51,21 @@
               <p>Text</p>
               <span class="arrow2"></span>
               <span class="textPanel"
-                ><span class="vert"
-                  >T<br />
-                  e<br />
-                  x<br />t</span
-                >
-                <textarea name="" id="" cols="30" rows="10"></textarea>
+                ><span>
+                  <span class="vert"
+                    >T<br />
+                    e<br />
+                    x<br />t</span
+                  >
+                  <textarea name="" id="" cols="30" rows="10"></textarea>
+                </span>
+                <select id="fontFamily">
+                  <option value="Courier New">Courier New</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                  <option value="Arial">Arial</option>
+                  <option value="serif">serif</option>
+                  <option value="monospace">monospace</option>
+                </select>
               </span></button
             ><button class="item">
               <a href="" class="dwn"
@@ -73,6 +82,7 @@
               <option value="60" id="hi">High</option>
             </select>
           </span>
+
           <input type="range" name="" id="seeker" min="20" max="200" step="5" />
           <div class="colorbar">
             <!-- <input type="color" value="#9fde54" id="colorSelector" /> -->
@@ -92,6 +102,7 @@
               </span>
             </section>
           </div>
+          <button class="reset">Reset Canvas</button>
         </section>
       </div>
     </div>

diff --git a/script.js b/script.js
@@ -15,6 +15,7 @@ let isDrawing = false;
 let lastX = 0;
 let lastY = 0;
 let lineColor = "#9fde54";
+const weightPanel = document.querySelector(".weights");
 let activeColorItem = colorItem[0];
 let activeMenuItem = menuItems[0];
 let activeBackground = "#fff";
@@ -34,6 +35,11 @@ colorItem.forEach((color) => {
   });
 });
 let prevItem;
+let activeFont = "Arimo";
+const fontSelector = document.getElementById("fontFamily");
+fontSelector.addEventListener("change", function () {
+  activeFont = fontSelector.value;
+});
 
 menuItems.forEach((item) => {
   item.addEventListener("click", function () {
@@ -51,37 +57,51 @@ menuItems.forEach((item) => {
     }
     if (activeMenuItem === menuItems[0]) {
       canvas.style.cursor = `url("Assets/ICON-${0}.ico"), pointer`;
+      weightPanel.style.display = "flex";
+      seeker.style.display = "none";
     }
     if (activeMenuItem === menuItems[1]) {
       canvas.style.cursor = `url("Assets/ICON-${1}.ico"), pointer`;
+      weightPanel.style.display = "flex";
+      seeker.style.display = "none";
     }
     if (activeMenuItem === menuItems[3]) {
       canvas.style.cursor = `url("Assets/ICON-${3}.ico"), pointer`;
     }
     if (activeMenuItem === menuItems[2]) {
       overlay.style.opacity = 1;
       tri.style.opacity = 1;
+      overlay.style.zIndex = 10;
       canvas.style.cursor = `url("Assets/ICON-${2}.ico"), pointer`;
+      weightPanel.style.display = "none";
+      seeker.style.display = "block";
       // seeker.disabled = false;
       // seeker.style.backgroundColor = "#668cd3";
     }
     if (activeMenuItem !== menuItems[2]) {
       overlay.style.opacity = 0;
       tri.style.opacity = 0;
+      overlay.style.zIndex = -1;
       // seeker.disabled = true;
       // seeker.style.backgroundColor = "grey";
     }
     if (activeMenuItem === menuItems[4]) {
       document.querySelector(".textPanel").style.opacity = 1;
       document.querySelector(".arrow2").style.opacity = 1;
+      document.querySelector(".textPanel").style.zIndex = 10;
       canvas.style.cursor = `url("Assets/ICON-${4}.ico"), pointer`;
+      weightPanel.style.display = "none";
+      seeker.style.display = "block";
       // seeker.disabled = false;
       // seeker.style.backgroundColor = "#668cd3";
     }
     if (activeMenuItem !== menuItems[4]) {
       document.querySelector(".textPanel").style.opacity = 0;
+      document.querySelector(".textPanel").style.zIndex = -1;
       document.querySelector(".arrow2").style.opacity = 0;
       textArea.value = "";
+      seeker.value = "40";
+      shapeSize = 40;
       // seeker.disabled = true;
       // seeker.style.backgroundColor = "grey";
     }
@@ -182,7 +202,7 @@ function writeText(e) {
   lastX = x;
   lastY = y;
   ctx.fillStyle = activeColor;
-  ctx.font = `${shapeSize}px Arimo`;
+  ctx.font = `${shapeSize}px ${activeFont}`;
   ctx.textAlign = "center";
   ctx.fillText(textInput, lastX, lastY);
 }
@@ -229,7 +249,6 @@ function saveCanvasAsPNG() {
   // Create a temporary anchor element to trigger the download
   downloadBtn.href = dataURL;
   downloadBtn.download = "drawing.png"; // File name for the downloaded image
-  downloadBtn.click();
 }
 
 downloadBtn.addEventListener("click", saveCanvasAsPNG);
@@ -251,3 +270,8 @@ document.addEventListener("keydown", function (e) {
     aboutCard.style.display = "none";
   }
 });
+
+const resetBtn = document.querySelector(".reset");
+resetBtn.addEventListener("click", function () {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
diff --git a/stylesheet.css b/stylesheet.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Chivo+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Vithkuqi:wght@400;500;600;700&family=Playfair+Display:wght@600&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -201,21 +202,36 @@ input[type="color"]::-moz-color-swatch {
   padding: 5px;
   border-radius: 10px;
   opacity: 0;
-  transition: opacity 1s ease;
+  transition: opacity 0.3s ease;
+  z-index: -1;
 }
 .textPanel {
   width: 200px;
-  height: 120px;
+  height: 150px;
   background-color: var(--secondary);
   position: absolute;
   left: -210px;
   top: 5px;
-  padding: 5px;
+  padding: 10px;
   border-radius: 10px;
   opacity: 0;
-  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
   color: white;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.43);
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.textPanel > span {
+  width: 100%;
+  height: 80%;
+}
+.textPanel select {
+  background-color: white;
+  border: 0px;
+  border-radius: 10px;
+  padding: 5px;
 }
 .vert {
   font-size: 1.5rem;
@@ -240,7 +256,7 @@ input[type="color"]::-moz-color-swatch {
   left: -30px;
   top: 25px;
   opacity: 0;
-  transition: opacity 1s ease;
+  transition: opacity 0.3s ease;
 }
 .arrow2 {
   width: 30px;
@@ -251,7 +267,7 @@ input[type="color"]::-moz-color-swatch {
   left: -30px;
   top: 25px;
   opacity: 0;
-  transition: opacity 1s ease;
+  transition: opacity 0.3s ease;
 }
 .panel img {
   width: 33%;
@@ -271,6 +287,7 @@ input[type="color"]::-moz-color-swatch {
   height: 5px;
   border-radius: 50px;
   box-shadow: 0px 0px 20px white;
+  display: none;
 }
 
 #seeker::-moz-range-thumb {
@@ -387,3 +404,22 @@ input[type="color"]::-moz-color-swatch {
   border: 3px solid rgb(0, 115, 255);
   color: #252525;
 }
+
+.reset {
+  background-color: var(--secondary);
+  color: white;
+  font-family: "Arimo", sans-serif;
+  font-size: 1.2rem;
+  font-weight: 900;
+  padding: 10px;
+  border: 0px;
+  border-radius: 20px;
+  width: 80%;
+  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.reset:hover {
+  background-color: #486cb0;
+}
+.reset:active {
+  transform: translate(5px, 5px) scale(0.8);
+}