Answer to Question #302809 in HTML/JavaScript Web Application for Chethan

Question

Answer to Question #302809 in HTML/JavaScript Web Application for Chethan

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #302809

Remove Item in Local Storage

The goal of this coding exam is to quickly get you off the ground with

Remove Item In Localstorge

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/removeItem-in-localStorage-op.gif

Achieve the given functionality using JS

When the HTML button with id saveBtn is clicked
The value of the HTML input element with id inputValue should be stored into the local storage with key as name
The HTML span element with id name should show the value of the HTML input element.
When the HTML button with id resetBtn is clicked
Clear the value in the HTML input element
Clear the value with key name stored in the local storage and set the text content of the HTML span element with id name to default.
When the page open's or reload, the value which exists in local storage with key name should be displayed in the HTML span element with id name.

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">
    <title>Document</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrapper {
            padding: 15px;
            position: relative;
            width: 400px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
        }
        input {
            height: 35px;
            padding: 10px;
        }
        .btn {
            outline: none;
            cursor: pointer;
            background: none;
            padding: 5px;
            color: white;
        }
        .save {background: rgb(91, 134, 255);}
        .reset {background: gray;}
    </style>
    <div class="wrapper">
        <p>Hello, <span class="name">Stranger</span>!</p>
        <p>Update your Name</p>
        <input type="text" placeholder="Write your name here">
        <div class="buttons">
            <button class="btn save" onclick="save()">Save to Local Storage</button>
            <button class="btn reset" onclick="reset()">Reset</button>
        </div>
    </div>
    <script>
        const name = document.querySelector('.name'),
              input = document.querySelector('input')

        function reset() {
            localStorage.setItem('name', '');
            name.textContent = 'Stranger';
        }
        function save() {
            if (input.value) {
                input.style.background = 'white'
                localStorage.setItem('name', input.value)
                name.textContent = input.value
                input.value = ''
            } else {
                input.style.background = '#ff7b64'
            }
        }
        if (localStorage.getItem('name'))
            name.textContent = localStorage.getItem('name')
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #302809 in HTML/JavaScript Web Application for Chethan

Comments

Leave a comment

Related Questions