diff --git a/project1[To_Do_List]/siddhant2002/alpha.js b/project1[To_Do_List]/siddhant2002/alpha.js new file mode 100644 index 0000000..a2539d1 --- /dev/null +++ b/project1[To_Do_List]/siddhant2002/alpha.js @@ -0,0 +1,58 @@ +let text1 = document.querySelector(".list"); +let text2 = document.querySelector(".btn"); +let text3 = document.querySelector(".task"); + + +// add button hover change + +text1.addEventListener('keyup', ()=>{ + if(text1.value.trim() != 0) + { + text2.classList.add('active'); + } + else + { + text2.classList.remove('active'); + } +}); + +// add new item to the list + +text2.addEventListener('click', () => { + if(text1.value.trim() != 0) + { + let data = document.createElement('div'); + data.classList.add('item'); + data.innerHTML = ` +

${text1.value}

+
+ + `; + + text3.appendChild(data); + text1.value = ''; + } + else + { + alert("Enter some valid text"); + } +}); + +// delete items from the list + +text3.addEventListener('click', (e) => { + if(e.target.classList.contains('fa-xmark')) + { + e.target.parentElement.parentElement.remove(); + } +}) + + +// mark items to be completed + +text3.addEventListener("click", (e) => { + if(e.target.classList.contains("fa-pen-to-square")) + { + e.target.parentElement.parentElement.classList.toggle("completed"); + } +}); \ No newline at end of file diff --git a/project1[To_Do_List]/siddhant2002/index.html b/project1[To_Do_List]/siddhant2002/index.html new file mode 100644 index 0000000..8ad4a37 --- /dev/null +++ b/project1[To_Do_List]/siddhant2002/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + + To Do List App + + +

To Do List App

+ +
+
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/project1[To_Do_List]/siddhant2002/style.css b/project1[To_Do_List]/siddhant2002/style.css new file mode 100644 index 0000000..ecfb1df --- /dev/null +++ b/project1[To_Do_List]/siddhant2002/style.css @@ -0,0 +1,119 @@ +* +{ + margin: 0; + padding: 0; + font-family: 'Baloo 2', cursive; + font-family: 'Baloo Bhaijaan 2', cursive; + font-family: 'Poppins', sans-serif; + font-family: 'Quicksand', sans-serif; + font-family: 'Vollkorn', serif; +} + +body +{ + background: #f5f5f5; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + width: 100vw; +} + +.container +{ + font-size: 30px; + font-weight: 600; + color: rgb(8, 6, 133); + letter-spacing: 1; + margin: 30px 0; +} + +.context +{ + width: 450px; + padding: 20px; + border-radius: 5px; + box-shadow: 0 10px 40px rgba(0,0,0,0.1); + background-color: #fff; +} + +.contain +{ + display: grid; + grid-template-columns: 4fr 1fr; + gap: 18px; +} + +.list +{ + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + font-size: 18px; + outline: none; +} + +.btn +{ + border: none; + border-radius: 5px; + background-color: rgb(8, 6, 133); + font-size: 18px; + color: #fff; + outline: none; + cursor: pointer; + opacity: 0.6; + pointer-events: none; +} + +.btn.active +{ + opacity: 1; + pointer-events: all; +} + +.task +{ + width: 100%; + margin-top: 30px; +} + +.item +{ + padding: 10px; + border-radius: 5px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.item p +{ + font-size: 18px; + font-weight: 400; + color: #111; + letter-spacing: 1px; +} + +.item.completed p +{ + text-decoration: line-through; + color: #11111180; +} + +.item-btn +{ + display: flex; + align-items: center; + gap: 10px; +} + +.item-btn i +{ + color: rgb(8, 6, 133); + font-size: 18px; + cursor: pointer; +} \ No newline at end of file