bittu1040 · puttitrinathreddy · Nov 6, 2023
diff --git a/Modal/index.html b/Modal/index.html
@@ -3,33 +3,42 @@
   <head>
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="../style.css" />
-    <title>Counter</title>
+    <title>Modal</title>
   </head>
 
   <body class="body">
     <nav>
       <a href="../index.html">Home</a>
     </nav>
-    <h1>Counter</h1>
+
+    <h1>Modal</h1>
+
     <div class="center">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo doloremque
-        corporis, esse debitis architecto, distinctio nisi corrupti
-        exercitationem nobis deserunt porro quos minima est laboriosam omnis
-        quis dicta quia deleniti eaque! Temporibus illo ad, similique odio animi
-        culpa. Enim quidem ab soluta minima eius! Voluptatibus quibusdam
-        cupiditate nihil, dolorem consequuntur quas distinctio accusamus totam
-        officia sit. Ipsa animi error deleniti culpa maxime iure, modi nobis in
-        reprehenderit quidem officiis earum. Fugit nesciunt temporibus cum
-        recusandae, excepturi natus corporis illum! Rem, voluptates. Illo
-        eligendi reprehenderit non ducimus ipsam maiores magnam rem expedita
-        dolorum alias officia, autem id omnis eum repudiandae quidem laboriosam,
-        quis eius sunt deleniti quae earum? Vero id delectus exercitationem
-        maiores, doloribus alias ducimus odio sed? Veniam est, natus numquam
-        neque nam quibusdam illo cupiditate a. Aperiam, unde iste! Impedit aut,
-        nemo aspernatur quo nisi veniam accusantium maiores! Amet provident,
-        labore sunt quam odit voluptas perspiciatis est iure omnis!
-      </p>
+      <div class="buttons">
+        <button class="show-modal">Show modal 1</button>
+        <button class="show-modal">Show modal 2</button>
+        <button class="show-modal">Show modal 3</button>
+      </div>
+
+      <div class="modal hidden">
+        <button class="close-modal">&times;</button>
+        <h1>I'am a modal window 😁</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore saepe
+          ex aspernatur numquam, aperiam laboriosam, pariatur quidem eaque quos
+          optio fugiat voluptates ab ullam fuga explicabo nisi esse eligendi
+          expedita animi. Laborum, dolorum neque fugit deserunt eaque, modi
+          ipsam consectetur commodi blanditiis labore repellat maxime laudantium
+          quidem enim veritatis debitis impedit. Perferendis, officiis omnis!
+          Voluptate nulla eum odio aliquid dolorem earum voluptatibus quis,
+          ipsam autem molestiae quo nihil aut repellendus similique quae
+          laboriosam nobis consequuntur dolores nam doloremque obcaecati,
+          architecto, quaerat est animi! Nam, animi similique repudiandae quae
+          nisi laboriosam sapiente delectus enim aliquam odit possimus dolore,
+          architecto ipsam totam!
+        </p>
+      </div>
+      <div class="overlay hidden"></div>
     </div>
     <script src="index.js"></script>
   </body>

diff --git a/Modal/index.js b/Modal/index.js
@@ -1,20 +1,29 @@
-const buttons = document.querySelectorAll("button");
+"use strict";
 
-buttons.forEach((button) => {
-  button.addEventListener("click", counter);
-});
+const modal = document.querySelector(".modal");
+const overlay = document.querySelector(".overlay");
+const btnCloseModal = document.querySelector(".close-modal");
+const btnsOpenModal = document.querySelectorAll(".show-modal");
 
-function counter(e) {
-  console.log(e.target.id);
-  if (e.target.id === "increase") {
-    document.getElementById("counter").innerHTML =
-      +document.getElementById("counter").innerHTML + 1;
-  }
-  if (e.target.id === "decrease") {
-    document.getElementById("counter").innerHTML =
-      +document.getElementById("counter").innerHTML - 1;
-  }
-  if (e.target.id === "reset") {
-    document.getElementById("counter").innerHTML = 0;
-  }
+const open = function () {
+  modal.classList.remove("hidden");
+  overlay.classList.remove("hidden");
+};
+
+for (let i = 0; i < btnsOpenModal.length; i++) {
+  btnsOpenModal[i].addEventListener("click", open);
 }
+
+const close = function () {
+  modal.classList.add("hidden");
+  overlay.classList.add("hidden");
+};
+
+btnCloseModal.addEventListener("click", close);
+overlay.addEventListener("click", close);
+
+document.addEventListener("keydown", function (e) {
+  if (e.key === "Escape" && !modal.classList.contains("hidden")) {
+    close();
+  }
+});
diff --git a/Modal/style.css b/Modal/style.css
@@ -1,11 +1,79 @@
-.center {
-    display: flex;
-    height: 80vh;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-
-#counter{
-    font-size: 80px;
-}
+*{
+font-size:medium;
+  margin: 0;
+  padding: 0;
+  box-sizing:border-box;
+}
+
+.buttons{
+  font-family: sans-serif;
+  color: #333;
+  line-height: 1.5;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+
+.show-modal{
+  font-size: 2rem;
+  font-weight: 600;
+  padding: 1.75rem 3.5rem;
+  margin: 5rem 2rem;
+  border: none;
+  background-color: #fff;
+  color: #444;
+  border-radius: 10rem;
+  cursor: pointer;
+}
+
+.close-modal{
+  position: absolute;
+  top: 1.2rem;
+  right: 2rem;
+  font-size: 5rem;
+  color: #333;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+h1{
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+p{
+  font-size: 1.8rem;
+}
+
+/* classes to make modal work */
+.hidden{
+ display:none;
+} 
+.modal{
+  position: absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+
+  background-color: white;
+  padding: 6rem;
+  border-radius: 5px;
+  box-shadow: 0 3rem 5rem rgba(0, 0, 0.3);
+  z-index: 10;
+}
+
+.overlay{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.6);
+  backdrop-filter: blur(3px);
+  z-index: 5;
+}
diff --git a/To-Do List/Images/checked.png b/To-Do List/Images/checked.png
diff --git a/To-Do List/Images/icon.png b/To-Do List/Images/icon.png
diff --git a/To-Do List/Images/unchecked.png b/To-Do List/Images/unchecked.png
diff --git a/To-Do List/index.html b/To-Do List/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="../style.css" />
+    <title>To-Do List</title>
+  </head>
+
+  <body class="body">
+    <nav>
+      <a href="../index.html">Home</a>
+    </nav>
+    <h1>To-Do List</h1>
+    <div class="container">
+      <div class="todo-app">
+        <h2>To-Do List <img src="Images/icon.png" /></h2>
+        <div class="row">
+          <input type="text" id="input-box" placeholder="Add Your Task" />
+          <button onclick="addTask()">Add</button>
+        </div>
+        <ul id="list-container">
+          <!-- <li class="checked">Task 1</li>
+          <li>Task 2</li>
+          <li>Task 3</li> -->
+        </ul>
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/To-Do List/index.js b/To-Do List/index.js
@@ -0,0 +1,46 @@
+const inputBox = document.getElementById("input-box");
+const listContainer = document.getElementById("list-container");
+
+inputBox.addEventListener("keydown", function (event) {
+  if (event.key === "Enter") {
+    addTask();
+  }
+});
+
+function addTask() {
+  if (inputBox.value === "") {
+    alert("You need to add something first");
+  } else {
+    let li = document.createElement("li");
+    li.innerHTML = inputBox.value;
+    listContainer.appendChild(li);
+    let span = document.createElement("span");
+    span.innerHTML = "\u00d7";
+    li.appendChild(span);
+  }
+  inputBox.value = "";
+  saveData();
+}
+
+listContainer.addEventListener(
+  "click",
+  function (e) {
+    if (e.target.tagName === "LI") {
+      e.target.classList.toggle("checked");
+      saveData();
+    } else if (e.target.tagName === "SPAN") {
+      e.target.parentElement.remove();
+    }
+  },
+  false
+);
+
+function saveData() {
+  localStorage.setItem("data", listContainer.innerHTML);
+}
+
+function showTask() {
+  listContainer.innerHTML = localStorage.getItem("data");
+}
+
+showTask();
diff --git a/To-Do List/style.css b/To-Do List/style.css
@@ -0,0 +1,110 @@
+*{
+    padding:0;
+    margin:0;
+    font-family: "Poppins", sans-serif;
+    box-sizing:border-box;
+}
+
+.container{
+    width:100%;
+    min-height:100vh;
+    padding:10px;
+}
+
+.todo-app{
+    margin: 100px auto 20px;
+    width:100%;
+    max-width:540px;
+    padding:40px 30px 70px;
+    background-color:#fff;
+    border-radius:10px;
+
+}
+
+.todo-app h2{
+    color:black;
+    margin-bottom:20px;
+    display:flex;
+    align-items:center;
+
+}
+
+.todo-app h2 img{
+    width:30px;
+    margin-left:10px;
+}
+.row{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    background: #edeef0;
+    padding-left:20px;
+    border-radius:30px;
+    margin-bottom:25px;
+}
+input{
+    flex:1;
+    border:none;
+    outline:none;
+    background:transparent;
+    padding:10px;
+}
+
+button{
+    border:none;
+    outline:none;
+    padding:16px 50px;
+    background:lightgreen;
+    color:black;
+    font-size:16px;
+    cursor:pointer;
+    border-radius:40px;
+}
+
+ul li{
+    list-style:none;
+    font-size:17px;
+    padding:12px 8px 12px 50px;
+    user-select:none;
+    cursor:pointer;
+    position:relative;
+}
+
+ul li::before{
+    content:'';
+    position: absolute;
+    height:28px;
+    width:28px;
+    border-radius:50%;
+    background-image:url(Images/unchecked.png);
+    background-size: cover;
+    background-position:center;
+    top:12px;
+    left:8px;
+}
+
+ul li.checked{
+    color:#555;
+    text-decoration:line-through;
+}
+
+ul li.checked::before{
+    background-image:url("Images/checked.png");
+}
+
+ul li span{
+   position: absolute;
+   right:0;
+   top:5px;
+   width:40px;
+   height:40px;
+   font-size:22px;
+   color:#555;
+   line-height:40px;
+   text-align: center;
+   border-radius:50%;
+}
+
+ul li span:hover{
+    background-color:lightgreen;
+}