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.

Expert's answer

<!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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions