Home
Make a Notepad App Using Just HTML & JS! ๐Ÿ“’ #Programming

Make a Notepad App Using Just HTML & JS! ๐Ÿ“’ #Programming

Make a Notepad App Using Just HTML & JS! ๐Ÿ“’ #Programming
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.
#Make a Notepad App Using Just HTML & JS! ๐Ÿ“’ #Programming

Post a Comment

© ‧ Uspacial ‧ All rights reserved. Developed by Fineshop
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...