Je suis débutante en JS et je voudrais un coup de main sur la dernière activité du cours sur JavaScript.
Voici l'énoncé:
Aidez à créer une application de suivi de livres pour les lecteurs !
Suite à votre travail sur le site de streaming, on vous demande de créer une app appelée RestfulReading, qui permettra aux utilisateurs de suivre les livres qu'ils sont en train de lire/qu'ils ont lus.
Votre tâche est de créer la classe Book (Livre) et de peupler la base de données de développement de trois ou quatre livres pour vous assurer que l'interface fonctionne correctement (vous travaillerez avec le fichier Book.js ).
La classe Book doit contenir les champs suivants :
title - string - le titre du livre
author - string - l'auteur du livre
description - string - une description du livre
pages - number - le nombre total de pages
currentPage - number - la page où se trouve l'utilisateur actuellement (entre 1 et pages )
read - boolean - si l'utilisateur a lu ou non le livre (par défaut: false )
La classe Book doit aussi contenir la méthode instance suivante :
readBook(page)
permet à l'utilisateur de dire à quelle page il se trouve actuellement
si l'argument page est inférieur à un ou supérieur au nombre total de pages du livre, readBook retourne 0
si l'argument page est supérieur ou égal à 1 et inférieur au nombre total de pages du livre, readBook modifie le champ currentPage de l'instance pour être égal à la valeur de l'argument passé, et retourne 1
si l'argument page est égal au nombre total de pages du livre, readBook modifie le champ currentPage de l'instance pour être égal à la valeur de l'argument passé, modifie le champ read de l'instance en true , et retourne 1
Quand vous aurez créé la classe Book , vous en créerez au moins trois instances valables et vous les mettrez dans le tableau books qui est exporté par Book.js . Pour vérifier votre travail, actualisez le navigateur Codevolve intégré : vos instances Book devraient être visibles dans le carousel de l'interface RestfulReading.
Pour tester votre méthode instance readBook , suivez ces instructions pour trois livres (sans rafraîchir la page) :
mettez à jour la page actuelle avec une page valable qui est inférieure au nombre total de pages
mettez à jour la page actuelle avec exactement le nombre de pages total du livre (le livre devrait disparaître du carousel et apparaître dans la liste "Lus")
Quand vous aurez accompli ces tâches, votre navigateur devrait afficher une alerte qui contient un mot. Ce mot est la réponse à la seule question dans ce quiz !
Voici ce que j'ai fait:
Book.js
export class Book {
constructor (title, author, description, pages) {
this.title = title;
this.author = author;
this.pages = pages;
this.description = description;
this.currentPage = 1;
this.read = false;
}
readBook (page) {
if (page < 1 || page > this.pages) {
return(0);
}
else if (page >= 1 && page < this.pages)
this.currentPages = page;
}
else (page == this.pages) {
this.currentPages = page;
this.read = true;
}
};
const book1 = new Book ( "Fantasia", "James Algar", 160, "Une suite de huit dessins animés illustrant de grands morceaux de musique classique.");
const book2 = new Book ( "Blanche-Neige ", "David Hand", 90, "Blanche Neige est une princesse d'une très grande beauté, ce qui rend jalouse sa belle-mère.");
const book3 = new Book ( "Pinocchio", "Hamilton Luske", 110, "Geppetto, un pauvre menuisier italien, fabrique dans un morceau de bois à brûler un pantin qui pleure.");
const books = [book1, book2, book3];
export const books = [];
Pouvez-vous m'aider, car je ne sais pas ce qui ne fonctionne pas :-(
Salut, j'ai mis ton code sur Vs Code (mon IDE) et j'ai tous suite obtenu des erreurs, enfaîte, il manque des } ("Curly Brackets" selon google) et tu mets une condition dans ton else, ce qui n'est pas possible.
De plus tu export deux fois ta class "Books".
Je te laisse corrigé tes buges, c'est comme ça quand apprend le mieux.
Toujours chercher par soi même avant de poser une question (selon moi)
j'ai corriger mon code, et j'avais plusieurs erreur
J'avais envoyé les paramètre page et description dans le mauvais ordre ^^erreur de débutant
Je te remercie !
Voici mon nouveaux code:
export class Book {
constructor(title, author, description, pages) {
this.title = title;
this.author = author;
this.pages = pages;
this.description = description;
this.currentPage = 1;
this.read = false;
}
readBook(page) {
if (page < 1 || page > this.pages) {
return 0;
}
else if (page >= 1 && page < this.pages && page == this.pages){
this. currentPage = page; }
else {
this.currentPage = page;
this.read = true;
}
}
};
const book1 = new Book("Fantasia", "James Algar", "Une suite de huit dessins animés illustrant de grands morceaux de musique classique.", 160,);
const book2 = new Book("Blanche-Neige ", "David Hand", "Blanche Neige est une princesse d'une très grande beauté, ce qui rend jalouse sa belle-mère.", 90);
const book3 = new Book("Pinocchio", "Hamilton Luske", "Geppetto, un pauvre menuisier italien, fabrique dans un morceau de bois à brûler un pantin qui pleure.", 110,);
export const books = [book1, book2, book3];
Pour tester votre méthode instance readBook , suivez ces instructions pour trois livres (sans rafraîchir la page) :
1. mettez à jour la page actuelle avec une page valable qui est inférieure au nombre total de pages
1.Me renvoie le livre lu entièrement :-( il y'a donc une erreur dans mon code !
2. mettez à jour la page actuelle avec exactement le nombre de pages total du livre (le livre devrait disparaître du carousel et apparaître dans la liste "Lus")
2. Cela marche ici.
3. Quand vous aurez accompli ces tâches, votre navigateur devrait afficher une alerte qui contient un mot. Ce mot est la réponse à la seule question dans ce quiz !
3. Du coup ici rien ne ce passe :-(
- Edité par ElodieWebdesign 10 janvier 2020 à 9:52:39
Je vois que le sujet a été marqué comme résolu alors que l'auteur ne semble pas avoir trouvé de solution à son problème.
Je me permet donc de le relancer étant donné que j'ai été dans la même situation jusqu'à essayer les deux manipulations demandées sur tous les livres du tableau (3 en l'occurrence dans mon cas).
Ce n'a qu'à ce moment là que le message d'alerte s'est affiché avec le mot clef .
mettez à jour la page actuelle avec une page valable qui est inférieure au nombre total de pages
mettez à jour la page actuelle avec exactement le nombre de pages total du livre (le livre devrait disparaître du carousel et apparaître dans la liste "Lus")
export class Book{
constructor (title, author, description, pages, currentPage, read) {
this.title = title;
this.author = author;
this.description = description;
this.pages = pages;
this.currentPage = currentPage;
this.read = false;
}
readBook (page) {
if ( (page < 1) || (page > this.pages)) {
return 0;
}
else if ( (page >= 1) && ( page < this.pages )) {
this.currentPage = page;
return 1;
}
else if ( page === this.pages) {
this.currentPage = page;
this.read = true;
return 1;
}
}
};
const livre1 = new Book ( "Le journal d'Anne Frank",
"Anne Frank",
"La jeune fille a tenu son journal du 12 juin 1942 au 1er Août 1944",
325, 0);
const livre2 = new Book ( "Le club des 5 au cap des tempètes",
"Enid Blyton",
"Un bel été pour les 5",
186, 0);
const livre3 = new Book ( "Le club des 5 au bord de la mer",
"Enid Blyton",
"Ferme isolée sur une falaise bretonne",
188, 0);
export const books = [livre1, livre2, livre3];
J'ai donc corrigé les points virgules dans les if /else, et aussi modifié le this.read.
Merci beaucoup pour tes conseils, ça s'affiche enfin dans le navigateur....
Et en relisant ton commentaire à la personne précedente, j'ai compris que le test devait se faire sur chacun des trois livres et non pas tester les deux fonctionnalités chacune sur un livre (je ne sais pas si je suis claire?!)
Suis bien les consignes pour chaque livre (2 actions à faire par livre, une fois les 2 actions on passe automatiquement au livre suivant après le troisième livre, il y a l'alerte) :
mettez à jour la page actuelle avec une page valable qui est inférieure au nombre total de pages
mettez à jour la page actuelle avec exactement le nombre de pages total du livre (le livre devrait disparaître du carousel et apparaître dans la liste "Lus")
Si vous n'avez pas effectué les manipulations "npm install" et "npm start", c'est normal que ça ne marche pas.
Après avoir installé Node, il faut aller sur son éditeur de code (pour ma part : Visual Studio Code), ouvrir le dossier ou sont tout les fichier téléchargés du projet, lancer un terminal via le menu terminal et lancer un nouveau terminal.
Il faut ensuite écrire "npm install" dans ce terminal, pour installer le composant que l'on a besoin pour afficher le code sur le navigateur, et une fois l'installation fini, écrire "npm start", qui devrait lancer une fenêtre du navigateur avec l'adresse suivante : localhost:8081 OU 127.0.0.1:8081
Si je copie/ colle son code rien ne s'affiche dans le carroussel.
Je modifie la valeur de currentPage dans les 3 objets pour faire 1 cas avec un nombre de page valable qui est inférieure au nombre total de pages.
Et 1 cas avec exactement le nombre de pages total du livre.
Rien n'y fait, je n'ai RIEN sur la page HTML , ni les données des livres, ni le message pop up.
Franchement OpenCLassRoom faite un truc avec ce cours c'est pas normal tous les sujets ouverts a propos de ce cours.Et aucune solution fiable et éclairée ...
EDIT :
En utilisant le déboguer je découvre que mon code est tout à fait fonctionnel mais que le blocage se fait car le fichier source Kook.js contient une ligne de code parasite à la fin !
//let range = Range.create(Position.create(0, 0), Position.create(document.lineout, 0));
J'ai laissé en pensant que c'était une ligne de l'auteur pour faire marcher le code avec le reste du site....
Au moins on utilise ce qui est appris dans le cours à savoir ouvrir la console développeur, mais honnêtement ça ressemble juste à une erreur à l'installation faite par le npm install .
Si je copie/ colle son code rien ne s'affiche dans le carroussel.
Je modifie la valeur de currentPage dans les 3 objets pour faire 1 cas avec un nombre de page valable qui est inférieure au nombre total de pages.
Et 1 cas avec exactement le nombre de pages total du livre.
Rien n'y fait, je n'ai RIEN sur la page HTML , ni les données des livres, ni le message pop up.
Franchement OpenCLassRoom faite un truc avec ce cours c'est pas normal tous les sujets ouverts a propos de ce cours.Et aucune solution fiable et éclairée ...
- Edité par KARL_K il y a moins de 30s
Salut Karl, j'y ai passé 48h puis cela a fonctionné, relis bien ton code et si tu veux partage ton code pour que l'on puisse t'aiguiller à notre tour !
Hello, je ne parviens pas a installer npm, voici le message obtenu quand je tape : 'npm install' dans le terminal :
npm WARN saveError ENOENT: no such file or directory, open '/Users/n******/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/n******/package.json'
npm WARN saveError ENOENT: no such file or directory, open '/Users/n******/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/n******/package.json'
npm WARN n****** No description
npm WARN n****** No repository field.
npm WARN n****** No README data
npm WARN n****** No license field.
up to date in 3.263s
found 0 vulnerabilities
Merci d'avance pour votre aide précieuse.
Thibault_F a écrit:
Bonjour,
Si vous n'avez pas effectué les manipulations "npm install" et "npm start", c'est normal que ça ne marche pas.
Après avoir installé Node, il faut aller sur son éditeur de code (pour ma part : Visual Studio Code), ouvrir le dossier ou sont tout les fichier téléchargés du projet, lancer un terminal via le menu terminal et lancer un nouveau terminal.
Il faut ensuite écrire "npm install" dans ce terminal, pour installer le composant que l'on a besoin pour afficher le code sur le navigateur, et une fois l'installation fini, écrire "npm start", qui devrait lancer une fenêtre du navigateur avec l'adresse suivante : localhost:8081 OU 127.0.0.1:8081
J'ai mis du temps à comprendre comment résoudre cet exo, mon code était correct mais j'interprétais mal les consignes.
Les instructions :
mettez à jour la page actuelle avec une page valable qui est inférieure au nombre total de pages
mettez à jour la page actuelle avec exactement le nombre de pages total du livre (le livre devrait disparaître du carousel et apparaître dans la liste "Lus")
doivent être réalisées dans la page web affichée. Moi je le faisais au sein de mon code et le mettais à jour à chaque fois ....
J'ai terminé l'exercice et ai bien reçu le message avec le mot clef à trouver pour finaliser l'exercice.
Cela dit, perfectionnisme oblige, mon carrousel ne bouge pas ; je ne peux pas naviguer d'un livre à l'autre en cliquant sur les flèches. Avez-vous le même souci ou bien ai-je fait quelque chose qu'il ne fallait pas ?
Merci d'avance !
Edit 1 : j'ai trouvé la réponse à me propre question, c'est bon . C'est parce que l'auteur avait inséré les mots-clefs à l'intérieur du code (sûrement afin de brouiller les pistes pour les petits malins, lol), ce qui empêchait certaines fonctionnalités (comme le slider par exemple) de fonctionner correctement.
Edit 2 : ne PAS faire ce que je viens de faire pour débloquer le carrousel si vous n'avez pas encore résolu l'énigme, sans quoi le mot affiché sera "undefined".
- Edité par YaliMK 30 avril 2020 à 18:12:29
Qu'il est triste et simpliste de penser qu'entre le blanc et le noir, seul subsiste le gris...
J'espère que la fin de votre confinement se passe pour le mieux, de mon côté j'en profite pour apprendre le Javascript !
J'ai un problème avec cet exo, je vous explique:
Sur le site Restful Reading, je n'ai que le premier livre qui s'affiche, à savoir: Rayuela de Julio Cortazar (voir image ci après):
Le problème est que je n'arrive pas à naviguer entre les livres en utilisant les flèches. Je ne vois donc pas le livre O jerusalem et O alquimista.
Voici mon code:
export class Book {
constructor(title, author, description, pages, currentPage) {
this.title = title;
this.author = author;
this.description = description;
this.pages = pages;
this.currentPage = currentPage;
this.read = false;
}
readBook(page) {
console.log("Vous êtes à la page : " + currentPage);
if (page < 1 || page > this.pages) {
return 0;
} else if (page >= 1 && page < this.pages) {
this.currentPage = page;
return 1;
} else {
this.currentPage = page;
this.read = true;
return 1;
}
}
}
let book1 = new Book("Rayuela", "Julio Cortazar", "Récits d'Oliveira", 600, 300);
let book2 = new Book("O Jérusalem", "Edouard Lapierre", "Création de l'état d'Israel", 650, 200);
let book3 = new Book("O alquimista", "Paulo Coelho", "Voyage d'un jeune homme", 200, 200);
export const books = [book1, book2, book3];
Autre problème, dès que je rajoute du code pour tester ma fonction readBook, plus rien ne s'affiche sur mon site :
book1.readBook(200);
book2.readBook(650);
Je vous serais infiniment reconnaissant si vous pouviez m'apporter une piste !
Merci
Bonjour ! Bon je suis aussi sur cet exercice donc j'en profite pour demander de l'aide. Au fait moi j'arrive même pas du tout à afficher quelque chose sur la page "RestfulReading" je sais pas pourquoi ?
Voici mon code :
export class Book {
constructor(title, author, description, pages, currentPage, read) {
this.title = title;
this.author = author;
this.description = description;
this.pages = pages;
this.currentPage = currentPage;
this.read = read;
}
readBook(page) {
if (page < 1 || page > this.pages) {
alert(" le numero de page est invalide");
return 0;
} else if (page >= 1 && page < this.pages) {
this.currentPage = page;
return 1;
} else if (page === this.pages) {
this.currentPage = page;
this.read = true;
return 1;
}
}
};
let firstBook = new Book(
'Algorithm Desing',
'Steven S. Skiena',
'This book is intended as a manual on algorithm design, providing access to combinatorial algorithm technology for both students and computer professionals.',
709,
4,
true);
let secondBook = new Book(
'Data Scientist et langage R',
'Henri LAUDE',
'La dynamique de l\'ouvrage soutient le lecteur pas à pas dans sa découverte des data sciences et l\'évolution de ses compétences théoriques et pratiques.',
663,
54,
false);
let thirdBook = new Book(
'Apprendre à programmer',
'Christophe Dabancourt',
'Destiné à tous ceux qui débutent en programmation, cet ouvrage très pédagogique leur apprendra comment concevoir et écrire un programme de manière claire et efficace, quel que soit le langage employé.',
296,
250,
true);
let fourthBook = new Book(
'Algorithmique',
'Sébastien ROHAUT',
'Ce livre s\'adresse à toute personne désireuse de maîtriser les bases essentielles de la programmation. Pour apprendre à programmer,il faut d\'abord comprendre ce qu\'est vraiment un ordinateur, comment il fonctionne et surtout comment il peut faire fonctionner des programmes, comment il manipule et stocke les données et les instructions, quelle est sa logique.Alors, au fur et à mesure, le reste devient évidence: variables, tests, conditions, boucles, tableaux, fonctions, fichiers, jusqu\'aux notions avancées comme les pointeurs et les objets.',
375,
1,
false);
export const books = [firstBook, secondBook, thirdBook, fourthBook];
Bonjour @Maruti1995 ! Je pense que tu as un problème au niveau des arguments que tu as passé dans le 'constructor' il n'y a pas de 'read' dans le paramètre tant dis que tu l'appelle juste en bas au niveau de 'this.read' et je pense qu'il devrait figurer dans les livres aussi juste après le nombre de pages et le numéro de la page actuelle. Essaie de régler ça pour voir si ça pourra marcher suis juste débutant et j'espère que ça marchera pour toi !
Merci beaucoup pour ta réponse. Je ne crois pas qu'il y ait besoin de passer read en paramètre. Il me semble que dans le cours il a déjà crée un constructeur sans passer en paramètre une variable qui était pourtant initialisé. De toute façon, j'ai comme même essayé de passer read en paramètre pour voir ce qui se passait mais malheureusement cela ne change rien...
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Toujours chercher par soi même avant de poser une question (selon moi)
Qu'il est triste et simpliste de penser qu'entre le blanc et le noir, seul subsiste le gris...