Trả lời cho câu hỏi #302832 trong Ứng dụng web HTML/JavaScript cho Chethan
Hoạt động ngẫu nhiên
Mục tiêu của bài kiểm tra mã hóa này là nhanh chóng đưa bạn ra khỏi mặt đất với các thao tác của DOM.
Tham khảo hình ảnh dưới đây.
//assets.ccbp.in/frontend/content/dynamic-webapps/random-activity-output.gif
Đạt được chức năng đã cho bằng cách sử dụng JS.
- Thực hiện yêu cầu HTTP (nhận phương thức) bằng cách sử dụng Fetch với URL
- //apis.ccbp.in/random-activity để có được một hoạt động ngẫu nhiên.
- cộng
- Tải trạng thái với spinner thành phần bootstrap trong khi thực hiện yêu cầu HTTP.
<!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="//cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="container"> <button type="button" class="activity" title="getActivity()">Get Activity</button> <div class="spinner spinner-border" role="status" id="spinner"></div> <div class="content" id="content"> <div class="text"> <h2 class="title" id="title"></h2> <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="//cdn.jsdelivr.net/npm//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('//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>