Taller de JavaScript

Autor: Eduardo Oviedo Blanco

Para usar este taller efectivamente, clone el código en su ambiente local.

git clone https://github.com/edWAR6/JS-Guess-the-number-Game.git

Si desea subir el taller en su repositorio personal. Cree un repositorio en su perfil, luego:

git remote set-url origin https://github.com/<tu usuario>/JS-Guess-the-number-Game.git

El nombre del repositorio puede cambiar. Siga las instrucciones y guarde sus cambios.

Propósito

EL propósito de este taller es ir paso a paso por la creación de un pequeño programa en JavaScript.

Instrucciones

1. Cree las variables en el archivo JavaScript.

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

2. Agregue una función.

function checkGuess() {
  alert('I am a placeholder');
}

3. Explore las diferentes maneras de ejecutar esa función, ya sea por código o desde la terminal en developer tools.

4. Reemplace la función checkGuess con el siguiente código.

function checkGuess() {
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';

  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }

  guessCount++;
  guessField.value = '';
  guessField.focus();
}

5. Agregue el siguiente código debajo de la función.

guessSubmit.addEventListener('click', checkGuess);

6. Agregue la siguiente función bajo el código anterior para terminar el juego.

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  document.body.append(resetButton);
  resetButton.addEventListener('click', resetGame);
}

7. Finalmente para reiniciar el juego después de terminar, agregue el siguiente código.

function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}

Conclusión

La mejor manera de aprender JavaScript es creando proyectos pequeños como este e ir entendiendo línea por línea. Si este no es su primer lenguaje de programación, le será más fácil aprenderlo.