This is a classic to-do-list Web app. It is useful for writing out tasks that you want to get done throughout the day and assigning them a category. Let's get to see the source code behind this. First is the HTML.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do Web App</title>
    <link href="./css/style.css" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header>
        
        <!-- Logo -->
        <div class="img-container">
            <img src="./assets/logo.png"/>
        </div>

    </header>

    <!-- Main Area -->
    <main>
        <div class="input-container">
            <div id="msg">What do you want to get done today?</div>
            <div id="msg">(Enter the name of the list)</div>
            <form>
                <label for="task"></label>
                <input type="text" id="userinput" name="task" placeholder="e.g Pay Bills...">
                <input type="text" id="namelist" name="namelist" placeholder="e.g Shopping List...">
                <input type="button" value="Add" id="btn" onclick="tasklist()" title="✔️ Adds an item to list">
                <button onclick="reset()" id="reset" title="🔃 Refreshes the page">Reset</button>
            </form>
            <br>
            <p id="warning"></p>
            <p id="warning1"></p> 
        </div>

        <!-- Container -->
        <div id="containertodo">
            <div class="todo"></div>
            <div id="todolistbr" class="todolist"></div>
        </div>
    </main>

    <!-- Footer -->
    <footer>
        <div class="footer">
            Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank"><span>@mariosdaskalas</span></a>
        </div>
    </footer>
</body>

<!-- Javascript -->
<script src="./main.js"></script>

</html>

The basic idea behind this is to create 2 inputs and 2 buttons. The 2 inputs take the value of the task and the other one takes the category of it. There is a button that you can click on to add the task and one for clearing all input.

Below, it is the CSS file that is responsible for the design of the document.

* {
    margin: 0;
    padding: 0;
}

/* Body */

body {
    background-color: lightgray;
    
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* Header */

.img-container {
    text-align: center;
}
img {
    width: 200px;
}

/* Main */

.input-container {
    text-align: center;
}
#msg {
    text-align: center;
    font-size: 125%;
    font-style: italic;
    margin-bottom: 1rem;
}
#warning, #warning1 {
    background-color: rgb(202, 88, 105);
    width: 45%;
    height: 1.8rem;
    text-align: center;
    margin: 0 auto;
    display: none;
    font-size: 120%;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    position: relative;
    left: 1.6rem;
}

/* Input */ 

input[type=text] {
    width: 25%;
    height: 2rem;
    text-align: center;
    font-size: 110%;
    border-radius: 4px;
}
input[type=text]:hover {
    background-color: rgba(240, 158, 8, 0.65);
}
#btn, #reset {
    width: 5rem;
    height: 2.2rem;
    padding: 0.4rem;
    background-color: black;
    color: white;
    border-radius: 4px;
}
#btn:hover, #reset:hover {
    cursor: pointer;
}
input[type="checkbox"] {
    text-align: center;
    font-size: 120%;
    margin: 0 auto;
    border-bottom: 1px solid grey;
    margin-bottom: 0.5rem;
    background-color: lightgrey;
}
#namelist {
    width: 12rem;
    height: 2rem;
    text-align: center;
    font-size: 110%;
    border-radius: 4px;
}
.todolist, #donelist {
    text-align: center;
    font-size: 150%;
    background-color: lightgray;
    margin: 0 auto;
    width: 70%;
    border-bottom: 1px solid grey;
}
label {
    margin: 1.5rem;
}
.btnclass {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    bottom: 0.2rem;
}
#containertodo {
    margin: 0 auto;
    width: 45%;
    height: 300px;
    background-color: rgba(170, 168, 163, 0.65);
    position: relative;
    top: 1rem;
    left: 1.5rem;
    display: none;
    border-radius: 7px;
}
#containerdone {
    margin: 0 auto;
    width: 75%;
    height: 300px;
    background-color: rgba(170, 168, 163, 0.65);
    position: relative;
    display: none;
    top: 2rem;
    border-radius: 7px;
}
.title {
    text-align: center;
    font-size: 110%;
    text-decoration: underline;
    font-style: italic;
    font-weight: bold;
    margin-top: 0.5rem;
}
.todo, .done {
    text-align: center;
    font-size: 160%;
    text-decoration: underline;
    font-weight: bold;
    padding: 1rem;
    font-style: italic;
}

/* Responsive Design */

@media screen and (max-width: 580px) {
    img {
        width: 300px;
    }
}

/* Footer */

.footer {
    text-align: center;
    font-size: 110%;
    background-color: rgb(236, 232, 232);
    margin: 0 auto;
    width: 45%;
    height: 2rem;
    position: relative;
    top: 2rem;
    left: 1.5rem;
}

/* Links */
a, a:visited {
    color: black;
    text-decoration: none;
}
a:hover {
    font-weight: bold;
    text-decoration: underline;
}

Finally, let's see the logic behind this Web App and this is the JS file.

// Create empty array
let arrList = [];
let arrListDone = [];
let taskEnter = document.getElementById("userinput");
let nameEnter = document.getElementById("namelist");

// Insert on key Enter
taskEnter.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
        e.preventDefault();
        tasklist(e);
    }
});

nameEnter.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
        e.preventDefault();
        tasklist(e);
    }
});

// Trigger on button "Add"
function tasklist() {

    // Fetch value of input text
    task = document.getElementById("userinput").value;
    let namelist = document.getElementById("namelist").value;

    // Display name of list
    let todolistname = document.querySelector(".todo").innerHTML = namelist;

    // If input fields are empty
    if (task == "" || namelist == "") {
        document.getElementById("warning").innerHTML = "Please complete both fields!";
        document.getElementById("warning").style.display = "block";
        
    }
    // If input fields are not empty
    else {
        document.getElementById("warning").style.display = "none";
        document.getElementById("namelist").disabled = true;
        document.getElementById("namelist").title = "🚫 Disabled!";

        // Select DIV
        let todolist = document.querySelector(".todolist");

        // Clears text input
        document.getElementById("userinput").value = "";

        // Shows container
        document.getElementById("containertodo").style.display = "block";

        // Create input element
        let input = document.createElement("input");

        // Generates a random number for id
        let random = Math.floor(Math.random() * 1000);
        let randomlabel = Math.floor(Math.random() * 1001 + 1000);
        let randombr = Math.floor(Math.random() * 100);
        let btnrem = Math.floor(Math.random() * 1001 + 2000);

        // Assign attributes
        input.type = "checkbox";
        input.name = "checklist";
        input.value = task;
        input.id = random;
        input.className = "checkclass";

        // Create label element
        let label = document.createElement("label");

        // Assign label
        label.htmlFor = random;
        label.id = randomlabel;
        label.className = "labelclass";

        // Create button
        let btnremove = document.createElement("input");

        // Assign buttton attributes
        btnremove.type = "button";
        btnremove.value = "X";
        btnremove.id = btnrem;
        btnremove.title = "❌ Remove item";
        btnremove.className = "btnclass";

        // Append childs
        label.appendChild(document.createTextNode(task));
        todolist.appendChild(input);
        todolist.appendChild(label);
        todolist.appendChild(btnremove);

        // Create br element
        let br = document.createElement("br");
        br.id = randombr;

        // Append child
        todolist.appendChild(br);

        // Push to array
        arrList.push(task);

        // Select element based on class + id
        let t1 = document.querySelectorAll(".checkclass");
        let t2 = document.querySelectorAll(".labelclass");
        let t3 = document.getElementById(randombr);
        let t4 = document.getElementById(btnrem);

        // If remove btn clicked
        t4.onclick = () => {
            console.log(`Button clicked! ${btnrem}`);

            // Select <br> with id
            let parent = document.getElementById(randombr);
            let varbr =  parent.getElementsByTagName("br");

            // Remove <br> with id
            parent.parentElement.removeChild(parent);

            let randomrem = document.getElementById(random);
            let randomlblrem = document.getElementById(randomlabel);

            // Hide items on click remove button
            randomrem.style.display = "none";
            randomlblrem.style.display = "none";
            t4.style.display = "none";
        }

        // Loop through list array
        for (let i = 0; i <= arrList.length - 1; i++) {

            // If checkbox is checked
            t1[i].onclick = () => {
                if (t1[i].checked) {
                    console.log(`Checked ${i}: ${t1[i].value}`);
                    t2[i].style.textDecoration = "line-through";
                    t2[i].style.backgroundColor = "lightgreen";
                }
            // If checkbox is not checked
                else {
                    console.log(`Not Checked ${i}: ${t1[i].value}`);
                    t2[i].style.textDecoration = "none";
                    t2[i].style.backgroundColor = "lightgray";
                }
            }
        }
        }  
}

// Reloads the webpage
function reset() {
    location.reload();
};

At first, we check if either one of the inputs is empty. If this is true, then provide a message stating that. If we get an input then create a new element of input that is a checkbox. That element will hold the values that the user enters and displays them as a div on the screen.

The user can check each of the boxes to mark them as complete or click on the 'X' icon to delete them completely. A change in CSS is happening (background-color green and strikethrough), when the user marks the task as complete. Closing, the page is refreshed when the user clicks the Reset button.

💡
Github
GitHub - mariosdaskalas/todolie: A basic to-do webapp.
A basic to-do webapp. Contribute to mariosdaskalas/todolie development by creating an account on GitHub.
GitHubmariosdaskalas
💡
Live Demo
Live Demo

Tagged in:

Web Development