Nous arrivons à la dernière affectation de ce cours.
Dans cette quatrième affectation,
vous allez travailler avec les bootstraps, le
support de jQuery et aussi un peu de Sass.
Cette affectation se compose de quatre tâches.
Votre première tâche serait de supprimer tous ces
attributs de données à la fois du lien de connexion ici et de la réserve de tables ici.
Maintenant, dans cette affectation,
nous allons déclencher les modèles en utilisant du code JavaScript.
Donc, pour ce faire,
nous allons d'abord supprimer les attributs de données,
à la fois du modèle de réserve et du modèle de connexion comme première tâche dans cette affectation.
Votre deuxième tâche consiste à ajouter du
code JavaScript approprié en utilisant les méthodes de modèles, les
méthodes JavaScript qui sont disponibles, de
sorte que lorsque le modèle de table de réserve est cliqué,
le modèle de réserve correspondant sera affiché comme vu ici.
Donc, nous voyons que cette affichage et le masquage du modèle
est déclenché complètement en utilisant les méthodes JavaScript de ce modèle.
Votre troisième tâche consisterait à
insérer le code approprié dans le script de sorte que lorsque vous cliquez sur le lien de connexion ici,
le modèle de connexion sera affiché.
Maintenant, pour que cela fonctionne,
vous devez donner des ID appropriés à la fois au bouton de la table de réserve et
au lien de connexion afin qu'ils puissent ensuite être référencés dans votre code JavaScript.
Donc, c'est un indice pour vous,
comment vous pouvez aller de l'avant et procéder à la mise en œuvre de cela.
L' utilisation des méthodes JavaScript devrait être assez simple.
Le lien vers la documentation d'amorçage décrivant
les méthodes JavaScript est disponible dans
la section Ressources supplémentaires de cette affectation.
Comme vous l'avez peut-être déjà réalisé que ces modèles ont maintenant l'air beaucoup plus coloré.
Voici donc le modèle de table de réserve,
et voici le modèle de connexion.
Donc, dans le cadre de la quatrième tâche de cette affectation,
vous allez ajouter du code SCSS dans le fichier SCSS de démarrage de styles, de
sorte que les couleurs sont correctement définies.
Donc, ici, vous voyez que cet en-tête de modèle a
la couleur foncée d'arrière-plan et le texte ici est affiché en couleur blanche.
Et aussi, cette classe particulière en
utilisant une classe imbriquée ici dans votre code SCSS,
vous pouvez définir cela aussi pour utiliser une couleur plate ou blanche ici.
Ensuite, le corps du modèle lui-même utilise la couleur de fond pâle.
Donc, insérez le code SCSS approprié dans votre
fichier SCSS de démarrage de style pour que cela fonctionne pour le modèle de réserve de l'en-tête et le corps, de
sorte que vous pouvez voir que la même couleur sombre d'arrière-plan est appliquée à l'en-tête et que
la couleur pâle d'arrière-plan est appliquée au corps de votre modèle.
Et après avoir terminé cette tâche,
vous pouvez faire un bon commentaire pour enregistrer vos modifications avec l'attribution de message quatre.