AurelieBayre/get-info-and-display-them-with-a-promise.html

## get-info-and-display-them-with-a-promise.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <form id="information">
      <input id="inputName" name="userName">
      <input id="inputGame" name="userGame">
    </form>
  <button type="button" id="clickButton">Cliquer pour afficher</button>
    <div id='output'></div>

    <script>
        //document represente le document affiché par le navigateur
        const myButton = document.getElementById("clickButton")
        const output = document.getElementById("output")

        //mes fonctions:
        const getInfo = () => {
          //getInfo est une promesse
            return new Promise ((resolve, reject) => {
              const name = document.getElementById("inputName").value
              const game = document.getElementById("inputGame").value
              //resolve indique ce qui se passe si la promesse est résolue:
              //on obtient un objet.
              //cette objet sera ensuite transmis à la fonction enchainée
              resolve( {firstName: name,
                   preferredGame: game
                  });  // fulfilled successfully
            })
          }
          //fonction d'affichage: cette fonction prend un objet en paramètre
          //quand elle est appelée, la fonction exploite l'objet
          const display = (data) => {
            output.innerHTML = `Hello ${data.firstName} your favorite game is  ${data.preferredGame}`
          }

          //Mes événements:

          const readyToClick = () => {
          myButton.addEventListener("click", () => {
            console.log("j'ai cliqué, je vais tenter de tenir ma promesse...")
            //Donc là, jappelle getInfo
            //qui retourne une promesse
            //qui donne un objet
            //qui est transmis par le .then à la fonction enchaînée
            //qui se trouve être la fonction display
            //qui va donc exploiter l'objet donné par la promesse
            getInfo().then((obj) => {
              console.log("youpi j'ai tenu ma promesse, donc je suis passée à la suite")
              display(obj)
            })
          })
        }

        window.onload = readyToClick
        //or: window.addEventListener("load", readyToClick)
        // j'écoute l'événement load sur l'objet window

        //or window.addEventListener("click", () => {
        //   function display() {
        //       output.innerHTML = `Hello ${wilder.firstName} your favorite game is  ${wilder.preferredGame}`
        //   }

        //   const myButton = document.getElementById("clickButton")
        //   myButton.addEventListener("click", display)
        // })
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>
	<form id="information">
	<input id="inputName" name="userName">
	<input id="inputGame" name="userGame">
	</form>
	<button type="button" id="clickButton">Cliquer pour afficher</button>
	<div id='output'></div>

	<script>
	//document represente le document affiché par le navigateur
	const myButton = document.getElementById("clickButton")
	const output = document.getElementById("output")

	//mes fonctions:
	const getInfo = () => {
	//getInfo est une promesse
	return new Promise ((resolve, reject) => {
	const name = document.getElementById("inputName").value
	const game = document.getElementById("inputGame").value
	//resolve indique ce qui se passe si la promesse est résolue:
	//on obtient un objet.
	//cette objet sera ensuite transmis à la fonction enchainée
	resolve( {firstName: name,
	preferredGame: game
	}); // fulfilled successfully
	})
	}
	//fonction d'affichage: cette fonction prend un objet en paramètre
	//quand elle est appelée, la fonction exploite l'objet
	const display = (data) => {
	output.innerHTML = `Hello ${data.firstName} your favorite game is ${data.preferredGame}`
	}

	//Mes événements:

	const readyToClick = () => {
	myButton.addEventListener("click", () => {
	console.log("j'ai cliqué, je vais tenter de tenir ma promesse...")
	//Donc là, jappelle getInfo
	//qui retourne une promesse
	//qui donne un objet
	//qui est transmis par le .then à la fonction enchaînée
	//qui se trouve être la fonction display
	//qui va donc exploiter l'objet donné par la promesse
	getInfo().then((obj) => {
	console.log("youpi j'ai tenu ma promesse, donc je suis passée à la suite")
	display(obj)
	})
	})
	}

	window.onload = readyToClick
	//or: window.addEventListener("load", readyToClick)
	// j'écoute l'événement load sur l'objet window

	//or window.addEventListener("click", () => {
	// function display() {
	// output.innerHTML = `Hello ${wilder.firstName} your favorite game is ${wilder.preferredGame}`
	// }

	// const myButton = document.getElementById("clickButton")
	// myButton.addEventListener("click", display)
	// })
	</script>
	</body>
	</html>