How to Create an Offline Notepad for Yourself Using HTML, CSS & JS

by leefarrell61 in Circuits > Software

109 Views, 1 Favorites, 0 Comments

How to Create an Offline Notepad for Yourself Using HTML, CSS & JS

free-offline-notepad.png

Want a personal offline notepad that saves your notes automatically? In this tutorial, we’ll build a simple but powerful notepad using:


HTML (for structure)


CSS (for styling)


JavaScript (for saving notes to localStorage)


Features:

  1. Works 100% offline (no server needed)
  2. Auto-saves notes to your browser
  3. Clean, distraction-free design
  4. Easy to customize


Disclaimer:

This notepad saves your notes directly in your browser’s local storage. We are not responsible for any lost data.


Your notes may be deleted if:

  1. You clear your browser's cache or site data
  2. You uninstall or reset your browser
  3. Your computer is infected with malware or viruses


Please avoid saving sensitive or important information — use a traditional notepad or a secure app for that.


Let’s get started!

Download & Open a Code Editor

atom.png

Since you're just getting started, it's best to download a code editor so you can create HTML, CSS, and JavaScript files with ease.

In this tutorial, we'll be using Atom because it's easy to use but still powerful for the powerless systems.

However, depending on your computer's performance, you might want to choose a simpler code editor instead.

Create HTML File

html.png

Open Atom or any code editor and copy & paste the code I gave you below.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Offline Notepad</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="notepad">
<h1>My Personal Notepad</h1>
<div class="toolbar">
<button id="bold-btn">Bold</button>
<button id="italic-btn">Italic</button>
<button id="save-btn">Save</button>
<button id="clear-btn">Clear All</button>
</div>
<div id="editor" contenteditable="true" placeholder="Start typing here..."></div>
<p id="status"></p>
</div>
<script src="script.js"></script>
</body>
</html>


This is just the HTML part — it's the basic, non-working structure of your offline notepad.


Think of it like the bones in your arm: they don’t do much on their own or look nice without JavaScript and CSS, but they’re essential for everything else to work.


Press CTRL + S to save the file as 'index.html': you can choose any folder you like, but we recommend creating a folder called 'Notepad' on your Desktop.


After completing this step, double-click on 'index.html' to open it and check if it's working. It should look like the image shown above.


Create CSS File

css.png

Now let’s add some style to your notepad using CSS.


Open Atom or any code editor you’re using, and copy & paste the CSS code I’ve provided below.


body {
font-family: 'Arial', sans-serif;
background: #f9f9f9;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}

.notepad {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 800px;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}

.toolbar {
display: flex;
gap: 8px;
margin-bottom: 15px;
}

.toolbar button {
background: #e0e0e0;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}

.toolbar button:hover {
background: #d0d0d0;
}

#editor {
min-height: 400px;
border: 1px solid #ddd;
padding: 15px;
font-size: 16px;
line-height: 1.6;
outline: none;
}

#editor:empty:before {
content: attr(placeholder);
color: #999;
}

#status {
color: #666;
font-style: italic;
text-align: center;
margin-top: 10px;
}


This part adds design to your basic structure — think of it like the skin and clothes on your arm.


It doesn’t make your notepad “do” anything (that’s what JavaScript is for), but it makes everything look much better and easier to use.


Press CTRL + S and save this file as "style.css" in the same folder where you saved your "index.html" file — ideally in the "Notepad" folder on your Desktop.


Make sure the HTML file is correctly linked to this CSS file. If it is, your notepad should now have some visual style when you double-click index.html.


To connect your CSS file to your HTML properly, insert the file path in this line of HTML:


<link rel="stylesheet" href="style.css">


If your CSS file is saved in a different location, make sure to update the href with the correct path — for example:


<link rel="stylesheet" href="C:\Users\YourName\Desktop\Notepad\style.css">


Create JS (javaScript) File

script.png

Now it’s time to bring your notepad to life with JavaScript.


Open Atom (or whichever code editor you're using), and copy & paste the JavaScript code I’ve provided below.


// Get elements
const editor = document.getElementById("editor");
const boldBtn = document.getElementById("bold-btn");
const italicBtn = document.getElementById("italic-btn");
const saveBtn = document.getElementById("save-btn");
const clearBtn = document.getElementById("clear-btn");
const status = document.getElementById("status");

// Load saved note (if any)
window.addEventListener("load", () => {
const savedNote = localStorage.getItem("myNote");
if (savedNote) {
editor.innerHTML = savedNote;
status.textContent = "Last note loaded!";
setTimeout(() => status.textContent = "", 2000);
}
});

// Formatting functions
boldBtn.addEventListener("click", () => document.execCommand("bold", false, null));
italicBtn.addEventListener("click", () => document.execCommand("italic", false, null));

// Save note to localStorage
function saveNote() {
localStorage.setItem("myNote", editor.innerHTML);
status.textContent = "Note saved!";
setTimeout(() => status.textContent = "", 2000);
}

saveBtn.addEventListener("click", saveNote);

// Auto-save every 3 seconds (optional)
setInterval(saveNote, 3000);

// Clear all text
clearBtn.addEventListener("click", () => {
editor.innerHTML = "";
localStorage.removeItem("myNote");
status.textContent = "Cleared!";
setTimeout(() => status.textContent = "", 2000);
});


JavaScript adds functionality — it’s like the muscles and brain of your notepad.


While HTML gives structure (like bones) and CSS gives style (like skin and clothes), JavaScript makes your notepad actually do things — like letting you type, save, or clear notes.


Press CTRL + S and save this file as "script.js" in the same folder where your index.html and style.css files are stored — ideally, the "Notepad" folder on your Desktop.


To make sure your HTML file knows to use the JavaScript, link it at the bottom of your HTML code (just before the closing </body> tag).


If your JavaScript file is in a different location, be sure to update the path — for example:


<script src="C:\Users\YourName\Desktop\Notepad\script.js"></script>


Once it's linked, open index.html again. You should now be able to interact with your notepad!

Start Using Offline Notepad

offline-notepad.png

Once you’ve done everything correctly, double-click on index.html to open your offline notepad in your browser.


You can now start writing and using it right away!


Your notes will be saved automatically and will stay there as long as you don’t clear your browser’s cache or data.


So feel free to close and reopen the notepad — your work will still be there.