ToDo App with HTML, CSS, and JavaScript @rayen-code

Rayen

The humble ToDo app remains a cornerstone in the world of web development, embodying simplicity and functionality. In this tutorial, we'll embark on the journey of creating a ToDo app using HTML, CSS, and JavaScript. This versatile app not only enhances your coding skills but also serves as a practical addition to your web portfolio.




Step 1: HTML Markup:

Kick off your ToDo app by structuring the HTML. Create elements for the app container, input field, task list, and a template for individual tasks.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What ToDo App?</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <h1>ToDo App</h1>
        <div class="wrapper">
            <input type="text" class="input" placeholder="Add Task">
            <button class="btn">
                Add task
            </button>
        </div>

        <div class="todo-area">

        </div>


    </div>

    <div class="cercle bg1"></div>
    <div class="cercle bg2"></div>


    <script src="main.js"></script>
</body>

</html>

Step 2: Styling with CSS:

Define the styles in a dedicated CSS file (style.css). Prioritize simplicity and clarity to maintain a clean and user-friendly design.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#00af75, #1df8d488);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container {
    height: 80vh;
    width: 70%;
    border-radius: 25px;
    background: linear-gradient(135deg, #ffffff77, #fff9);
    backdrop-filter: blur(10px);
    padding: 30px;
    box-shadow: 0 0 20px #3332;
}

h1 {
    text-align: center;
    color: white;
    font-size: 3rem;
}

.wrapper {
    margin: auto;
    margin-top: 50px;
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: 700px;
}

.input {
    width: 50%;
    padding: 15px 20px;
    border: 1px solid #fff0;
    outline: none;
    background: #fff8;
    caret-color: red;
    border-radius: 22px;
}
.input::placeholder {
    padding-left: 10px;
}
.input:hover {
    border: 1px solid white;
}

.btn {
    width: 20%;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #4562;
    outline: none;
    background: linear-gradient(120deg, #44669522, #01a88199);
    cursor: pointer;
    font-weight: bold;
    color: white;
}
.btn:hover {
    background: #01a88199;
}



.todo-area {
    max-width: 700px;
    max-height: 70%;
    margin: auto;
    margin-top: 50px;
    background: #fff3;
    border-radius: 20px;
    padding: 0 20px;
    padding: 20px;
    overflow-y: scroll;
}


:root {
    --scrollbar-width: 0px;
}

.todo-area::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.todo-area::-webkit-scrollbar-track {
    margin: 20px;
}


.todo-area::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 20px;
}

.todo-area li {
    list-style: none;
    width: 90%;
    background: #fff8;
    padding: 15px 40px;
    border-radius: 10px;
    box-shadow: 0 0 5px #0001;
    position: relative;
    margin: 10px auto;
    text-transform: capitalize;
    cursor: default;
}

.todo-area li span {
    position: absolute;
    width: 20px;
    aspect-ratio: 1;
    background: #ff000063;
    border-radius: 50%;
    right: 10px;
    cursor: pointer;
}
.todo-area li span:hover {
    background: #f008;
}



.js-checked {
    text-decoration: line-through;
    color: rgba(0, 0, 0, 0.76);
}


.cercle {
    width: 250px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #fff7, #fff9);
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.bg1 {
    top: 15%;
    left: 2%;
}
.bg2 {
    bottom: 25%;
    right: 2%;
}

Step 3: Adding JavaScript Interaction:

Implement the app's logic in a JavaScript file (main.js). Handle user input, task creation, deletion, and any additional features you want to incorporate.
//-------------------- Java Script --------------------//
let input = document.querySelector(".input");
let addBtn = document.querySelector(".btn");
let todoArea = document.querySelector(".todo-area");


showData()

addBtn.addEventListener("click", ()=>{
   if (input.value === "") {
    alert("type somting...")
   }
   else {
    let li = document.createElement("li");
    li.innerHTML = input.value;

    todoArea.appendChild(li);

    let span = document.createElement("span");
    li.appendChild(span);
   }

   input.value = ""
   saveData()
   scrollBar()
});


todoArea.addEventListener("click", (e)=>{
    if(e.target.tagName === "LI") {
        e.target.classList.toggle("js-checked");
        saveData()
    }
    else if (e.target.tagName === "SPAN") {
        e.target.parentElement.remove()
        saveData()
        scrollBar()
    }
},false);

function saveData() {
    localStorage.setItem("todo", todoArea.innerHTML);

}
function showData() {
    todoArea.innerHTML  = localStorage.getItem("todo");
    scrollBar()
}

function scrollBar() {
    if (todoArea.scrollHeight >= 200) {
        todoArea.style.setProperty("--scrollbar-width", "7px");
    }
    else if (todoArea.scrollHeight < 200) {
        todoArea.style.setProperty("--scrollbar-width", "0px");
    }
}

Understand the JavaScript event handling for user input and task management. The addTask function creates a new task, and the deleteTask function removes a task when the delete button is clicked.

Personalize the ToDo app by experimenting with colors, fonts, and layout. Consider adding features like task completion tracking or due dates for an enhanced experience.

0 Comments