Git Product home page Git Product logo

kata-apod's Introduction

Kata APOD

À propos

ⓘ Ceci est la donnée d'un kata, un exercice de programmation qui se déroule généralement dans le cadre d'un coding dojo. Il est proposé aux membres du dojo de l'EPFL et fait partie d'une collection de différents katas identifiés par le tag epfl-dojo-kata sur GitHub.
Vous êtes plus que bienvenu·e d'essayer de le réaliser dans le langage de programmation de votre choix. Lorsque c'est terminé, ajoutez-vous à la liste de ceux qui l'ont fait dans ce document en proposant une Pull Request. Vous pouvez également partager votre intérêt pour ce dépôt en le «stargazant», c'est à dire en lui ajoutant une ⭐.
Bonne lecture et bon code !

But

Le but de ce kata est d'exercer le HTML / CSS / JS en créant un "browser" de la photo d'astronomie du jour, fournie par la NASA, connue sous l'acronyme APOD ("Astronomy Picture of the Day"). Il s'agit de proposer une version alternative de https://apod.nasa.gov/apod/astropix.html.

À disposition

La NASA fournit des APIs, disponibles sur https://api.nasa.gov/. Des informations sur l'API APOD sont disponibles sur cette même page tout comme sur le dépôt GitHub https://github.com/nasa/apod-api. En JavaScript, il est facile de récupérer des informations d'une API en utilisant fetch, mais ce n'est qu'un moyen parmis beaucoup d'autres.

Réalisation

  1. L'application peut être auto-contenue dans un fichier HTML ou séparées en plusieurs fichiers (par exemple pour le CSS ou le JavaScript).
  2. Le code de l'application doit se trouver sur un repo Git accessible publiquement, car l'exercice porte aussi sur la qualité des messages de commits (et le suivi de l'évolution du code de l'application à travers ces derniers).
  3. La proposition de mise en page (ci-dessous) est une suggestion permettant de mettre en avant les fonctionnalités attendues. L'esthétisme n'est pas un critère, mais ne fait pas de mal...
  4. Il n'y a pas de contrainte sur les outils, mais l'utilisation de fetch est suggérée. Ce kata peut aussi être un bon prétexte pour apprendre jQuery ou un framework tel que vue ou react.
  5. On peut commencer à partir de ce dépôt, en le forkant dans son propre compte.

Proposition de mise en page

Fonctionnalités attendues / checklist

  • La page a un titre
  • La page a un pied de page, avec au moins un lien vers le dépôt de code
  • Le titre de l'APOD est présent
  • La date de l'APOD est présente
  • La description de l'APOD est présente
  • Le copyright de l'APOD est présent (info)
  • Le média est affiché. Il peut s'agir :
    • D'une image, qui offrira un lien vers sa version HD
    • D'une vidéo, qui offrira un player pour la visionner
  • Des boutons suivant et précédent sont présents
    • Le bouton précédent est un lien vers l'image du jour précédent
    • Le bouton suivant est un lien vers l'image du lendemain, mais n'est pas
      cliquable si l'APOD est celui d'aujourd'hui
  • Les balises meta (notamment description, author et keywords) sont renseignées dans le <head> de la page HTML
  • Le titre de la page (<title>) affiche un texte avec la date (par exemple "Kata APOD 2024-09-10")

Bonus

  • L'application est disponible en ligne, par exemple sur GitHub pages
  • Il est possible de copier l'URL d'un APOD (avec la date d'un jour spécifique) pour la partager
  • Il est possible d'accéder à l'APOD d'une date précise en la spécifiant dans l'URL (par exemple ?date=2024-09-10)
  • L'application offre la possibilité de gérer la clé d'API
    (l'utilisateur peut mettre sa propre clé plutôt que DEMO_KEY)

Et pour finir

  • Une fois terminé, ajouter les liens vers votre code et/ou votre page avec ci-dessous

Je l'ai fait 💪

kata-apod's People

Contributors

azecko avatar dwesh163 avatar jaavlex avatar ponsfrilus avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.