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

Question #302816

Showing loading text with setTimeout

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

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/showing-loading-text-with-setTimeout-op.gif

Achieve the given functionality using JS.

When the HTML button element is clicked

The text content of the button should change to Loading... for 1 second.
After 1 second the text content of the button should change to Show Loading for 1 sec.

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Show Loading for 1 sec

</button>

</div>

</body>

</html>

Expert's answer

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <style>
        #button {
            height: 50px;
            width: 180px;
            background: rgb(44, 190, 100);
            outline: none;
            border: none;
            color: white;
            cursor: pointer;
        }
    </style>
    <div class="text-center">
        <button id="button" class="button" >
        Show Loading for 1 sec
        </button>
    </div>
    <script>
        const btn = document.querySelector('#button');

        btn.addEventListener('click', (e) => {
            e.target.textContent = 'Loading...'
            setTimeout(() => e.target.textContent = 'Show Loading for 1 sec', 1000)
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions