Interested in this project?
Continue LearningIn this tutorial, we'll make a text editor in the broswer. Using JavaScript, we can save the text automatically in a user's localStorage so that whenever the text editor is pulled up, it remembers the text that was written. localStorage is a JavaScript object that let's you save data in user's browser.
As always, you'll need a folder with three files:
- index.html - for our markup
- style.css - for styling
- app.js - for the function(s)
Since we're making a text-editor, our content has to be editable! Thankfully, HTML has an attribute for that. Go ahead: link the files, and create two divs with the contenteditable attribute and with a heading and a content id.
<html>
<head>
<title>Text Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<div id="heading" contenteditable="true"></div>
<div id="content" contenteditable="true"></div>
<script src="app.js"></script>
</html>
Open the html file in your bowser. You'll see that you have two editable text boxes. However, they're pretty ugly. Let's style them!
Styling the Editor
Here's some basic things you should do in your the style.css file:
- change the font
- center the text boxes and set a max-width
- remove the ugly blue outline with div:focus
- add some padding
- adjust the font size
This is my attempt. Feel free to customize your editor however you wish to!
html {
font-family: "Helevetica", sans-serif;
}
body {
color: #333;
font-weight: 100;
max-width: 50em;
margin: 0 auto;
}
div:focus {
outline: none;
}
#heading {
font-size: 48px;
padding-top: 30px;
}
#content {
padding-top: 10px;
font-size: 24px;
}
How does your editor look now? Play around with it! However, you may have noticed that if you refresh the page, the text doesn't save. Let's fix that.
JavaScript and localStorage function
To save the text in our two divs, we need to store it in the brower's localStorage. To do that, we first have to get the div ids from the HTML document and set it to a localStorage instance with some default text. Then, we can write a function that checks the innerHTML of both the divs and saves it every second. Here's what we have to write:
- for both divs, we need to use document.getElementById().innerHTML and set it to a localStorage[] 'default text' object
- need to have an interval function which has a localStorage object assigned to the document.getElementById().innerHTML for each div
- make the function run every 1000 milliseconds, or 1 second.
This is what the finished app.js should look like:
document.getElementById("heading").innerHTML =
localStorage["title"] || "Just Write"; // default text
document.getElementById("content").innerHTML =
localStorage["text"] || "This text is automatically saved every second :) "; // default text
setInterval(function() {
// fuction that is saving the innerHTML of the div
localStorage["title"] = document.getElementById("heading").innerHTML; // heading div
localStorage["text"] = document.getElementById("content").innerHTML; // content div
}, 1000);
Comments (0)