Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script>
- window.addEventListener("load",function(){
- fetch("https://corona.lmao.ninja/v2/countries/jordan")
- .then((response) => {
- return response.json();
- })
- .then((data) => {
- console.log(data);
- document.getElementById("Active_Cases").innerHTML = data.active;
- document.getElementById("Total_Cases").innerHTML = data.cases;
- document.getElementById("Critical_Cases").innerHTML = data.critical;
- document.getElementById("Total_Death").innerHTML = data.deaths;
- document.getElementById("Recovered_Cases").innerHTML = data.recovered;
- document.getElementById("Total_Test_Done").innerHTML = data.tests;
- });
- });
- </script>
- <div class="card-deck text-center"> <div class="card mb-2"> <div class="card-body bg-primary text-light rounded"> <div class="card-text card-text-t">الحالات المصابة حاليا</div><p class="card-text badge badge-outline-light" id="Active_Cases"></p></div></div><div class="card mb-2"> <div class="card-body bg-info text-light rounded"> <div class="card-text card-text-t">إجمالي الحالات</div><p class="card-text badge badge-outline-light" id="Total_Cases"></p></div></div><div class="card mb-2"> <div class="card-body bg-warning text-light rounded"> <div class="card-text card-text-t">الحالات الحرجة</div><p class="card-text badge badge-outline-light" id="Critical_Cases"></p></div></div><div class="card"> <div class="card-body bg-danger text-light rounded"> <div class="card-text card-text-t">حالات الوفاة</div><p class="card-text badge badge-outline-light" id="Total_Death"></p></div></div><div class="card"> <div class="card-body bg-success text-light rounded"> <div class="card-text card-text-t">حالات تعافت</div><p class="card-text badge badge-outline-light" id="Recovered_Cases"></p></div></div><div class="card"> <div class="card-body bg-secondary text-light rounded"> <div class="card-text card-text-t">إجمالي الاختبارات</div><p class="card-text badge badge-outline-light" id="Total_Test_Done"></p></div></div></div>
- <style>
- .card-deck {
- display:inline-block;
- width:100%;
- padding:10px 10px 0;
- text-align:center;
- }
- .card {
- display:inline-block;
- width:49%;
- margin:0 0 10px 2%;
- }
- .card:nth-child(2n) {
- margin:0 0 10px;
- }
- .card p {
- font-size: 1.4rem;
- border: 1px solid #fff;
- }
- .card .bg-warning p {
- border: 1px solid #333;
- }
- .card-body {
- padding:20px;
- }
- .card-text-t {
- margin:0 0 10px;
- font-weight: 700;
- }
- .bg-primary{color:#fff;background-color:#007bff !important;}
- .bg-secondary{color:#fff;background-color:#6c757d !important;}
- .bg-success{color:#fff;background-color:#28a745 !important;}
- .bg-danger{color:#fff;background-color:#dc3545 !important;}
- .bg-warning{color:#333;background-color:#ffc107 !important;}
- .bg-info{color:#fff;background-color:#17a2b8 !important;}
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement