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

Question

<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>

Answer 1

<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>