Contexte
Des données JSON à afficher
Dans le cadre scolaire, un jeu de données en JSON a été fourni et il a été demandé aux étudiants de les mettre en page totalement librement du moment que l’intégralité de ces données était utilisée.
Les langages à utiliser devaient être JavaScript, HTML et CSS.
Objectif
Présenter les données de manière attractive
Mon but était de présenter les données pour susciter l’envie de tout regarder, par exemple, comme si c’était pour expliquer le système solaire à des enfants.
Comme le JSON était en français et en anglais, cela rentrait toujours dans mon idée d’application à visée pédagogique pour de jeunes élèves !
Compétences développées
- Prise en main d’AngularJS
- Montée en compétences en JS
- Traitement d’un format JSON
- Autonomie
Compétences développées
Prise en main d’AngularJSMontée en compétences en JS
Traitement d’un format JSON
Autonomie
Solution
Des planètes souriantes
Pour le traitement du fichier JSON et la gestion des langues, j’ai choisi d’utiliser AngularJS.
Les planètes ont été positionnées en fonction des distances réelles et leur diamètre a été calculé en prenant en compte la taille de la fenêtre et les données fournies.
Lors du clic sur une planète, le détail des informations la concernant s’affiche de façon attrayante notamment avec des sourires aléatoires pour amuser les enfants !
Technologies utilisées
![Logo Angular](https://clemencebalmand.fr/wp-content/uploads/2021/04/logo-planete-angular-283x300.png)
![HTML 5](https://clemencebalmand.fr/wp-content/uploads/2021/04/html-300x300.png)
![CSS 3](https://clemencebalmand.fr/wp-content/uploads/2021/04/css-300x300.png)
![Vanilla JS](https://clemencebalmand.fr/wp-content/uploads/2021/04/javascript-300x300.png)