Bonjour à tous,

je suis en train de suivre le cours JS pour le Web de Fabien Henon et comme ce cours propose des exercices sans correction à chaque chapitre je n'ai plus d'autre choix que vous demander de l'aide ! je suis bloqué au chapitre 3 de la partie 2, je suis débutant en JS mais jusqu'à cet exercice je n'avais pas de réelle difficulté  :

1. Nous souhaitons dans un premier temps valider le champ Code du formulaire. A chaque lettre saisie dans le champ ayant pour ID code nous voulons vérifier que la valeur du champ commence bien par CODE- grâce à une Regex que voici : /^CODE-/. Si la valeur commence bien par CODE- alors nous affichons dans l'élément ayant pour ID code-validation : Code valide, sinon nous affichons dans cet élément Code invalide.

2. Maintenant que nous savons si notre code est valide ou non, nous voudrions griser (grâce à l'attribut disabled) le bouton de soumission (L'input de type submit ayant pour ID submit-btn) quand le code est invalide, et le dégriser quand le code est valide.

   Cela signifie que nous allons devoir ajouter un attribut disabled="true" au bouton de soumission quand le code est invalide. Et supprimer cet attribut disabled quand le code est valide (Rappelez-vous du cours sur la modification du DOM pour définir et supprimer des attributs).

3. Finalement, nous avons un champ Email et nous voudrions le rendre obligatoire et obliger l'utilisateur à entrer une adresse email valide. Il faudra aussi empêcher le formulaire de se soumettre s'il n'est pas valide.

   Mais nous voudrions faire tout ça uniquement avec le HTML5, sans utiliser de code JavaScript.

   Vous pouvez changer le type du champ email plutôt que d'utiliser une Regex via pattern 

eltCode = document.getElementById("code");

eltCodeValidation = document.getElementById("code-validation");

eltCode.addEventListener('onInput', function(e) {
  var value = e.target.value;
  if (value.startsWith("CODE ")) {
    eltCodeValidation.innerHTML = "Code valide";
  } else {
    eltCodeValidation.innerHTML = "Code invalide";
  }
});

function isValid(value) {
    return /^e[0-9]{3,}$/.test(value);
}

J'espère vraiment que quelqu'un pourra m'aider ici car je suis bien perdu.... Merci d'avance

Salut,

j'ai aussi un problème avec ce cours, mais l'exercice d'avant. Le fait qu'il n'y ait pas de correction me laisse sans savoir si je bidouille ou si je fais ce qui est demandé correctement. Du coup je suis bloqué sur le P2C2, étant un gros débutant en programmation.

C'est dommage parce que j'ai trouvé le cours "Apprenez à programmer en JS" vraiment passionant et très bien expliqué; j'ai pas eu de problèmes sur celui-ci mais je suis un peu perdu sur le cours du JS pour le web.

Bonjour,

Pour la première question, si tu as bien compris ce que c'était qu'une regexp (dans le doute : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp), je dois avouer que je suis moi même un peu perplexe sur l'énoncé, surtout qu'il nous indique a la fin l'impossibilité d'utiliser du JS, perso je vois pas comment faire sans, si quelqu'un a une idée...

Sinon, avec du JavaScript, l'exercice nous demande de modifier le texte d'une élement du dom a chaque fois que l'utilisateur tape dans le champs en fonction de la validité de celui-ci.

Il faut donc créer un <p id="code_validation">Code valide</p> et le modifier en fonction du résultat du test (et ce a chaque fois que l'utilisateur tape dans le champ à valider - l'evenement keyup en js est la pour ca)

pour le test en lui meme, je t'invite a mettre la regexp dans un attribut de l'input (https://www.w3schools.com/tags/att_input_pattern.asp) et d'utiliser le booleen patternMismatch (https://developer.mozilla.org/fr/docs/Web/API/ValidityState)

-
Edité par ichiso 16 avril 2020 à 11:29:38

Tudwall a écrit:

Salut,

j'ai aussi un problème avec ce cours, mais l'exercice d'avant. Le fait qu'il n'y ait pas de correction me laisse sans savoir si je bidouille ou si je fais ce qui est demandé correctement. Du coup je suis bloqué sur le P2C2, étant un gros débutant en programmation.

C'est dommage parce que j'ai trouvé le cours "Apprenez à programmer en JS" vraiment passionant et très bien expliqué; j'ai pas eu de problèmes sur celui-ci mais je suis un peu perdu sur le cours du JS pour le web.

Bonjour,

Je bloque aussi sur la dernière partie du P2C2, si tu as trouvé une solution, je suis preneur.

-
Edité par Tudwall 20 avril 2020 à 17:18:48

Pour la partie de l'email qui n'est pas valide, j'avais fait comme toi, c'est à dire l'input je le mets en type="email" et j'ajoute d'un required.

Je pense que c'est bon puisque qu'avec le required l'utilisateur est obligé d'entrer un email et avec le type=email, le format sera nécessairement correct.

En ce qui me concerne je bloque sur l'exercice "sauvegardez des données sur le service web.

Je n'ai pas compris la partie suivante :

"Nous souhaitons aussi, lorsque la requête s'est bien envoyée, afficher le résulat renvoyé par le service web. Pour ce faire, nous allons afficher ce qui se trouve dans postData.text de la réponse dans le contenu HTML de l'élément ayant pour ID result."

Est-ce qu'il faut juste que le textContent du contenant ayant pour id=result affiche postData.text ?

Parce que le postData.text n'est pas reconnu chez moi...

Quelqu'un aurait une suggestion ?

Pour le P2C4 j'ai bien galéré aussi, j'ai cherché pas mal sur internet et je me retrouve avec ça. (obligé de mettre un lien vers mon CodePen vu que c'est impossible de poster avec le bouton code)

Mais ça m'affiche "undefined" dans le result, je sais même pas si le reste de mon code est correct avant le data.text, ça fait ce qui est demandé mais je sais pas si c'est la solution attendue. Vous en pensez quoi ?

Bonjour une façon plus simple et plus récente que XmlHttpRequest pour faire une requête AJAX aujourd"hui et d'utilisé l'API Fetch

pour illustré:

fetch('http://ma-cible/truc', {

    method: 'GET'
} )
.then( response => {

  console.log( response ) ;

} )
.catch( error => {

  console.error( error ) ;

  throw "fetch have fail" ;

} ) ;

si vous attendez du JSON en rèponse vous pouvez utilisé la méthode .json pour le récupéré mais elle retourne elle aussi une Promise

une pratique courant et de async le callback du premier .then et de await la méthode json:

fetch('http://ma-cible/truc', {

    method: 'GET'
} )
.then( async response => {

   const data = await response.json() ;

  console.log( data ) ;

} )
.catch( error => {

  console.error( error ) ;

  throw "fetch have fail" ;

} ) ;

bonne continuation.

Comme toi Tudwall, mon request.text est undefinied.

Mon code :

https://playcode.io/532458

Je sèche...

Je suis en train de tester avec l'API fetch mais même souci, je n'arrive pas à récupérer la réponse. J'ai un "[object Promise]"...

J'ai testé avec le responseText et ça fonctionne par contre le résultat du input est "noyé" dans l'information puisqu'il m'affiche :

{ "startedDateTime": "2020-04-22T08:40:27.300Z", "clientIPAddress": "78.242.173.208", "method": "POST", "url": "http://mockbin.com/request", "httpVersion": "HTTP/1.1", "cookies": {}, "headers": { "host": "mockbin.com", "connection": "close", "x-forwarded-for": "78.242.173.208, 54.209.226.208", "x-forwarded-proto": "http", "x-forwarded-host": "mockbin.com", "x-forwarded-port": "80", "x-real-ip": "78.242.173.208", "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0", "accept": "*/*", "accept-language": "fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3", "accept-encoding": "gzip, deflate, br", "content-type": "application/json", "origin": "https://playcode.io", "referer": "https://playcode.io/532458", "x-request-id": "d35e803b-5cb0-4a06-8d3f-5a9c6cb3c2a0", "via": "1.1 vegur", "connect-time": "0", "x-request-start": "1587544827289", "total-route-time": "0", "content-length": "16" }, "queryString": {}, "postData": { "mimeType": "application/json", "text": "{\"value\":\"test\"}", "params": [] }, "headersSize": 685, "bodySize": 16 }

Est-ce que c'est normal ?

Si oui, n'est-il pas possible de récupérer uniquement la valeur entrée dans le input ?

Si non, ou est-ce que je me suis plantée ?

mon code :

https://playcode.io/532458

Merci pour votre aide.

ichiso a écrit:

tu as l'information contenu dans l'objet que tu as stringifier, parse le en js depuis le json et tu n'as plus qu'a trouver le bon chemin pour accéder a cette valeur...

Je pense avoir trouvé. Grâce à toi je suis arrivée à réduire le paquet du responseText à une value : text du input.

 Bonjour à tous j'ai cherché un pti moment aussi sur quelques points,voici ma solution,bon cours et merci openclassrooms

//recupere le input du code
const input = document.querySelector('#code');

//ecouter le changement de chaque lettre via l'evenement 'input' sur l'input #code
input.addEventListener('input',function(){
  let regEx = /^CODE-/;
  //on va tester la regEx avec .test sur la valeur du champ input code
  let testCode = regEx.test(input.value);
  
  if(testCode){
    //si testCode renvoi true on recupere la div pour afficher le message
    document.querySelector('#code-validation').innerHTML = 'Code valide';
    
    //les deux methodes en commentaire fonctionnent à vous de choisir...
    //on enleve l'attribut au cas ou il aurait ete grise par des erreurs
    document.querySelector('#submit-btn').removeAttribute('disabled','');
   // document.querySelector('#submit-btn').disabled = false;
  }
  else{
    document.querySelector('#code-validation').innerHTML = 'Code invalide';
    
    //on grise le bouton en cas d'erreur en ajoutant disabled par default string vide = true
    document.querySelector('#submit-btn').setAttribute('disabled','');
   // document.querySelector('#submit-btn').disabled = true;
  }
});

//pour l'email il faut changer le type=email qui fait office de regex simplifié,bloque l'envoi tant qu'il n'est pas valide et ajouté required qui oblige a entrer du texte.
//je pense que c'est ça pour l'email je n'ai rien trouvé d'autre

Voici la solution que j'ai trouvée et qui fonctionne parfaitement. Mais comme d'autres personnes, j'ai constaté qu'il y a beaucoup d'éléments manquants et confus dans ce cours.

let id = document.querySelector("#code");
let codeValidation = document.querySelector("#code-validation");
let submit = document.querySelector("#submit-btn");

id.addEventListener ("input", function (e) {
  if (/^CODE-/.test(e.target.value)) {
    codeValidation.textContent = "Code valide";
    submit.disabled = false;
  } else {
    codeValidation.textContent = "Code invalide";
    submit.disabled = true;
  }
});

J'ai trouvé par hasard la fonction element.disabled (qu'on applique à l'input de type submit) en cherchant sur MDN. Beaucoup de lacunes dans ce cours, et maintenant je suis totalement bloqué à l'exercice P2C4. C'est extrêmement frustrant !

Bonjour, 

j'ai bloqué un moment sur l'exercice P2C4, et j'ai fini par trouver : 

j'ai voulu utiliser la syntaxe ES6 pour déclarer les fonctions :   

()=> {bla bla}

au lieu de

function() {bla bla }

eh bien cela ne fonctionne pas avec request.onreadystatechange , faut rédiger à l'ancienne mode. Et la console de code pen n'aide pas ! 

pour autant, la déclaration fléchée ça marche sans souci avec la déclaration de la fonction send

c'est peut être du au fait que cette utilisation d'ajax est dépréciée depuis l'avènement de Fetch() ?

-
Edité par Olivier_Vanre 13 mai 2020 à 15:28:03

Hello, 

j'ai terminé le cours, avec l'activité de compilation du code. ça fonctionne bien, j'ai le lorem ipsum qui s'affiche, et la compilation à la volée se déclenche à chaque modif. Cependant, avec tous ces outils, je trouve que c'est compliqué pour débugger, j'avais mal rédigé l'url de l'api 'bacon'j'essayais de faire des consoles . log pour

savoir où ça bloquait dans les fonctions, mais c'est pas très parlant, peut être aussi dû au fait qu'on fait de l'asynchrone.

En tout cas, je trouve que l'on manipule des concepts plutôt avancés et je trouve ça génial, auparavant les packages et bundes étaient de la science fiction pour moi, merci donc à l'auteur du cours pour toutes ces explications qui nous permettent d'aller à l'essentiel sans se perdre dans les méandres de JS, pour construire une architecture moderne de projet en backend. 

Ce cours est très bien si on a suivi auparavant 'apprenez à programmer avec Javascript'. 

J'aurais une petite suggestion, ce serait bien pour ce type de cours d'avoir accès à une archive avec tous les exercices corrigés, une fois le cours terminé et validé, afin de repasser en revue tout ce que l'on a appris, car on oublie très vite si on ne pratique pas beaucoup ! 

par ailleurs, je pense que la suite du cours pourrait être Node.js, ou bien d'autres frameworks comme vue, angular etc... la conclusion du cours pourrait nous suggérer une suite, et pourquoi pas un projet simple d'application de tout ce que l'on a appris ? 

Peut être que d'autres participants seraient partants pour se lancer en collaboratif à un petit projet de type todo list partagée, avec toutes ces techniques ? 

Olivier

function askWeather(url, callback) {
  var request = new XMLHttpRequest();
  request.open("GET", url);
  request.addEventListener("load", function () {
    callback(request.responseText);
  });
  request.send(null);
}

askWeather("https://www.prevision-meteo.ch/services/json/paris", function (reponse) {
  const button = document.getElementById("ask-weather");
  const result = document.getElementById("weather-result");
  const meteo = JSON.parse(reponse).current_condition.condition;
  button.addEventListener('click', function() {
      result.textContent = meteo;
    })
} )

J'ai fait comme ça pour le P2C2 comme il a demandé dans l'énoncé de faire une fonction askWeather(), j'ai pensé que c'était pour se créer une requête Ajax générique pour aller chercher d'autres infos sur la météo par la suite.

-
Edité par Neohmax 24 juin 2020 à 16:26:52

Bonjour tout le monde,

J'ai réussi les exercices de ce cours assez difficilement, par contre je n'arrive pas à poster mes codes pour vous les faire partager, j'ai toujours un message d'erreur affiché en anglais....

Si vous souhaitez avoir de l'aide n’hésitez pas à me mp je vous aiderais avec plaisir.

Salut,

Tu peux toujours poster le lien codepen, c'est ce que certain (dont moi) ont fait en tombant sur le bug qui empêche de poster avec les balises de code.

LudovicCheber a écrit:

Voici la solution que j'ai trouvée et qui fonctionne parfaitement. Mais comme d'autres personnes, j'ai constaté qu'il y a beaucoup d'éléments manquants et confus dans ce cours.

let id = document.querySelector("#code");
let codeValidation = document.querySelector("#code-validation");
let submit = document.querySelector("#submit-btn");

id.addEventListener ("input", function (e) {
  if (/^CODE-/.test(e.target.value)) {
    codeValidation.textContent = "Code valide";
    submit.disabled = false;
  } else {
    codeValidation.textContent = "Code invalide";
    submit.disabled = true;
  }
});

J'ai trouvé par hasard la fonction element.disabled (qu'on applique à l'input de type submit) en cherchant sur MDN. Beaucoup de lacunes dans ce cours, et maintenant je suis totalement bloqué à l'exercice P2C4. C'est extrêmement frustrant !

-
Edité par Guygouz 10 septembre 2020 à 12:27:46

Bonjour à tous,

je pense qu'on faut mémoirse bcq. je ai mal compris l'exercice P2C3. s'il y a un quelqu'un qui sait des autres exercices comme ça. Il faut que je pratique bcq!