HTML/JavaScript Web Application | Homework answer #328870

Question #328870

When the HTML button element with the id getActivity Btn 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 the HTML img element with id activity Img should change according to the response

this case how is executed

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 id="getActivity" type="button">
        Click
    </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>
    $('#getActivity').click(function(e) {
            url ='https://apis.ccbp.in/random-activity';
        
        $.get(url, function (data, status) {
            $('.img').attr('src', data.image);
        });
    });
    </script>
</html>