Create a Simple Notepad in HTML and JavaScript
In this tutorial, we'll walk through creating a simple notepad application using HTML and JavaScript. This notepad allows users to type notes, save them in their browser's local storage, and load them later.
Step-by-Step Guide
Below is the complete code for the notepad application. You can easily copy the code using the button provided.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Notepad</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
textarea {
width: 80%;
height: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
resize: none;
}
.controls {
margin-top: 10px;
}
button {
padding: 10px 20px;
margin: 0 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<textarea id="notepad" placeholder="Start typing your notes here..."></textarea>
<div class="controls">
<button onclick="saveNote()">Save Note</button>
<button onclick="loadNote()">Load Note</button>
<button onclick="clearNote()">Clear</button>
</div>
<script>
const notepad = document.getElementById('notepad');
function saveNote() {
localStorage.setItem('note', notepad.value);
alert('Note saved!');
}
function loadNote() {
const savedNote = localStorage.getItem('note');
if (savedNote !== null) {
notepad.value = savedNote;
alert('Note loaded!');
} else {
alert('No note found!');
}
}
function clearNote() {
notepad.value = '';
localStorage.removeItem('note');
alert('Note cleared!');
}
</script>
</body>
</html>Explanation of the Code
The code creates a simple notepad web app that uses a <textarea> element for user input.
There are three buttons provided: one to save the note, one to load a previously saved note, and one to clear the note.
All the data is stored in the browser's local storage.
Features of This Notepad
- Save notes to local storage.
- Load notes from local storage.
- Clear the current note and remove it from storage.