intérêt de l'Auteur

Je cherchais une idée de site. J'ai d'abord pensé à faire un site sur les animaux puis je me suis dis qu'il me fallait un site que je pourrais continuer même après avoir terminé le projet.

J'aime beaucoup voyagé et ça depuis que je suis petite. J'aime découvrir de nouvelle culture et des nouvelles langues. De plus, j'aime beaucoup prendre des photos. J'ai donc décidé de créer un site dans lequel je pourrais faire découvrir mes photos. J'ai donc commencé par créer des rubriques avec des pays.

Pour coller avec le sujet, j'ai rajouté un lien wikipédia pour les pays que je n'avais pas encore visité et j'ai mis des photos dans ceux que j'avais deja visité. J'ai décidé de créer une rubrique dans la page d'accueil avec des sujets historiques des pays. Vous pouvez retrouver mes photos avec des informations sur les monuments dans les pays suivants :
- Italie
- France
- Sri Lanka
- Japon

Explication du site (dans l'ordre du programme css)

Le menu : (l10 à 67 (css))
J'ai repris le programme de l'exercice menu de mathadomicile, puis j'ai changé le style, ajouté des bordures avec :hover changé la couleur et arrondi les angles. La difficulté a résidé dans le placement des cases. Je voulais que peu importe la taille de l'écran l'espacement entre chaque case soit le même. J'ai d'abord utilisé la mesure "vw" mais elle n'était pas parfaite. J'ai calculer le pourcentage necessaire en fonction de la longueur des mots et fini par l'utiliser. Le logo avion permet de revenir à la page principale

Barre de recherche : (l68 à 70)
En javascript, j'ai mis en place une barre de recherche avec un bouton (function recherche()). Puisque je ne pouvais pas créer un algorithme capable d'analyser toutes les recherches désirés, l'utilisation de la barre se résume à chercher les noms des continents.

slider : (l71 à 105)
Sur la page d'acceuil j'ai mis un slider qui affiche 5 images à la suite en les faisant coulisser. Pour cela je n'ai utlisé que du css avec La règle @keyframes qui permet de définir exactement les étapes d'une séquence d'animation. Grâce à la propriété "overflow: hidden;", j'ai caché les images qui suivées celle de l'image principale. Puis je les fais glisser vers la gauche de façon à ce qu'elles se retrouvent dans la zone affichée. A la fin du slider, toutes les images sont remises à leur place initiale, le slider ne parait donc pas infini car il s'arrête pour recommencer. Je n'ai pas réussi à régler ce problème.

Les cases des pays : (l06 à 192)
Je me suis inspirée d'un exercice de mathadomicile en essayant de le reproduire à ma facon. J'ai crée une div noir avec une transparence en bas de chaques cases qui remonte dans l'espace visible quand la souris passe sur la case. J'ai agrandi l'image grâce à la fonction "scale()"

Titre des pages (L193 à 204)


Billet (L205 à 274) :
Le css du billets permet surtout de placer les noms au bon endroit. En ce qui concerne le javascript, le programme enregistre les réponses de l'utilisateur et les traite dans la fonction "myFunction2". En fonction du lieu sélectionné, l'ordinateur retourne aléatoirement un pays parmis 4 du continent choisis par l'utilisateur. L'heure dépend du continent aussi. En fonction de son budget, il retourne une classe différente (economy, business ou première). Si le budget est inférieur ou égal à 50, l'ordinateur affiche une alerte avec le message suivant : "Vous n'avez pas assez d'argent pour partir. Prenez donc un vélo " Il retourne aussi son nom et choisi aléatoirement plusieurs nombres et lettre pour les sièges. Puis avec la fonction "myFunction()" l'ordinateur affiche le billet.

Publication : (l275 à 310)
Sur la page d'acceuil j'ai rajouté des articles historiques avec des évènements importants dans l'histoire des pays. Je me suis inspirée du code des cases des pays en changeant le style et les effets notamment en changeant l'opacité. Puis rajouter du texte en dessous.

Rubrique information (311 à 327)


Mes photos (329 à 349)

Bibliographie

https://fr.wikipedia.org
https://www.sncf.com
https://www.tracedirecte.com/34-patrimoine-bouddhiste-au-sri-lanka.htm