abbassihraf / covid-test Goto Github PK

• Qu'est ce que c'est que DOM: Le modèle d'objet document
• Cibler des éléments dans le DOM avec des méthodes querySelector
• Accéder et modifier les éléments
• Accéder et changer les classes
• Accéder et changer les attributs
• Ajouter des éléments DOM
• Appliquer du Style en ligne à un élément

Usefull Links:

• https://developer.mozilla.org/fr/docs/Web/API/Element
• https://guide.freecodecamp.org/javascript/html-dom/
• https://medium.com/free-code-camp/dom-manipulation-in-vanilla-js-2036a568dcd9
• https://eloquentjavascript.net/14_dom.html

Project : What you Should do :

Dans ce Projet To do list vous allez être affronté à plusieurs concepts concernant DOM :

[Project Link] : https://github.com/youssefbm/C3_Training_DOM_Montre-Analogue
@ BonCourage

💯💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯

Préparer le terrain pour un flux de travail Organizer, un code réutilisable et des tâches automatisées

• git clone /lien Repository/ ou Fork

• npm install /packages/

• Watching concatenation Préfixage avec NPM Scripts

• Compression du CSS et Javascript avec NPM Scripts

• Convertissez le design graphique de la page Conseil en un code HTML CSS compressé et Compatible avec tous les navigateur en utilisant NPM, SASS.

• Analysez bien le Design

• Intégrez votre code html en respectant la structure que vous venez d’imaginer

• Pensez bien à votre stratégie de découpage.

• Nommez vos blocs de façon sémantique en utilisant le concept BEM

• Incluez un reset css dans le header de votre page html.

• Intégration section Informations

• Intégration section Symptômes

• Intégration Recommandations officielles

• Intégration section Hero Footer contenant la section Test et le footer

Notez Bien :

Cette peut être élaborer qu'avec du Flexbox et même sans média queries.
💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯

hébergement : Finalisation

A la fin du projet vous êtes amenés à héberger votre travail dans un Free HOST comme :

• GitHub Pages
• Netlify

La Team @imanegannaoui @youssefbm @YoussefCHOUNI @HananeJab @tijaniabdellatif

Vous Souhaite Bon Courage 👍

• Convertissez le design graphique de la page d'accueil en un code HTML CSS compressé et Compatible avec tous les navigateur en utilisant NPM, SASS.

• Analysez bien le Design

• Intégrez votre code html en respectant la structure que vous venez d’imaginer

• Pensez bien à votre stratégie de découpage.

• Nommez vos blocs de façon sémantique en utilisant le concept BEM

• Incluez un reset css dans le header de votre page html.

• Intégration section Hero Header contenant Menu , Warning Info, Illustration et son texte et Boutton Test

• Intégration section Symptômes

• Intégration Recommandations officielles

• Intégration section Hero Footer contenant la section Test et le footer

Notez Bien :

Cette page peut être élaborer qu'avec du Flexbox et même sans média queries.
💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯

Implémentation de l'algorithme :

• Intégration du Quiz ou stepper,
• Récolte des réponses dans un Objet ou Array.
• Implémentation de la fonction qui va recevoir un objet ou un array pour retourner la réponse

Exemple : function(Obj) ou function(array) return String .

• L'algorithme est sur le dossier suivant : /algorithme

@ BonCourage

💯💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯

Events Documentation : What you Should Know

DOM Events

• Multiple Dom Events Click , submit etc ...
• Trigger Function with Dom Events
• Add and use EventListner
• Pass argument via EventListner

Usefull Links:

• https://javascript.info/introduction-browser-events
• https://medium.com/@nerdjfpb/dom-event-introduction-javascript-series-part-27-4f0a20baed43
• https://eloquentjavascript.net/15_event.html

Project : What you Should do :

Dans ce Projet To do list vous allez être affronté à plusieurs concepts concernant Events et handling Events :

• [Project Link] : https://github.com/tijaniabdellatif/todolist

@ BonCourage

💯💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯