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

Question #326128

<div class="bg-container text-center">


<button class="get-activity-button p-1 mt-3" id="getActivityBtn">Get Activity</button>


<div class="mt-2" id="result">


<div class="d-flex flex-row">


<div class="w-50 d-flex flex-column justify-content-center text-center">


<p id="activityName" class="activity-name">Buy a new house decoration</p>


<p id="activityType" class="activity-type">recreational</p>


</div>


<div class="w-50">


<img src="https://assets.ccbp.in/frontend/react-js/random-activity/party.png" id="activityImg" class="activity-img" />


</div>


</div>


</div>


<div class="d-none mt-5 mb-5" id="spinner">


<div class="d-flex flex-row justify-content-center">


<div class="spinner-border" role="status"></div>


</div>


</div>


</div>

1
Expert's answer
2022-04-10T17:44:41-0400
<style type="text/css">
        .spinner-border:after {
          content: " ";
          display: block;
          width: 64px;
          height: 64px;
          margin: 8px;
          border-radius: 50%;
          border: 6px solid #000;
          border-color: #000 transparent #000 transparent;
          animation: spinner-border 1.2s linear infinite;
        }
        @keyframes spinner-border {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

    </style>
<div>
    <button class="get-activity-button p-1 mt-3" id="getActivityBtn" style="padding: 0.25rem;margin-top: 0.75rem;" onclick="getActivity()">Get Activity</button>
    <div class="mt-2" id="result" style="margin-top: 0.5rem;">
        <div class="d-flex flex-row" style="flex-direction: row;display: flex;">
            <div class="w-50 d-flex flex-column justify-content-center text-center" style="width: 50%;display: flex;flex-direction: column;justify-content: center;text-align: center;">
                <p id="activityName" class="activity-name">Buy a new house decoration</p>
                <p id="activityType" class="activity-type">recreational</p>
            </div>
            <div class="w-50" style="width: 50%;">
                <img src="https://assets.ccbp.in/frontend/react-js/random-activity/party.png" id="activityImg" class="activity-img">
            </div>
        </div>
    </div>

    <div class="d-none mt-5 mb-5" id="spinner" style="margin-top: 1.25rem;margin-bottom: 1.25rem">
        <div class="d-flex flex-row justify-content-center" style="display: flex;flex-direction: row;justify-content: center;">
            <div class="spinner-border" role="status" style=" display: inline-block;width: 80px;height: 80px;"></div>
        </div>
    </div>
</div>
<script>
    function getActivity(){
        let activity_name =  document.getElementById("activityName");
        let activity_type =  document.getElementById("activityType");

        activity_name.innerText = "Buy a new house decoration";
        activity_type.innerText = "recreational";
    }
</script>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS