phase 1

les-3/guessing-game v2/main.js

@@ -0,0 +1,81 @@
+// Fase 1
+// 1 generate random number between 0 10
+// 2 insert random number in #solution
+// 3 hide #solution (el.hidden)
+// 4 on #guess-submit click
+//   > get value from #guess-input (guess)
+//   > make new p tag with textContent === guess
+// 5 check guess
+//   > if correct > #message.textContent = 'You won'
+//      > show #solution
+//   > if not correct > #message.textcontent = 'Try again'
+// Fase 2
+// 6 if player won
+//   > #guess-submit.textContent = 'Restart'
+// 7 on #guess-submit
+//   > reset game
+//      > empty #guess-container
+//      > new solution
+//      > #guess-submit.textContent = 'Guess'
+// 8 invalid input
+//    > #message.textContent = 'Insert valid number'
+//    > do not add new p
+// 9 max 5 guesses
+//10 keep guess count in #guess-count
+
+const $solution = document.getElementById('solution');
+const $guessContainer = document.getElementById('guess-container');
+const $guessInput = document.getElementById('guess-input');
+const $guessSubmit = document.getElementById('guess-submit');
+const $message = document.getElementById('message');
+const $guessCount = document.getElementById('guess-count');
+
+// 1 generate random number between 0 10
+const genRanNumber = function (maxNum) {
+    return Math.floor(math.random()) * (maxNum + 1);
+};
+// 2 insert random number in #solution
+function solution(solution) {
+    $solution.textContent = solution;
+}
+// 3 hide #solution
+function hideSolution() {
+    $solution.hidden.add('hidden');
+}
+// 3 remove hidden from $solution that was added in hidesolution
+function showSolution() {
+    $solution.hidden.remove('hidden');
+}
+// 4 on #guess-submit click
+//   > get value from #guess-input (guess)
+//   > make new p tag with textContent === guess
+
+// here u get the input value that players gives in
+function guessInput() {
+    return $guessInput.value;
+}
+
+// here u change html syntax before last parent child to make a p tag with id guess with in it the guess number
+function printGuess(guess) {
+    $guessContainer.insertAdjacentHTML(
+        'beforeend',
+        '<p id="guess">' + guess + '</p>',
+    );
+}
+// 5 check guess
+//   > if correct > #message.textContent = 'You won'
+//      > show #solution
+//   > if not correct > #message.textcontent = 'Try again'
+
+function message(message) {
+    $message.textContent = message;
+}
+
+function checkGuess() {
+    if (guessInput == solution) {
+        message('You won');
+    } else {
+        message('Try again');
+    }
+}
+$guessSubmit.addEventListener('click', checkGuess);