---
title: 'Auto Save'
date: '2016-04-22'
thumbnail: '/thumbnails/node.png'
slug: 'auto-save'
tag: 'react,'
canonicalUrl: 'https://medium.com/hackernoon/the-node-js-system-51090c35dddc'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1706010882/devamiya/projects/o4w43fdqojhohub6javs.gif'
---
![](https://res.cloudinary.com/dhboldbpa/image/upload/v1706010882/devamiya/projects/o4w43fdqojhohub6javs.gif)

<br /> 
<br /> 
<br /> 

This application will help you to understand the below details

1. Real-Time Character Counter
2. Auto-Save Functionality

# Real-Time Character Counter:

The application features a real-time character counter that dynamically updates as the user types or deletes text in the textarea.
The character count is displayed below the textarea, providing immediate feedback to the user about the length of their input.

# Auto-Save Functionality:

The application incorporates auto-save functionality using `localStorage` to store the text content entered by the user.
Whenever there is an input change, the content is automatically saved to the browser's localStorage, allowing the user to revisit the page and find their previously entered text still present in the textarea.


# Learning Nougets:

  1. localStorage
  2. querySelector
  3. eventListener


```html
    
      <textarea
        name=""
        id="area"
        cols="50"
        rows="10"
        placeholder="Write your text here...."
        value=""
      ></textarea>
      <p id="count" style="margin-left: auto">200 characters left</p>
      <button class="btn btn-style2">Clear All</button>
    

```


<CodeBox template="static" height="500px"
files={
  {
    "/styles.css": `
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(179, 255, 242);
  font-family: "Comic Neue", cursive;
  font-style: italic;
}
h1 {
  font-weight: 700;
  text-align: center;
}
.container {
  padding: 2rem;
  box-shadow: 0px 0px 34px -4px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  background-color: rgb(83, 237, 206);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.counts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
textarea {
  padding: 1.5rem;
  font-size: 16px;
  resize: none;
  font-weight: 700;
  outline: none;
  border-radius: 10px;
  border: 2px solid black;
  background-size: cover;
  background-position: center;
  font-family: "Comic Neue", cursive;
  font-style: italic;
}
span {
  font-size: 25px;
}

.btn {
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  line-height: 35px;
  border: 1px solid;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  transition: all 0.35s;
  box-sizing: border-box;
}
.btn-style2 {
  border-color: #e24555;
  color: #ee5178;
}
.btn-style2:hover {
  box-shadow: 0 0.25em 0.25em -0.1em #526cc9;
  transform: translateY(-0.25em);
  border-color: #525cc9;
  color: #174786;
}

@media only screen and (max-width: 540px) {
  .container {
    height: 100vh;
    width: 100%;
  }
}
`,  
    "/index.html": `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/styles.css" />
    <title>Real-time Character Counter</title>
  </head>
  <body>
    <div class="container">
      <h1>Real-time Character Counter</h1>
      <textarea
        name=""
        id="area"
        cols="50"
        rows="10"
        placeholder="Write your text here...."
        value=""
      ></textarea>
      <p id="count" style="margin-left: auto">200 characters left</p>
      <button class="btn btn-style2">Clear All</button>
    </div>
    <script src="/index.js"></script>
  </body>
</html>`,
"/index.js": `let btn = document.querySelector("button");
let text = document.querySelector("textarea");

//* activate button
btn.addEventListener("click", function (e) {
  text.value = "";
  localStorage.setItem("name", "");
  setCounter();
});

//* activate text area
text.addEventListener("keyup", function (e) {
  localStorage.setItem("name", text.value);
  setCounter();
});

//* checking local storage is empty or not.
if (localStorage.getItem("name")) {
  text.value = localStorage.getItem("name");
}

//* set counter
function setCounter() {
  let count = text.value.length;
  if (count == null) {
    count = 0;
  }
  const counter = 200 - count
  document.getElementById("count").innerHTML = counter+ " characters left";
}
setCounter();
`
}
 }/>