Answer to Question #309250 in HTML/JavaScript Web Application for king

Question #309250

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

HTML

<!DOCTYPE html>

<html>

<body>

<p>Hello, <span id="name">Varun</span>!</p>

<p>Update your Name</p>

<br />

Save to Local Storage

</button>

<button class="btn-secondary reset-button" id="resetBtn">Reset</button>

</div>

</body>

</html>

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="display-username text-center">
        <p>Hello, <span id="name">Varun</span>!</p>
        <p>Update your Name</p>
        <input id="inputValue" placeholder="Write your name here" />
        <br />
        <button class="btn-primary save-button" id="saveBtn">Save to Local Storage</button>
        <button class="btn-secondary reset-button" id="resetBtn">Reset</button>
    </div>


    <script>
        let name = document.getElementById('name');
        let inputValue = document.getElementById('inputValue');
        let saveBtn = document.getElementById('saveBtn');
        let resetBtn = document.getElementById('resetBtn');


        saveBtn.onclick = () => {
            localStorage.setItem('name', inputValue.value);
            name.innerText = inputValue.value;
        };


        resetBtn.onclick = () => {
            localStorage.setItem('name', 'Varun');
            name.innerText = 'Varun';
        };


        document.addEventListener("DOMContentLoaded", () => {
            name.innerText = 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 #309250 in HTML/JavaScript Web Application for king

Comments

Leave a comment

Related Questions