The Project | About Us | Contribute | Donations | License

HOME

In this section, we will walk through the process of building a complete JavaScript project. This will involve integrating various concepts and techniques learned throughout the course. By the end of this module, you will have a functional project that you can showcase in your portfolio.

Project Overview

Project Description

We will build a simple web application called "Task Manager". This application will allow users to:

Add new tasks.
Mark tasks as completed.
Delete tasks.
Store tasks in local storage so that they persist across page reloads.

Technologies Used

HTML for the structure of the web page.
CSS for styling.
JavaScript for the application logic.
Local Storage for data persistence.

Step-by-Step Guide

Setting Up the Project Structure

Create a new directory for your project and set up the following structure:

task-manager/
├── index.html
├── style.css
└── script.js

Creating the HTML Structure

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Task Manager</h1>
        <form id="task-form">
            <input type="text" id="task-input" placeholder="Add a new task" required>
            <button type="submit">Add Task</button>
        </form>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Styling the Application

Open style.css and add the following styles:

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

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    background: #28a745;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.completed {
    text-decoration: line-through;
    color: #888;
}

li button {
    background: #dc3545;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

li button:hover {
    background: #c82333;
}

Adding JavaScript Functionality

Open script.js and add the following code:

document.addEventListener('DOMContentLoaded', loadTasks);

const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

taskForm.addEventListener('submit', addTask);
taskList.addEventListener('click', handleTaskClick);

function addTask(event) {
    event.preventDefault();

    const taskText = taskInput.value.trim();
    if (taskText === '') return;

    const taskItem = document.createElement('li');
    taskItem.textContent = taskText;

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    taskItem.appendChild(deleteButton);

    taskList.appendChild(taskItem);

    saveTask(taskText);

    taskInput.value = '';
}

function handleTaskClick(event) {
    if (event.target.tagName === 'BUTTON') {
        const taskItem = event.target.parentElement;
        deleteTask(taskItem);
        taskItem.remove();
    } else {
        event.target.classList.toggle('completed');
        updateTaskStatus(event.target.textContent, event.target.classList.contains('completed'));
    }
}

function saveTask(task) {
    let tasks = getTasksFromStorage();
    tasks.push({ text: task, completed: false });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function deleteTask(taskItem) {
    let tasks = getTasksFromStorage();
    tasks = tasks.filter(task => task.text !== taskItem.textContent.replace('Delete', '').trim());
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function updateTaskStatus(taskText, completed) {
    let tasks = getTasksFromStorage();
    tasks = tasks.map(task => task.text === taskText ? { ...task, completed } : task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function getTasksFromStorage() {
    return localStorage.getItem('tasks') ? JSON.parse(localStorage.getItem('tasks')) : [];
}

function loadTasks() {
    const tasks = getTasksFromStorage();
    tasks.forEach(task => {
        const taskItem = document.createElement('li');
        taskItem.textContent = task.text;
        if (task.completed) {
            taskItem.classList.add('completed');
        }

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        taskItem.appendChild(deleteButton);

        taskList.appendChild(taskItem);
    });
}

Testing the Application

Open index.html in your browser.
Add a few tasks using the input field and button.
Mark tasks as completed by clicking on them.
Delete tasks using the delete button.
Reload the page to ensure tasks persist.

Debugging Common Issues

Tasks not saving: Ensure localStorage is enabled in your browser.
Tasks not loading: Check the loadTasks function for errors.
Styling issues: Verify the CSS file is correctly linked in the HTML.

Conclusion

Congratulations! You have successfully built a Task Manager application using JavaScript. This project has helped you integrate various concepts such as DOM manipulation, event handling, and local storage. In the next section, we will focus on testing and debugging the project to ensure it works flawlessly.

Building the Project

Project Overview

Project Description

Technologies Used

Step-by-Step Guide

Setting Up the Project Structure

Creating the HTML Structure

Styling the Application

Adding JavaScript Functionality

Testing the Application

Debugging Common Issues

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project