Answer to Question #323968 in HTML/JavaScript Web Application for suresh

Question #323968

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.

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> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<head>
<title>Hello html</title>
</head>
<body>
    <button class="btn btn-primary" type="button">
        <span class="d-none spinner-border spinner-border-sm"  role="status" aria-hidden="true"></span>
        Download Image...
    </button>
    <img src="" class="img img-fluid" alt="Responsive image">
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<script>
    $('.btn').click(function(e) {
        let spinner = $(e.currentTarget).find('span'),
            url ='https://apis.ccbp.in/random-activity';
        
        spinner.removeClass('d-none');


        $.get(url, function (data, status) {
            spinner.addClass('d-none');
            
            $('.img').attr('src', data.image);
        });
    });
    </script>
</html>

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

Comments

No comments. Be the first!

Answer to Question #323968 in HTML/JavaScript Web Application for suresh

Comments

Leave a comment

Related Questions