Rédaction d'un fichier README

Afin de coller aux attentes du projet, il faut rédiger le README avec les informations suivantes :

• Introduction et présentation du projet
• Badges de validations (W3C : CSS, HTML)
• Versions
• Contributeurs

Création d'une modale

○ Afficher un bouton pour contacter le photographe. (Ajouter un event listener)

• Le formulaire de contact est une modale qui s'affiche par-dessus le reste.
• Il comprend des champs pour les noms, l'adresse électronique et le message.
• Plus tard, le bouton de contact enverra un message au photographe.

Pour l'instant, seulement afficher le contenu des trois champs dans
les logs de la console.

Création d'une section pour afficher le nombre total de likes de l'utilisateur

To-do

• Récupérer le prix du photographe
• Créer un composant dans la classe Photographer pour afficher le TJM du photographe
• Calculer les likes

La responsivité est absente sur la page photographe

Afin de coller aux exigences du projet, la page photographe doit être 100% responsive

A faire

• Importer des medias queries
• Gérer le header du photographe
• Gérer la gallery et la taille des médias

Problème

Le formulaire n'est pas navigable au clavier.

Ressources

https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Gestion des likes

○ Chaque média comprend le titre, la date, le prix et le nombre de clichés.

A faire

■ Lorsque l'utilisateur clique sur l'icône "Like", ça incrémente le nombre de likes affiché.
■ Le nombre total de clichés doit être compté et ajouté au total du profil du photographe.

Affichage des données

A faire :

• Afficher toutes les données voulues par rapport à la maquette Figma
• Mise en forme de la carte photographe (responsive, ajouter les balises sémantiques)

Afin de coller aux exigences de qualité du code, des design patterns doivent êtres mis en place. Ils vont êtres utilisés pour la création de la page d'accueil pour les cards photographes, pour la création de la page photographe, et pour la génération des médias dans la page photographe.

Pré-requis

• La navigation entre la page photographe, page d'accueil et vice-versa doit être fonctionnelle.
• Les données doivent êtres bien récupérées.

A faire

• Créer les constructors : Photography, Videos et Medias (qui héritera des deux premiers)
• Créer le constructor : Photographer

Avant de merge :

1. Les images doivent êtres récupérées sur chaque profils
2. Le code doit être documenté
3. Aucunes erreurs dans la console

Ressources

https://betterprogramming.pub/javascript-design-patterns-25f0faaaa15

Le modele de la lightbox ne colle pas avec l'exigence de la gestion des médias

Création d'une lightbox

A faire

Lorsque l'utilisateur clique sur un média, celui-ci doit s’ouvrir dans une lightbox :

• Lorsque la lightbox est affichée, il y a une croix dans le coin pour fermer la fenêtre.
• Des boutons de navigation permettent de passer d'un élément média à l'autre (les utilisateurs peuvent cliquer sur ces boutons pour naviguer).
• Les touches fléchées permettent également de naviguer entre les médias.
• Gérer l'affichage sur desktop
• Fixer les images qui sont cassées
• Revoir le flexbox de la lightbox

Bonus

• Fermer la lightbox lorsque l'utilisateur clique sur la touche Esc

Ressources

https://grafikart.fr/tutoriels/lightbox-javascript-1224

https://www.freecodecamp.org/news/how-to-create-a-lightbox-using-html-css-and-javascript/

Gestion de la recherche

En cliquant sur une étiquette (tag) dans la barre de navigation, la liste des photographes est filtrée pour n'afficher que ceux qui correspondent à cette étiquette.

A faire

• Investiguer sur la technique à utilisé

Cliquer sur un photographe et ouvrir sa page

Ce que je pense faire

• Passer l'id du photographe dans l'URL lorsque l'utilisateur clique sur le photographe.
• Récupérer les données associées à l'id du photographe
• Afficher les données associées à l'id du photographe

Interrogations

• Comment récupérer l'id dans l'URL ?
• Comment gérer la génération de la page d'un photographe ?

Problèmes

• L'image n'est pas centré verticalement
• Gérer l'affichage de l'image sur mobile
• Gérer l'affichage de la vidéo

Correctifs

A faire

• Modifier l'affichage du bouton selon le device de l'utilisateur
• Créer le style du bouton

Problème d'affichage

Le prix du photographe n'est pas affiché

Quelques fixs

• Optimiser les images de la lightbox encore

• Utiliser <picture> pour les images

• Ré-ajuster les valeurs des tabindex

• Ajuster la bordure du focus qui créer un décalage

• Nettoyer les branches

• Ajouter un border-radius sur les médias dans la page photographe

•  Modifier le texte alternatif sur les photos de profil des photographes

• Dans la lightbox qui s'ouvre, le lien "précédent" est après le lien "suivant" ?

Bien récupérer les données médias pour chaque photographes et les display sur leurs pages respectives.