Answer to Question #302716 in HTML/JavaScript Web Application for chethan

Question #302716

Localstorage using textarea

The goal of this coding exam is to quickly get you off the ground with Localstorage using textarea.

Use the below reference image

https://res.cloudinary.com/dfxicv9iv/image/upload/v1618940947/localstorage-textarea_yvgdzf.gif


Achieve the design with HTML, CSS, and functionality with JS.

  • When the Save button is clicked
  • If the value in the HTML textarea element is non-empty, store textarea value in local storage with the key yourStory.
  • When we open or reload the page,
  • The value which exists in local storage with id yourStory should be displayed.

Quick Tip

Use bootstrap button primary.



1
Expert's answer
2022-03-02T03:04:42-0500
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title></title>
</head>
<body>
    <h1 style="text-align: center;">Tell us your story</h1>
    <form action="" class="d-flex flex-column align-items-center">
        <textarea name="story" id="" cols="30" rows="10"></textarea>
        <br>
        <button class="btn btn-primary m-2" onclick="log()">Save</button>
    </form>
    <script>
        const story = document.querySelector('textarea'),
              btn = document.querySelector('button');

        function log() {
            if (story.value)
                localStorage.setItem('yourStory', story.value)
        }

        if (localStorage.getItem('yourStory')) {
            story.value = localStorage.getItem('yourStory')
        }
    </script>
</body>
</html>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS