todo list

RohitSharma50 · RohitSharma50 · commit ac0ebc4be845 · 2024-08-12T17:36:33.000+05:30
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@ <h1>Javascript-Challanges</h1>
             <a class="project-link" href="./File uploader/index.html">Project 4 - File Uploader 🤨</a>
             <a class="project-link" href="./Light-Dark Mode/index.html">Project 5 - Light & Dark Mode👻</a>
             <a class="project-link" href="./Meme generator/index.html">Project 6 - Meme Generator 🧠</a>
-            <a class="project-link" href="./7-scroll/index.html">Project 7 - 👀</a>
+            <a class="project-link" href="./todo-list/index.html">Project 7 -Todo-List 👀</a>
             <a class="project-link" href="./8-typer/index.html">Project 8 - 📚
             </a>
             <a class="project-link" href="./9-mouseCircle/index.html">Project 9 - 📚
diff --git a/todo-list/index.css b/todo-list/index.css
@@ -0,0 +1,61 @@
+.nav-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    margin-bottom: 5px;
+    gap: 1rem;
+    border-bottom: solid 1px #aaa;
+    background-color: #aaa;
+}
+
+nav a {
+    min-width: 9rem;
+    border-radius: 0.3rem;
+    border: solid black;
+    background-color: aliceblue;
+    text-align: center;
+    text-decoration-line: none;
+    padding: 5px;
+}
+
+* {
+    box-sizing: border-box;
+}
+.container{
+    width: 80%;
+    background-color: blueviolet; 
+    max-width: 80vh;
+    display: grid;
+    align-items: center;
+    justify-content: center; 
+    margin: 100px auto 20px; 
+}
+ .todo-list{
+    text-decoration: bold; 
+    margin: 0.5em;
+    font-size: xx-large;  
+} 
+.input{
+    margin: 0.2em  0 0.2em;
+    border-radius: 0.4em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+} 
+input, .button{
+    padding:0.5rem;   
+} 
+.task-container{
+    margin: 0.2em  0 0.2em; 
+    padding: 0.5rem;  
+    display:grid; 
+    justify-content: center;
+} 
+l{
+    justify-content: space-between; 
+    margin: 0.1rem; 
+    padding: 0.1rem; 
+    background-color: aqua;
+}
diff --git a/todo-list/index.html b/todo-list/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo-List</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <nav class="nav-bar">
+    <a href="/index.html">Home</a>
+    <a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube</a>
+    <a target="_blank" href="https://github.com/RohitSharma50">Github</a>
+</nav>
+
+<div class="container">
+<div class="todo-list">Todo-List</div>
+<div class="input">
+    <input id="input-value" placeholder="Type Here">
+<button class="button">Add</button>
+</div> 
+<div class="item-list">
+   <ul class="task-container">
+    <li> <input type="checkbox">Task 1 <button>Delete</button></li>
+    <li><input type="checkbox">task 2 <button>Delete</button></li>
+   </ul> 
+   <div id="show"></div>
+</div>
+</div>
+<script src="index.js" defer></script>
+
+</body>
+</html>
diff --git a/todo-list/index.js b/todo-list/index.js
@@ -0,0 +1,37 @@
+
+
+    let addButton = document.querySelector('.button')
+
+    addButton.addEventListener('click', ()=>{
+
+
+        let input_value= document.getElementById('input-value').value ;
+       
+        if(input_value===""){alert('enter text')}
+        else{ 
+   let button = document.createElement('button');
+   button.id='delete_btn';
+   button.innerText='delete';
+       
+   let div=  document.createElement('div');   
+   div.class='new-div';
+      div.innerText=input_value;
+        let parent= document.querySelector('.container');
+
+        parent.appendChild(div); 
+        div.appendChild(button); 
+      
+
+      let input= document.getElementById('input-value').value="" ;
+            
+
+        button.addEventListener('click', ()=>{
+        div.remove();
+        }) 
+    }
+   
+    })
+
+
+
+ 
