Todo App using HTML, CSS and JavaScript - Coding Torque

byPiyush Patil -
0
Todo App using HTML, CSS and JavaScript - Coding Torque

Todo App

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Todo App using JavaScript. You can extend this app to the next level by storing todos in local storage or any backend. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: Import Fontawesome CDN

Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />

Step 2: IMPORT google fonts

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag. 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">


Step 3: HTML Code 


<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Font Awesome Icons  -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
            crossorigin="anonymous" />
    
        <!-- Google Fonts  -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    
        <title>Todo App using JavaScript - @code.scientist x @codingtorque</title>
    </head>
    
    <body>
    
        <body>
            <div class="container">
                <div id="newtask" class="newTask">
                    <input type="text" placeholder="Add Task...">
                    <button id="add"><i class="fas fa-plus"></i></button>
                </div>
    
                <div id="tasks"></div>
            </div>
        </body>
    
    </html>


Output Till Now


Todo App using HTML, CSS and JavaScript - Coding Torque

Step 4: CSS Code 


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background: #4e4cff;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 10px;

}

.newTask {
    position: relative;
    padding: 30px 20px;
}

.newTask input {
    width: 80%;
    height: 45px;
    font-size: 15px;
    border: 2px solid #d1d3d4;
    padding: 12px;
    color: #111111;
    position: relative;
    border-radius: 5px;
}

.newTask input:focus {
    outline: none;
    border-color: #4e4cff;
}

.newTask button {
    position: relative;
    float: right;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    font-size: 16px;
    background-color: #4e4cff;
    border: none;
    color: #ffffff;
    cursor: pointer;
    outline: none;
}

#tasks {
    background-color: #ffffff;
    padding: 30px 20px;
    margin-top: 5px;
    border-radius: 10px;
    width: 100%;
    position: relative;
}

.task {
    background-color: #e5e5e5;
    height: 50px;
    margin-bottom: 8px;
    padding-left: 5px;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.task span {
    font-size: 15px;
    font-weight: 400;
}

.delete {
    background-color: red;
    color: #ffffff;
    height: 100%;
    width: 50px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;
}

.taskCheck {
    display: flex;
    align-items: center;
}

.taskCheckbox {
    height: 25px;
    width: 25px;
    margin-right: 5px;
}

.taskCheckbox:checked+#taskname {
    text-decoration: line-through;
}

Output Till Now


Todo App using HTML, CSS and JavaScript - Coding Torque

Step 5: JavaScript Code

document.querySelector('#add').onclick = function () {
    if (document.querySelector('#newtask input').value.length == 0) {
        alert("Please enter a Task")
    }
    else {
        document.querySelector('#tasks').innerHTML += `
<div class="task">
    <label class="taskCheck">
        <input type="checkbox" class="taskCheckbox">
        <span> id="taskname">
            ${document.querySelector('#newtask input').value}
        </span>
    </label>
    <button class="delete">
        <i> class="far fa-trash-alt"></i>
    </button>
</div>
`;
        var current_tasks = document.querySelectorAll(".delete");
        for (var i = 0; i < current_tasks.length; i++) {
            current_tasks[i].onclick = function () {
                this.parentNode.remove();
            }
        }
    }
}

Final Output



If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post