Build A Notes App in HTML CSS and JavaScript Projects

In this guide, you'll learn how to create a simple yet functional Notes App using HTML, CSS, and JavaScript. We'll also leverage Tailwind CSS for styling, making the design clean and responsive.

Step 1: HTML Structure

The HTML provides the skeleton for the app:

A title for the app.
A note input field and a button to add notes.
A list container to display the notes.

            
<div class="bg-white w-full max-w-lg rounded-lg shadow-lg p-6">
    <h1 class="text-2xl font-bold text-center text-gray-800 mb-4">Notes App</h1>
    <div class="flex space-x-2 mb-4">
        <input type="text" id="noteInput" placeholder="Type your note here..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg">
        <button onclick="addNote()" class="px-4 py-2 bg-blue-500 text-white rounded-lg">Add Note</button>
    </div>
    <ul id="notesList" class="space-y-2"></ul>
</div>

Step 2: Styling with Tailwind CSS

The Tailwind CSS classes add a modern and responsive design:

bg-white, shadow-lg, and rounded-lg make the container visually appealing.
text-gray-800 and text-2xl ensure the title is bold and prominent.
Buttons and inputs are styled for usability and aesthetics.

Step 3: Adding JavaScript Functionality

The JavaScript logic is split into two main functions: adding notes and deleting notes.

Add Note Function

This function:

Reads the input value and ensures it's not empty.
Creates a new <li> element with the note and a delete button.
Appends the <li> to the notes list.

            
function addNote() {
    const noteInput = document.getElementById('noteInput');
    const notesList = document.getElementById('notesList');
    const noteText = noteInput.value.trim();

    if (noteText === '') {
        alert('Please enter a note.');
        return;
    }

    const listItem = document.createElement('li');
    listItem.className = "flex justify-between items-center bg-gray-50 p-3 border border-gray-200 rounded-lg";
    listItem.innerHTML = `
        <span class="text-gray-700">${noteText}</span>
        <button onclick="deleteNote(this)" class="bg-red-500 text-white px-3 py-1 rounded-lg">Delete</button>
    `;

    notesList.appendChild(listItem);
    noteInput.value = '';
}

Delete Note Function

This function removes the specific <li> element when the delete button is clicked.

            
function deleteNote(button) {
    const listItem = button.parentElement;
    listItem.remove();
}

Key Features

Minimalist Design: Tailwind CSS ensures a clean and modern UI.
Interactive Functionality: Users can easily add and remove notes dynamically.
Accessibility: Semantic HTML and Tailwind's responsive classes make the app user-friendly.

How This Helps

This project is perfect for beginners wanting to learn HTML, CSS, and JavaScript while using a modern CSS framework like Tailwind. It introduces core concepts like DOM manipulation and event handling.

Source code :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes App</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
    <div class="bg-white w-full max-w-lg rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold text-center text-gray-800 mb-4">Notes App</h1>
        <div class="flex space-x-2 mb-4">
            <input 
                type="text" 
                id="noteInput" 
                placeholder="Type your note here..." 
                class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300"
            >
            <button 
                onclick="addNote()" 
                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring focus:ring-blue-300"
            >Add Note</button>
        </div>
        <ul id="notesList" class="space-y-2"></ul>
    </div>

    <script>
        function addNote() {
            const noteInput = document.getElementById('noteInput');
            const notesList = document.getElementById('notesList');

            const noteText = noteInput.value.trim();

            if (noteText === '') {
                alert('Please enter a note.');
                return;
            }

            const listItem = document.createElement('li');
            listItem.className = "flex justify-between items-center bg-gray-50 p-3 border border-gray-200 rounded-lg";
            listItem.innerHTML = `
                <span class="text-gray-700">${noteText}</span>
                <button 
                    onclick="deleteNote(this)" 
                    class="bg-red-500 text-white px-3 py-1 rounded-lg hover:bg-red-600 focus:ring focus:ring-red-300"
                >Delete</button>
            `;

            notesList.appendChild(listItem);
            noteInput.value = '';
        }

        function deleteNote(button) {
            const listItem = button.parentElement;
            listItem.remove();
        }
    </script>
</body>
</html>

Final Thoughts

By following this tutorial, you've built a fully functional Notes App. Experiment further by adding features like local storage to save notes persistently or a search filter for better usability.

Build A Notes App in HTML CSS and JavaScript projects