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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #302832

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.

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" onclick="getActivity()">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="title"></h1>
                    <p class="desc" id="desc"></p>
                </div>
                <div class="image">
                    <img src="" alt="" id="image">
                </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 title = document.getElementById('title');
        let desc = document.getElementById('desc');
        let image = document.getElementById('image');

        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) => {
                    title.innerText = data.activity;
                    desc.innerText = data.type;
                    image.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 #302832 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions