mnraza
How to Create a To-Do List App with HTML, CSS and JavaScript for Beginners

How to Create a To-Do List App with HTML, CSS and JavaScript for Beginners

Md Noorullah Raza's photo
Md Noorullah Raza
·

2 min read

Table of contents

In this article, we'll learn to create a To-Do List app using HTML, CSS and basic knowledge of JavaScript.

Getting Started with HTML: Structuring Your To-Do List App

Begin by setting up the skeleton of your to-do list using HTML. Open your favourite text editor and create a new HTML file. Define the essential structure of your app:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>To-Do List App</title>
</head>
<body>
    <div class="todoapp">
        <!-- write your to-do list here -->
    </div>
    <script src="app.js"></script>
</body>
</html>

Styling with CSS: Bringing Life to Your To-Do List

Now, let's add some flair to your app with CSS. Create a new file named styles.css and apply styles to your to-do list:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.todoapp {
    max-width: 400px;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
}

Dynamic Behavior with JavaScript: Adding Functionality

Time to breathe life into your to-do list with JavaScript. Create a file named app.js and add the following code:

document.addEventListener('DOMContentLoaded', function () {
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');

    todoInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter' && todoInput.value.trim() !== '') {
            createTodoItem(todoInput.value.trim());
            todoInput.value = '';
        }
    });

    function createTodoItem(text) {
        const todoItem = document.createElement('li');
        todoItem.textContent = text;
        todoList.appendChild(todoItem);
    }
});

Tying It All Together: Your First To-Do List

Open your HTML file in a web browser, and voila! You now have a basic to-do list app up and running. Start typing your to-dos, hit Enter, and watch them appear on the list dynamically.

Conclusion: What's Next?

Congratulations 🎊 on building your first to-do list app! This beginner-friendly project has introduced you to the fundamentals of HTML, CSS, and JavaScript. Now that you've dipped your toes into the coding & consider enhancing your app with features like task completion, deletion, or even local storage for persistence.

Happy coding, and may your to-do list always be organized and stylish! 🚀✨

ReactJavaScriptHTML5CSStodoapp