Answer to Question #316927 in HTML/JavaScript Web Application for siva

Question

Answer to Question #316927 in HTML/JavaScript Web Application for siva

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #316927

Random Activity

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

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/random-activity-output.gif

Achieve the given functionality using JS.

Make a HTTP request(GET method) using fetch with the URL

https://apis.ccbp.in/random-activity to get a random activity.

Add

loading status with Bootstrap component spinner while making an HTTP request

It should pass:

JS code implementation should use the .classList.add and .classList.remove.

JS code implementation should use the addEventListener for click event.

When the HTML button element with the id getActivityBtn is clicked, a GET request has to be sent to the given URL. and set HTTP response value in the HTML paragraph element with id activityName, activityType and HTML Img element with id activityImg should change according to the response.

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>Random Activity</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <button type="button" class="activity" id="getActivityBtn">Get Activity</button>
            <div class="spinner spinner-border" role="status" id="spinner"></div>
            <div class="content" id="content">
                <div class="text">
                    <h1 class="title" id="activityName"></h1>
                    <p class="desc" id="activityType"></p>
                </div>
                <div class="image">
                    <img src="" alt="" id="activityImg">
                </div>
            </div>
        </div>
    </div>



    <style>
        .wrapper {
            width: 100%;
            min-height: 100vh;
            background: linear-gradient(to right, #94FCCE, #ffffff);
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-flow: column wrap;
        }
        .hidden {
            display: none!important;
        }
        .spinner {
            margin: 40px auto 0;
        }
        .activity {
            width: 200px;
            height: 50px;
            background-color: #6389D2;
            border: none;
            border-radius: 4px;
            outline: none;
            display: flex;  
            justify-content: center;
            align-items: center;
            color: #fff;
            text-transform: capitalize;
            font-size: 18px;
            margin: 24px auto;
        }
        .content {
            width: 100%;
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
            align-items: baseline;
        }
        .text {
            width: 50%;
        }
        .image {
            width: 50%;
            max-width: 40%;
        }
        .image img {
            max-width: 100%;
            object-fit: cover;
        }
        .title {
            font-size: 60px;
            font-weight: 700;
            text-align: center;
            line-height: 80px;
            max-width: 80%;
            margin: 0 auto;
        }
        .desc {
            font-size: 24px;
            margin-top: 30px;
            text-align: center;
            color: #656565;
        }
    </style>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            getActivity();
        });


        let spinner = document.getElementById('spinner');
        let content = document.getElementById('content');
        let activityName = document.getElementById('activityName');
        let activityType = document.getElementById('activityType');
        let activityImg = document.getElementById('activityImg');
        let getActivityBtn = document.getElementById('getActivityBtn');


        getActivityBtn.addEventListener('click', getActivity)


        function getActivity() {
            content.classList.add('hidden');
            spinner.classList.remove('hidden');


            let request = fetch('https://apis.ccbp.in/random-activity')
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    activityName.innerText = data.activity;
                    activityType.innerText = data.type;
                    activityImg.src = data.image;


                    spinner.classList.add('hidden');
                    content.classList.remove('hidden');
                });
        }
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #316927 in HTML/JavaScript Web Application for siva

Comments

Leave a comment

Related Questions