todo list

Likhil022 · Sep 13, 2024 · 2e96be4 · 2e96be4
commit 2e96be4
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 0 deletions.
diff --git a/assets/checked.png b/assets/checked.png
diff --git a/assets/unchecked.png b/assets/unchecked.png
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To - Do List</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <section class="container">
+        <div class="todoApp">
+            <div class="content">
+                <h1 class="head">To - Do List </h1>
+                <p class="des"> - Add items to your list.</p>
+            </div>
+            <div class="inp">
+                <input type="text" placeholder="Enter Items">
+                <button class="addbutton">Add</button>
+            </div>
+            <div class="list">
+                <ul class="ulist">
+
+                </ul>
+            </div>
+        </div>
+    </section>
+    <script src="./index.js" defer></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,68 @@
+'use strict'
+
+const todo = document.querySelector('.todoApp');
+const input = document.querySelector("input");
+const addbutton = document.querySelector(".addbutton");
+const list = document.querySelector(".list");
+const ulist = document.querySelector(".ulist");
+const delt = document.querySelector(".delete");
+const image = document.querySelector("img") 
+
+addbutton.addEventListener('click',function(){
+    const content = input.value;
+    if(!content)return;
+    const html = `<li class="items">
+                    <span>
+                        <img src="./assets/unchecked.png" alt="checkbox">
+                        <text>${content}</text>
+                    </span>
+                    <button class="delete">X</button>
+                   </li>`;
+    ulist.insertAdjacentHTML('beforeend',html);
+    input.value="";
+    input.focus();
+})
+ulist.addEventListener('click', function(e) {
+    const listItem = e.target.closest('li.items'); 
+    if (listItem) {
+        const image = listItem.querySelector('img');
+        listItem.classList.toggle('checked');
+        if (listItem.classList.contains('checked')) {
+            image.setAttribute('src', './assets/checked.png');
+        } else {
+            image.setAttribute('src', './assets/unchecked.png');
+        }
+    }
+    if (e.target.classList.contains('delete')) {
+        const listItem = e.target.closest('li.items');
+        if (listItem) {
+            listItem.remove();
+        }
+    }
+});
+
+
+
+
+
+//animations
+// Example JavaScript to dynamically change the placeholder text
+const placeholderText = "Enter items . . ."; // Text to be typed out
+const typingSpeed = 200; // Typing speed in milliseconds
+
+function typePlaceholder(text, element, speed) {
+    let index = 0;
+    element.placeholder = '';
+
+    function type() {
+        if (index < text.length) {
+            element.placeholder += text.charAt(index);
+            index++;
+            setTimeout(type, speed);
+        }
+    }
+    type();
+}
+
+typePlaceholder(placeholderText, input, typingSpeed);
+
diff --git a/style.css b/style.css
@@ -0,0 +1,138 @@
+*{
+    border: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+body{
+    background-color: #08AEEA;
+    background-image: linear-gradient(45deg, #08AEEA 0%, #2AF598 100%);
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+/* .container{
+    background-color: #08AEEA;
+    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
+    min-width: 100vw;
+    height: 100vh;
+    margin: 0;
+} */
+.todoApp{
+    width: 100%;
+    max-width: 500px;
+
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    min-height: auto;
+    padding-bottom: 30px;
+    z-index: 1;
+    border-radius: 10px;
+}
+.todoApp div{
+    padding-top: 1.7rem;
+    padding-left: 3rem;
+    padding-right: auto;
+}
+.content p{
+    font-size: small;
+    padding-left: 0.4rem;
+}
+.inp{
+    width: 26rem;
+    padding-top: 8px;
+}
+.inp input{
+    width: 25rem;
+    border: 2px #0b0a0aad solid;
+    margin-left: 0;
+    margin-top: 0.1rem;
+    padding-top: 0.2rem;
+    height: 3rem;
+    border-radius: 25px;
+    background-color: #dfdada;
+    z-index: 10;
+    position: absolute;
+    padding-left:20px ;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-size: 14px;
+}
+.inp button{
+    position: absolute;
+    height: 2.8rem;
+    margin-top: 0.2rem;
+    background-color: rgba(227, 87, 0, 0.801);
+    color: #fff;
+    border-radius:  25px;
+    width: 10rem;
+    /* border: 2px #0b0a0a88 solid; */
+    /* border: 1.5px #0b0a0aad solid; */
+    color: #fff;
+    font-weight: 500;
+    font-size: medium;
+    letter-spacing: 0.5px;
+    position:relative;
+    left:14.9rem;
+    z-index: 10;
+    bottom: 0.01rem;
+    top: 0.01rem;
+    /* margin-bottom: 20px; */
+    /* padding-left: 3rem; */
+}
+.ulist{
+    list-style: none;
+    padding-left: 0;  
+    padding-right: 4.5rem;  
+
+    /* width: 100%;  */
+}
+.items{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 24.5em;
+    margin-left: 0.25em;
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #fff; /* Background color for list items */
+    border-radius: 25px; /* Rounded corners */
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+span{
+    display: flex;
+    align-items: center;
+
+}
+li{
+    cursor: pointer;
+}
+li>button{
+    border-radius: 25px;
+    width: 30px;
+    height: 30px;
+}
+img{
+    display: inline;
+}
+text{
+    padding-left: 10px;
+}
+.checked{
+    text-decoration: line-through;
+    color: #00000090;
+}
+.delete{
+    text-decoration: none;
+    color: red; /* Color for the delete button */
+    transition: color 0.3s; 
+    background: none;
+}
+.delete:hover{
+    color: darkred;
+}