Answer to Question #303829 in HTML/JavaScript Web Application for taufiq umar

Question #303829

Use Localstorage using textarea:

Use the below reference image link:.

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 #303829 in HTML/JavaScript Web Application for taufiq umar

Comments

Leave a comment

Related Questions