~ NANTES QUEST ~

Pour commencer,

Nous nous sommes penché sur le concept d'un quiz sur Nantes avec des images de lieux Nantais pour, in fine, deviner où ils se trouvent.

Pré-requis :

HTML, CSS, JS

Première partie :

Wireframe :

Maquette :

Maquette en Responsive :

Rendu final :

Seconde partie :

HTML/CSS associés au JS

• Création de la nav-bar
• Création de la section Quiz
• Création du footer
• Partie JS
• Création d'une home-card avec les catégories

Démarrage :

Pour démarrer notre quête, nous avons commencé par un wireframe.

S'en est suivi un développement plus poussé du site sur figma (avec ajout des couleurs, des composants, typographie etc...) Ajout des différents plans du site (Que se passe-t-il lorsque l'on clic sur tel lien ?, Quel résultat ?, Comment l'afficher ? etc...)

Responsive sur figma.

Ajout des variables JS.

Ajout d'une home-card pour orienter l'utilisateur vers la catégorie qu'il souhaite.

Ajout des confettis lors de l'affichage du score.

Impossibilité d'aller dans une catégorie sans mettre un nom.

Ajout d'une majuscule sur la première lettre après avoit validé le nom.

Ajout d'un effet fondu quand on change de catégorie et/ou de question.

Fabriqué avec :

VSCode (version 1.94), Figma (16.13. 3), Excalidraw

Auteurs(trice) :

Team KIPIK !

• Émilie DE DUYVER

• Github : EmiLy-Ly-san

  • ✉️ emilie.deduyver@gmail.com

• Valentin LOISEAU

• Github : vloiseau13

  • ✉️ valentin.loiseau13@gmail.com

• Romain LEMONNIER

• Github : RomainLmn44

  • ✉️ lemonnier.romain13@gmail.com

• Charly MELLERIN

• Github : MellerinCharly

  • ✉️ mellerincharly.pro@gmail.com

Note

“N’importe quel idiot peut écrire du code qu'un ordinateur peut comprendre. Les bons programmeurs écrivent du code que les humains peuvent comprendre.” - Martin Fowler

~ NANTES QUEST ~

Let's begin,

We thought about the concept of a quiz about Nantes, with pictures of Nantes places. The goal is to find the location.

Prerequisites :

HTML, CSS, JS

First-part :

Wireframe :

Model :

Responsive model :

Rendu final :

Second part :

HTML/CSS with Javascript

• Creation of the nav-bar
• Creation of the quiz section
• Creation of the footer
• Javascript part
• Creation of a home-card with categories

Beginning :

At first, we start with the creation of a Wireframe.

It was followed by an modeling more precise on Figma (we add colours, components, fonts etc..) We add differents views of our site (what happened when we click on some links ? Results ? How it'll show finally)

Responsive part on Figma.

Adding the variables for Javascript.

Adding a home-card to guide users toward the aimed categorie.

Adding confettis while displaying the score.

Blocking the choice of categories without writing a user name.

Adding a capital letter if the user don't write it on user name.

Made with :

VSCode (version 1.94), Figma (16.13. 3), Excalidraw

Makers :

Team KIPIK !

• Émilie DE DUYVER

• Github : EmiLy-Ly-san

  • ✉️ emilie.deduyver@gmail.com

• Valentin LOISEAU

• Github : vloiseau13

  • ✉️ valentin.loiseau13@gmail.com

• Romain LEMONNIER

• Github : RomainLmn44

  • ✉️ lemonnier.romain13@gmail.com

• Charly MELLERIN

• Github : MellerinCharly

  • ✉️ mellerincharly.pro@gmail.com

Note

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” - Martin Fowler