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

Question #302823

Favourite Place

The goal of this coding exam is to quickly get you off the ground with HTML radio input elements

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/favourite-place-op.gif

Achieve the design with HTML, CSS, and functionality with JS

When the Submit button is clicked
Text content in the HTML paragraph element should contain the value of the checked HTML radio input element.

Note

The HTML radio input element with value Agra, should have checked atrribute by default.
You can use HTML form element.

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        button {
            background: rgb(43, 140, 250);
            color: white;
            padding: 5px;
            margin-top: 20px;
        }
        .message {
            margin-top: 20px;
        }
    </style>
    <h1>Select your favorite place</h1>
    <form>
        <label>
            <input type="radio" name="place" value="Lucknow">
            Lucknow
        </label>
        <br>
        <label>
            <input type="radio" name="place" value="Agra" checked>
            Agra
        </label>
        <br>
        <label>
            <input type="radio" name="place" value="Varanasi">
            Varanasi
        </label>
        <br>
        <button id="btn">Submit</button>
    </form>
    <div class="message"></div>
    <script>
        const btn = document.querySelector('#btn'),
              inputs = document.querySelectorAll('input'),
              message = document.querySelector('.message');

        btn.addEventListener('click', e => {
            e.preventDefault()
            inputs.forEach(e => {
                if (e.checked) {
                    message.textContent = `Your favorite place: ${e.value}`
                }
            })
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions