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
Comments
Post a Comment