fix: improve responsiveness for mobile screens and update styles

Projects/To-do list/README.md

@@ -0,0 +1,12 @@
+# 📝 To-Do List App
+
+A simple web-based to-do list application where you can keep track of your tasks, add descriptions, links, and attachments.
+
+## Features
+
+✅ Add tasks with descriptions, links 
+🗑️ Delete tasks  
+✏️ Toggle task completion status  
+📂 Store tasks locally using localStorage  
+
+# Preview :  https://yemanth-sai-kumar-1.github.io/todo-app/

Projects/To-do list/index.html

@@ -12,7 +12,8 @@
       <div class="todo-app">
         <h2>To-Do List <img src="./To-Do-Img/images/icon.png" alt="to-do list image"/></h2>
         <div class="row">
-            <input type="text" id="input-box" placeholder="Add your text"/>
+            <input type="text" id="description" placeholder="Description"/>
+            <input type="url" id="link" placeholder="Link (optional)" />
             <button id="btn" onclick="addTask()">Add</button>
         </div>
         <ul id="list-container">

Projects/To-do list/script.js

@@ -1,46 +1,98 @@
-const inputBox=document.getElementById("input-box");
-const listContainer=document.getElementById("list-container");
+const descriptionInput = document.getElementById("description");
+const linkInput = document.getElementById("link");
+const listContainer = document.getElementById("list-container");
 
-document.addEventListener("keypress",(event)=>{
-    let key = event.keyCode ? event.keyCode : event.which;
-    if(key === 13){
-        addTask();
-    }
-})
+// Load tasks from localStorage
+function loadTasks() {
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    tasks.forEach(task => renderTask(task));
+}
 
-function addTask(){
-    if(inputBox.value === ''){
-        alert("You must write something!");
-    }
-    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();
+// Save tasks to localStorage
+function saveTasks(tasks) {
+    localStorage.setItem("tasks", JSON.stringify(tasks));
 }
 
-listContainer.addEventListener("click",function(e){
-    if(e.target.tagName === "LI"){
-        e.target.classList.toggle("checked");
-        saveData();
+// Add a task
+function addTask() {
+    const description = descriptionInput.value.trim();
+    const link = linkInput.value.trim();
+
+    if (description === '') {
+        alert("Description cannot be empty!");
+        return;
     }
 
-    else if(e.target.tagName === "SPAN"){
-        e.target.parentElement.remove();
-        saveData();
+    // Create task object
+    const task = {
+        description: description,
+        link: link,
+
+        date: new Date().toLocaleString(),
+        checked: false // Initially unchecked
+    };
+
+    // Render task
+    renderTask(task);
+
+    // Clear input fields
+    descriptionInput.value = '';
+    linkInput.value = '';
+
+
+    // Get tasks from localStorage, add new task, and save
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    tasks.push(task);
+    saveTasks(tasks);
+}
+
+// Render task on the list
+function renderTask(task) {
+    const li = document.createElement("li");
+    li.innerHTML = ` 
+        <input type="checkbox" onchange="toggleStrikeThrough(this)"> 
+        <div>Description: <span>${task.description}</span></div>
+        <div>Link: ${task.link ? `<a href="${task.link}" target="_blank">${task.link}</a>` : 'Not provided'}</div>
+        <div>Date: ${task.date}</div>  
+        <button onclick="deleteTask(this)">Delete</button>  
+
+    `;
+    listContainer.appendChild(li);
+
+    // Apply initial checked state
+    if (task.checked) {
+        li.querySelector("input[type='checkbox']").checked = true;
+        li.classList.add("checked");
     }
-},false);
+}
+
+
+// Toggle strikethrough effect and save checkbox state
+function toggleStrikeThrough(checkbox) {
+    const li = checkbox.parentElement;
+    li.classList.toggle("checked");
 
-function saveData(){
-    localStorage.setItem("data",listContainer.innerHTML);
+    // Update task's checked property
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    const index = Array.from(listContainer.children).indexOf(li);
+    tasks[index].checked = checkbox.checked;
+
+    // Save tasks to localStorage
+    saveTasks(tasks);
 }
-function showTask(){
-    listContainer.innerHTML=localStorage.getItem("data");
+
+
+// Delete task
+function deleteTask(button) {
+    const li = button.parentElement;
+    li.remove();
+
+    // Remove task from localStorage
+    const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+    const index = Array.from(listContainer.children).indexOf(li);
+    tasks.splice(index, 1);
+    saveTasks(tasks);
 }
 
-showTask();
+// Load tasks when the page loads
+loadTasks();

Projects/To-do list/style.css

@@ -1,112 +1,121 @@
-*{
+* {
     margin: 0;
     padding: 0;
-    font-family: 'Poppins', sans-serif;
     box-sizing: border-box;
 }
 
-.container{
-    width: 100%;
-    min-height: 100vh;
-    background: linear-gradient(135deg, #153677, #4e085f);
-    padding: 10px;
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f7f7f7;
 }
 
-.todo-app{
-    max-width: 100%;
-    width: 540px;
-    background: #fff;
-    margin: 100px auto 20px;
-    padding: 40px 30px 70px;
-    border-radius: 10px;
+.container {
+    max-width: 800px;
+    margin: 20px auto; 
+    display: flex; 
+    flex-direction: column;
 }
 
-.todo-app h2{
-    color: #002765;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
+.todo-app {
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
 }
 
-.todo-app h2 img{
-    width: 30px;
-    margin-left: 10px ;
+h2 {
+    color: #5f20cc;
+    margin-bottom: 20px;
+    text-align: center;
 }
 
-.row{
+.row {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    background: #edeef0;
-    border-radius: 30px;
-    padding-left: 20px;
-    margin-bottom: 25px;
+    margin-bottom: 20px; 
+    text-align: center; 
+    align-self: center;
 }
 
-input{
-    flex: 1;
-    border: none;
-    outline: none;
-    background: transparent;
+input[type="text"],
+input[type="url"],
+input[type="file"],
+button {
     padding: 10px;
-    font-weight: 14px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
-button{
-    border: none;
-    outline: none;
-    padding: 16px 50px;
-    background: #5f20cc;
+input[type="file"] {
+    padding: 8px;
+    width: auto;
+}
+
+button {
+    background-color: #5f20cc;
     color: #fff;
-    font-size: 16px;
+    border: none;
     cursor: pointer;
-    border-radius: 40px;
 }
 
-ul li{
+button:hover {
+    background-color: #4c1a9c;
+}
+
+ul {
     list-style: none;
-    font-size: 17px;
-    padding: 12px 8px 12px 50px;
-    user-select: none;
-    cursor: pointer;
+    padding: 0;
+}
+
+li {
+    background-color: #f9f9f9;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
     position: relative;
 }
 
-ul li::before{
-    content: '';
-    position: absolute;
-    height: 20px;
-    width: 20px;
-    border: 50%;
-    background-image: url(./To-Do-Img/images/unchecked.png);
-    background-size: cover;
-    background-position: center;
-    top: 12px;
-    left: 8px;
-}
-
-ul li.checked{
-    color: #555;
-    text-decoration: line-through;
+li.checked {
+    background-color: #eaeaea; /* Lighter background for checked tasks */
+}
+
+li span {
+    text-decoration: none;
 }
 
-ul li.checked::before{
-    background-image: url(./To-Do-Img/images/checked.png);
+li a {
+    color: #5f20cc;
+    text-decoration: none;
 }
 
-ul li span{
+li a:hover {
+    text-decoration: underline;
+}
+
+button.delete {
     position: absolute;
-    right: 0;
-    top: 5px;
-    width: 40px;
-    height: 40px;
-    font-size: 22px;
-    color: #555;
-    line-height: 40px;
-    text-align: center;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    background-color: #ff3b30;
+    color: #fff;
+    border: none;
     border-radius: 50%;
+    padding: 6px 8px;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1;
+}
+.todobox{
+    display: flex; 
+    flex-direction: row; 
+    justify-content: space-between;
+}
+button.delete:hover {
+    background-color: #ff5347;
+}
+.checked {
+    text-decoration: line-through;
+    opacity: 0.5; /* Optionally reduce opacity for checked items */
 }
-
-ul li span:hover{
-    background: #edeef0;
-}