diff --git a/Modal/index.html b/Modal/index.html index 9587f56..1e8555b 100644 --- a/Modal/index.html +++ b/Modal/index.html @@ -3,33 +3,42 @@ - Counter + Modal -

Counter

+ +

Modal

+
-

- 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! -

+
+ + + +
+ + +
diff --git a/Modal/index.js b/Modal/index.js index e424ec8..dcd2752 100644 --- 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 index 1417e3e..5cecc42 100644 --- 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; -} \ No newline at end of file +*{ +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 new file mode 100644 index 0000000..9f4fee6 Binary files /dev/null and b/To-Do List/Images/checked.png differ diff --git a/To-Do List/Images/icon.png b/To-Do List/Images/icon.png new file mode 100644 index 0000000..5655235 Binary files /dev/null and b/To-Do List/Images/icon.png differ diff --git a/To-Do List/Images/unchecked.png b/To-Do List/Images/unchecked.png new file mode 100644 index 0000000..04a5c5f Binary files /dev/null and b/To-Do List/Images/unchecked.png differ diff --git a/To-Do List/index.html b/To-Do List/index.html new file mode 100644 index 0000000..e9e3a20 --- /dev/null +++ b/To-Do List/index.html @@ -0,0 +1,30 @@ + + + + + + To-Do List + + + + +

To-Do List

+
+
+

To-Do List

+
+ + +
+ +
+
+ + + diff --git a/To-Do List/index.js b/To-Do List/index.js new file mode 100644 index 0000000..954fdcd --- /dev/null +++ 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 new file mode 100644 index 0000000..4146213 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 29f355a..ab2805d 100644 --- a/index.html +++ b/index.html @@ -107,7 +107,7 @@

List of Project (JS DOM Manupulation)

- Todo List + Todo List
diff --git a/stopwatch/index.html b/stopwatch/index.html index 5a6d458..8f04fd4 100644 --- a/stopwatch/index.html +++ b/stopwatch/index.html @@ -10,7 +10,9 @@ +

Stopwatch

+
00:00:00