Chapter 4: Mini Project

Building a To-Do List

Let's apply what you've learned to create a simple to-do list app using HTML, CSS, and JavaScript.

  1. Create a new folder named "ToDoApp".
  2. Inside the folder, create an index.html file, a style.css file, and a script.js file.
  3. Build the basic structure in index.html:|

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a task...">
        <button onclick="addTask()">Add</button>
        <ul id="taskList">
            <!-- Tasks will be added here dynamically -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>
  1. Style your app in style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
  1. Implement the functionality in script.js:

function addTask() {
    const taskInput = document.getElementById("taskInput");
    const taskList = document.getElementById("taskList");

    if (taskInput.value.trim() !== "") {
        const taskItem = document.createElement("li");
        taskItem.innerText = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = "";
    }
}

FINAL RESULT:


Now you have a simple to-do list app! You can enter tasks and click the "Add" button to add them to the list.

Congratulations! You've completed the Basic Web Development Course. Remember, practice is key, so keep experimenting and building to enhance your skills. Happy coding!