(documentation in English below)

#FRANÇAIS

Ce site est un site fan de Doja Cat, artiste américaine, avec des informations sur sa carrière, des extraits de musique, un guide pour les fans et un formulaire d'inscription à une newsletter. Il utilise HTML, CSS et JavaScript.

INSTRUCTIONS :

• Créez un dossier avec un nom de votre choix.
• Créez 4 sous-dossiers nommés exactement : html, javascript, media et styles.
• Glissez tous les fichiers .html dans le dossier "html".
• Glissez tous les fichiers .js dans le dossier "javascript".
• Glissez tous les fichiers .mp3 et .mp4 dans le dossier "media".
• Glissez tous les fichiers .css dans le dossier "styles". Désolé, je n'ai pas trouvé comment inclure directement les dossiers dans le projet et je ne sais pas si c'est possible.

EXPLICATIONS:

HTML:

• Le fichier "index.html" est la page d'accueil du site web, il contient le code HTML pour afficher le contenu de la page d'accueil, comme l'entête, le menu de navigation, le contenu principal et le pied de page.

• Le fichier "guide.html" présente des informations sur les événements marquants de la carrière de Doja Cat, comme sa participation à la cérémonie des Grammy Awards ou les polémiques liées à ses déclarations sur le Covid-19. Il utilise également du JavaScript pour afficher des informations supplémentaires dans des fenêtres modales en cliquant sur des boutons. Il est lié à d'autres pages du site, comme celles consacrées aux albums de l'artiste et à la newsletter. Il utilise également un fichier de style CSS pour la mise en forme.

• Le fichier "canva" contient un code JavaScript qui permet de dessiner un logo sur un canvas HTML. Il utilise des méthodes telles que "arc" et "rect" pour dessiner des formes géométriques, et "fillText" pour ajouter du texte. Le fichier utilise également une feuille de style CSS pour styliser les éléments du canvas. Il est lié à une page HTML qui inclut un élément canvas vide qui sera rempli en utilisant le code JavaScript.

• Le fichier "albums.html" présente les statistiques des albums de Doja Cat depuis la sortie de son premier album "Amala" en 2018, avec des informations sur la date de sortie, les certifications obtenues et les écoutes. Il utilise des tableaux pour organiser les informations et inclut des liens vers les pages des albums sur les plateformes de streaming musical. Il permet de naviguer facilement entre les différentes pages du site via un menu de navigation en haut de la page.

• Le fichier "newsletter.html" contient le code HTML pour la page de newsletter, il contient les informations sur l'inscription à la newsletter de Doja Cat.

JAVASCRIPT:

• Le fichier "articles" contient les fonctions javascript qui permettent d'afficher et de masquer les articles en utilisant des modals lorsque les boutons sont cliqués. (lié au fichier guide.html)

• Le fichier "canvas" contient une fonction "draw" qui dessine des formes géométriques (2 cercles, 1 carré) et un texte sur un canvas HTML. Les couleurs et les dimensions sont définies par des variables. Cette fonction peut être appelée pour dessiner sur le canvas lorsque la page "canva.html" est chargée.

• Le fichier "clock" contient les fonctions javascript qui permettent d'afficher l'heure actuelle sur le site web.

• Le fichier "form" contient les fonctions javascript qui permettent de valider et d'envoyer les données du formulaire de contact.

#ENGLISH

This site is a fan site of Doja Cat, American artist, with information about her career, music samples, a fan guide and a newsletter subscription form. It uses HTML, CSS and JavaScript.

INSTRUCTIONS:

• Create a folder with a name of your choice.
• Create 4 subfolders named exactly: html, javascript, media and styles.
• Drag all .html files into the "html" folder.
• Drag all .js files into the "javascript" folder.
• Drag all .mp3 and .mp4 files into the "media" folder.
• Drag all .css files into the "styles" folder. Sorry, I couldn't figure out how to directly include the folders in the project and I don't know if it's possible.

EXPLANATIONS:

HTML:

• The "index.html" file is the home page of the website, it contains the HTML code to display the content of the home page, such as the header, navigation menu, main content and footer.

• The "guide.html" file presents information about Doja Cat's career milestones, such as her participation in the Grammy Awards ceremony or the controversies related to her statements about Covid-19. It also uses JavaScript to display additional information in modal windows by clicking buttons. It is linked to other pages on the site, such as those devoted to the artist's albums and newsletter. It also uses a CSS style file for formatting.

• The "canva" file contains a JavaScript code that allows to draw a logo on an HTML canvas. It uses methods such as "arc" and "rect" to draw geometric shapes, and "fillText" to add text. The file also uses a CSS style sheet to style the canvas elements. It is linked to an HTML page that includes an empty canvas element that will be filled in using the JavaScript code.

• The "albums.html" file presents Doja Cat's album statistics since the release of her first album "Amala" in 2018, with information about the release date, certifications obtained and listenings. It uses charts to organize the information and includes links to the albums' pages on music streaming platforms. It allows easy navigation between the different pages of the site via a navigation menu at the top of the page.

• The "newsletter.html" file contains the HTML code for the newsletter page, it contains information about signing up for the Doja Cat newsletter.

JAVASCRIPT:

• The "articles" file contains the javascript functions to show and hide articles using modals when buttons are clicked. (linked to the guide.html file)

• The "canvas" file contains a "draw" function that draws geometrical shapes (2 circles, 1 square) and a text on an HTML canvas. The colors and dimensions are defined by variables. This function can be called to draw on the canvas when the page "canva.html" is loaded.

• The file "clock" contains the javascript functions that allow to display the current time on the website.

• The file "form" contains the javascript functions that allow to validate and send the data of the contact form.