Advertisement
Mwordpress

Corona jordan By Mwordpress

Jun 18th, 2021
1,362
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.83 KB | None | 0 0
  1. <script>
  2. window.addEventListener("load",function(){
  3. fetch("https://corona.lmao.ninja/v2/countries/jordan")
  4.   .then((response) => {
  5.     return response.json();
  6.   })
  7.   .then((data) => {
  8.     console.log(data);
  9.     document.getElementById("Active_Cases").innerHTML = data.active;
  10.     document.getElementById("Total_Cases").innerHTML = data.cases;
  11.     document.getElementById("Critical_Cases").innerHTML = data.critical;
  12.     document.getElementById("Total_Death").innerHTML = data.deaths;
  13.     document.getElementById("Recovered_Cases").innerHTML = data.recovered;
  14.     document.getElementById("Total_Test_Done").innerHTML = data.tests;
  15.   });
  16.  });
  17. </script>
  18.  
  19.  <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>
  20.  
  21. <style>
  22. .card-deck {
  23.     display:inline-block;
  24.     width:100%;
  25.     padding:10px 10px 0;
  26.     text-align:center;
  27. }
  28. .card {
  29.   display:inline-block;
  30.   width:49%;
  31.   margin:0 0 10px 2%;
  32. }
  33. .card:nth-child(2n) {
  34.   margin:0 0 10px;
  35. }
  36. .card p {
  37.   font-size: 1.4rem;
  38.   border: 1px solid #fff;
  39. }
  40. .card .bg-warning p {
  41.   border: 1px solid #333;
  42. }
  43. .card-body {
  44.   padding:20px;
  45. }
  46. .card-text-t {
  47.   margin:0 0 10px;
  48.     font-weight: 700;
  49. }
  50. .bg-primary{color:#fff;background-color:#007bff !important;}
  51. .bg-secondary{color:#fff;background-color:#6c757d !important;}
  52. .bg-success{color:#fff;background-color:#28a745 !important;}
  53. .bg-danger{color:#fff;background-color:#dc3545 !important;}
  54. .bg-warning{color:#333;background-color:#ffc107 !important;}
  55. .bg-info{color:#fff;background-color:#17a2b8 !important;}
  56. </style>
  57.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement