Compteur covid-19

Bonjour à tous,
Je vois partage mon code "covid-19 counter".
Il ne s'agit pas d'être parano ni figé dessus, c'est uniquement pour voir où revoir comment créer un crapper en full front.
Ici donc les infos sont récupérés depuis worldometer, puis stockés dans un array.
On notera le contournement du cors par une api dédiée. Petit passage aussi par la création des options d'un select en fonction des paramètres de l'array.
Tout pleins de choses sympa qui peuvent servir avec ce code d'actualité.
http://olivier.maison.perso.free.fr/covid19
Vous pouvez ajouter un paramètre dans l'URL comme ceci pour afficher directement le pays voulu ( actualisation de l'html toute les 5mn, si pas spécifié dans l'URL on repart sur le global )
http://olivier.maison.perso.free.fr/covid19/?country=france
N'hésitez pas si vous avez des questions.
Bon confinement à tous.

Salut Jean-Pierre,

Quelles erreurs ? en console ?
Peut-être es-tu tombé sur un moment où le site sur lequel je vais chercher les infos était inaccessible ? ( ça arrive quelquefois pendant plusieurs minutes )

Ah je pense qu'il y a erreur sur le lien que tu me donne, là tu tombe sur ma page 404 ( et c'est normal ).
Pour les erreurs, quand je lance la console, je n'en ai pas ( je suis un maniaque, je vérifie à chaque étape pour vérifier les erreurs ).
Mais ça m’intéresse de savoir où tu en vois, tu pense pouvoir faire une capture d'écran stp ?

Si ça peut aider

Ahhhh ok ok, sur firefox je n'ai pas le souci, c'est curieux d'ailleurs.
Bon en fait il s'agit du html que j’insère provisoirement dans une div pour récupérer la table dont j'ai besoin. Effectivement je pourrais faire un split AVANT de l'intégrer.
Pour le moment je n'avait pas eu besoin de le faire et surtout je gardais l'avantage de conserver la structure du DOM importée.
A voir, il faut que je m'y penche !
En tout cas merci pour ce retour !!!

Edit: ça me semblait bizarre parce que je n'utilise pas bootstrap
Et puis je n'ai pas de fichiers externe (css, js) tout est intégré à l'index.html ( plus rapide, c'est la mode en ce moment )
Modifié par stryk (23 Mar 2020 - 12:04)

Par contre, j'étais curieux de voir si tu avais fait une table responsive (il existe pas mal de technique et c'est drôle à faire) et en diminuant ma fenetre (desktop), j'ai eu la chance de voir une petite icone qui dit "tourne ton écran"… Bref, tu vois où je veux en venir, je vais avoir un peu de mal

Yordi a écrit :
Par contre, j'étais curieux de voir si tu avais fait une table responsive

Effectivement je pourrais très bien faire une table responsive, j'ai essayé quelques soluces mais rien que je trouve joli. ( c'est facile à faire mais je trouve le rendu moche pour ce genre de tableau ).
J'ai donc mis ce petit picto en mode portrait.
C'est sympa je trouve. J'avais déjà vu ça ailleurs et ça me plait bien !

Bon sur un PC il faut avoir de l'imagination pour tourner son écran
Modifié par stryk (23 Mar 2020 - 12:11)

Bonsoir,

pour le responsive , en retirant la petite image et ne gardant qu'une mediaquerie, ceci me semble okay et lisible :

@media screen and (max-width: 1000px) {
  body {
    overflow: visible;
  }
  tr {
    display: contents;
  }
  .table {
    display: block;
    width: auto;
    height: auto;
  }
  tbody {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-gap: 2px;
    grid-auto-flow: row dense;
    text-align: right;
    justify-content: center;
  }
  th {
    grid-column: 1;
  }
  th,
  td {
    padding: 0.5em;
  }
  th:first-of-type {
    display: none;
  }
  td:first-of-type,
  body {
    grid-row: 1;
    grid-column: 1 / 3;
    text-align: center;
    min-width:280px;
  }
  .middle {
    position: static;
    transform: scale(1);
  }
  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 15px;
  }
}

Hello gcyrillus,

Pas mal du tout effectivement
J'avais à peu près le même rendu mais avec un css beauuuuuuucoup plus compliqué (et tordu).
Merci, je vais étudier ça de plus près, même si j'avoue que j'ai du mal avec les tableaux dans ce sens là
En tout cas c'est sympa de ta part, au moins ça me permet d'apprendre des trucs ( je suis une buse en CSS )
@++

Pour le css de ce tableau (sans cellule en rowspan/colspan) , pour le faire pivoter, il y a aurait aussi beaucoup plus court :

tbody ,tr {display:grid;}
tbody  {grid-template-columns:repeat(2,1fr);}
tr   {grid-auto-rows:1fr;}

tr en grid aussi , mais en 1 seule colonne avec grid-auto-row : https://developer.mozilla.org/fr/docs/Web/CSS/grid-auto-rows

Cela marche seulement parce que c'est un tableau tout simple .

plus court encore : (nécessiterait de donner une hauteur au th/td)

tr  {float:left;}
th,td {display:block;}

enfin flex aussi :

tbody,tr {display:flex;}
tr   {flex-flow:column;}
th,td {flex:1;}

Tu as probablement trop une approche de développeur alors que CSS n'est pas un langage de programmation

je te laisse ces 3 autres approches ici pour jouer avec : https://codepen.io/gc-nomade/pen/gOpBmqr
Modifié par gcyrillus (24 Mar 2020 - 13:16)