Added Warning Functionality

index.html

@@ -128,7 +128,13 @@ <h2>Keshav Aneja</h2>
         /></a>
       </button>
     </div>
-
+    <div class="warning">
+      <h1>Fill the Entire Screen with this color?</h1>
+      <span>
+        <button class="yes">YES ✅</button>
+        <button class="no">NO ⛔</button>
+      </span>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -24,6 +24,7 @@ let activePanelItem = panel[1];
 let activeColor = activeColorItem.getAttribute("data-key");
 let shapeSize = 40;
 const downloadBtn = document.querySelector(".dwn");
+const yesBtn = document.querySelector(".yes");
 const seeker = document.querySelector("#seeker");
 colorItem.forEach((color) => {
   color.style.backgroundColor = color.getAttribute("data-key");
@@ -206,13 +207,20 @@ function writeText(e) {
   ctx.textAlign = "center";
   ctx.fillText(textInput, lastX, lastY);
 }
+yesBtn.addEventListener("click", function (e) {
+  paint(e);
+  document.querySelector(".warning").style.display = "none";
+});
+document.querySelector(".no").addEventListener("click", function () {
+  document.querySelector(".warning").style.display = "none";
+});
 canvas.addEventListener("mousedown", (e) => {
   isDrawing = true;
   const { x, y } = getMousePos(e);
   lastX = x;
   lastY = y;
   if (activeMenuItem === menuItems[3]) {
-    paint(e);
+    document.querySelector(".warning").style.display = "flex";
   } else if (activeMenuItem === menuItems[2]) {
     drawShape(e);
   } else if (activeMenuItem === menuItems[4]) {

stylesheet.css

@@ -422,6 +422,56 @@ input[type="color"]::-moz-color-swatch {
 .reset:hover {
   background-color: #486cb0;
 }
-.reset:active {
+.reset:active,
+.warning button:active {
   transform: translate(5px, 5px) scale(0.8);
 }
+.warning {
+  width: 25vw;
+  height: 12vw;
+  background-color: var(--primary);
+  border-radius: 20px;
+  position: absolute;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  padding: 20px;
+  transform: translate(-50%, -50%);
+  color: var(--secondary);
+  font-family: Arimo, Arial;
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.23);
+}
+.warning span {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.warning button {
+  width: 45%;
+  height: 40px;
+  border: 0px;
+  border-radius: 20px;
+  color: white;
+  font-size: 1.3rem;
+  font-weight: 500;
+  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.yes {
+  background-color: rgb(90, 212, 14);
+}
+.yes:hover {
+  background-color: var(--primary);
+  border: 4px solid rgb(90, 212, 14);
+  color: #262626;
+}
+.no {
+  background-color: rgb(254, 90, 8);
+}
+.no:hover {
+  background-color: var(--primary);
+  border: 4px solid rgb(254, 90, 8);
+  color: #262626;
+}