Merge pull request avinash201199#46 from innatepanda/main

popup modal added

app.js

@@ -21,7 +21,8 @@ function addTodo(e) {
   //Prevent natural behaviour
   e.preventDefault();
   if (todoInput.value === "") {
-    alert("Fill the box");
+    //alert("Fill the box");
+    openmodal('red',"Fill the box" )
     return;
   }
   //Create todo div
@@ -311,3 +312,17 @@ function deleteAll(){
   [...document.getElementsByClassName("todo")].map(n => n && n.remove());
   localStorage.removeItem("todos");
 }
+
+
+
+function openmodal(color, message) //pass color as either 'red' (for error), 'blue' for info and 'green' for success
+    {
+      console.log("in");
+        document.getElementById("content").classList.add(color);
+        document.getElementById("modal-text").innerText=message;
+        document.getElementById("Modal").classList.add("true");
+    }
+    function closemodal()
+    {
+        document.getElementById("Modal").classList.remove("true");
+    }

index.html

@@ -21,6 +21,14 @@
       <h1>Todo List</h1>
     </div>
   </header>
+  <div class="modal red" id="Modal">
+    <div class="content" id="content">
+      <span id="modal-text">
+        Some Text
+      </span>
+        <button onclick="closemodal()" class="modal-btn">x</button>
+    </div>
+  </div>
   <form class="todoform">
     <input type="text" placeholder="add a task .." class="todo-input" required />
     <div class="abc">
@@ -57,6 +65,7 @@ <h3>Made with <i class="fas fa-heart"></i> by Avinash</h3>
   </footer>
 
   <script src="./app.js"></script>
+
 </body>
 
 </html>

style.css

@@ -237,3 +237,62 @@ select {
   color: white;
   font-size: 0.9em;
 }
+
+
+
+.modal{
+  display:none;
+  position: fixed; /* Stay in place */
+  z-index: 9; /* Sit on top */
+  color: white;
+  opacity:1;
+  top: 1;
+
+  height: fit-content;
+
+}
+
+
+.true{
+display: block;
+
+
+}
+.content{
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  padding:10px;
+
+  animation-name: slideIn;
+  animation-duration: 0.4s;
+  width: fit-content;
+  margin: auto;
+}
+
+.green{
+  background-color: rgb(76, 165, 76);
+
+}
+.red{
+  background-color: red;
+
+}
+.blue{
+  background-color: rgb(0, 0, 255);
+}
+
+.modal-btn{
+  background-color:white;
+  color: black;
+  box-shadow: none;
+  border: none;
+}
+.modal-btn:hover{
+  background-color: black;
+  color: white;
+}
+@keyframes slideIn {
+  from {top: -300px; opacity: 0} 
+  to {top: 0; opacity: 1}
+}