Html code for Note taking application

You can copy this code and save on your apps. HTML CODE FOR "TO DO LIST"

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Note Book</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <style>

        body {

            font-family: 'Roboto', sans-serif;

        }

    </style>

</head>

<body class="bg-gray-100">

    <header class="bg-blue-600 text-white p-4">

        <div class="container mx-auto flex justify-center items-center">

            <h1 class="text-4xl font-bold tracking-wide">Note Taking App</h1>

        </div>

    </header>

    <main class="container mx-auto p-4">

        <div class="flex flex-col md:flex-row md:space-x-4">

            <section class="w-full md:w-1/3 bg-white p-4 rounded shadow-md mb-4 md:mb-0">

                <h2 class="text-xl font-semibold mb-4">Create a New Note</h2>

                <form id="noteForm">

                    <div class="mb-4">

                        <label for="title" class="block text-gray-700">Title</label>

                        <input type="text" id="title" class="w-full p-2 border border-gray-300 rounded mt-1" required>

                    </div>

                    <div class="mb-4">

                        <label for="content" class="block text-gray-700">Content</label>

                        <textarea id="content" class="w-full p-2 border border-gray-300 rounded mt-1" rows="5" required></textarea>

                    </div>

                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Add Note</button>

                </form>

                <div id="successMessage" class="hidden mt-4 bg-green-500 text-white p-2 rounded">

                    Note saved successfully!

                </div>

                <div id="removeMessage" class="hidden mt-4 bg-red-500 text-white p-2 rounded">

                    History removed successfully!

                </div>

            </section>

            <section class="w-full md:w-2/3 bg-white p-4 rounded shadow-md">

                <h2 class="text-xl font-semibold mb-4">Your Notes</h2>

                <div id="notesList" class="space-y-4">

                    <!-- Notes will be dynamically added here -->

                </div>

                <button id="clearHistory" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 mt-4">Clear History</button>

            </section>

        </div>

    </main>

    <footer class="bg-blue-600 text-white p-4 mt-4">

        <div class="container mx-auto text-center">

            <p>© 2025 Note Book By Tipstv4you. All rights reserved.</p>

        </div>

    </footer>

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const notesList = document.getElementById('notesList');

            const savedNotes = JSON.parse(localStorage.getItem('notes')) || [];

            const successMessage = document.getElementById('successMessage');

            const removeMessage = document.getElementById('removeMessage');

            function displayNotes() {

                notesList.innerHTML = '';

                savedNotes.forEach(note => {

                    const noteElement = document.createElement('div');

                    noteElement.classList.add('p-4', 'border', 'border-gray-300', 'rounded');

                    noteElement.innerHTML = `

                        <h3 class="text-lg font-semibold">${note.title}</h3>

                        <p class="text-gray-700">${note.content}</p>

                    `;

                    notesList.appendChild(noteElement);

                });

            }

            displayNotes();

            document.getElementById('noteForm').addEventListener('submit', function(event) {

                event.preventDefault();

                const title = document.getElementById('title').value;

                const content = document.getElementById('content').value;

                savedNotes.push({ title, content });

                localStorage.setItem('notes', JSON.stringify(savedNotes));

                displayNotes();

                document.getElementById('noteForm').reset();

                successMessage.classList.remove('hidden');

                setTimeout(() => {

                    successMessage.classList.add('hidden');

                }, 3000);

            });

            document.getElementById('clearHistory').addEventListener('click', function() {

                localStorage.removeItem('notes');

                savedNotes.length = 0;

                displayNotes();

                removeMessage.classList.remove('hidden');

                setTimeout(() => {

                    removeMessage.classList.add('hidden');

                }, 3000);

            });

        });

    </script>

</body>

</html>

Thanks