Make a Notepad App Using Just HTML & JS! 📒 #Programming

0
Create a Simple Notepad in HTML and JavaScript

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.

Post a Comment

0Comments
Post a Comment (0)