cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="game-wrapper">
  <header class="game-header">
    <h1>Guess a number</h1>
    <p>Guess a number between 1 and 100 in 10 turn or less.</p>
  </header>
  <!-- /.game-header -->
  <div class="game-body">
    <p id="warning"></p>
    <form id="game" action="">
      <label for="guess">Enter a guess:</label>
      <input type="text" id="guess" name="guess" />
      <input type="submit" id="submit" name="submit" value="Submit guess" />
    </form>
    <p id="info"></p>
    <p id="prevNumbers"></p>
    <p id="lowOrHigh"></p>
    <p>Turn: <span id="counter" </span></p>
  </div>
  <!-- /.game-body -->

</div>
<!-- /.game-wrapper -->
            
          
!
            
              //<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
$section-padding: 30px;

* {
  box-sizing: border-box;
}
body {
  background-color: #373737;
  font-family: 'Open Sans', sans-serif;
}
input,
button {
  font: inherit;
}
input[type="text"] {
  line-height: 20px;
  padding: 10px;
  border-radius: 0;
  border: 1px #000 solid;
}
input[type="submit"],
button {
  border-radius: 0;
  background-color: transparent;
  border: 1px #000 solid;
  padding: 10px 20px;
  line-height: 20px;
  transition: all .3s ease;
  &:hover:not(:disabled) {
    background-color: #000;
    color: #fff;
    cursor: pointer;
  }
}
.game-wrapper {
  max-width: 800px;
  margin: 30px auto;
  border: 1px #e1e1e1 solid;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.game-header {
  background-color: #f7f7f7;
  padding: $section-padding;
  border-bottom: 1px #e1e1e1 solid;
}
.game-body {
  position: relative;
  padding: $section-padding;
}
#warning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #f00;
  color: #fff;
}
            
          
!
            
              //problem z this przy addEventListener resetBtn
//jak dodać event do gameForm w środku obiektu, czy się w ogóle da
var Game = {
  //referencje do elementów gry
  gameForm: document.getElementById('game'),
  inputGuess: document.getElementById('guess'),
  submitGuess: document.getElementById('submit'),
  infoMsg: document.getElementById('info'),
  prevNumbers: document.getElementById('prevNumbers'),
  lowOrHigh: document.getElementById('lowOrHigh'),
  counterField: document.getElementById('counter'),
  warningField: document.getElementById('warning'),
  
  init: function() {
    this.randomNumber = Math.ceil(Math.random() * 100);
    this.counter = 1;
    this.counterField.textContent = this.counter;
    this.inputGuess.disabled = '';
    this.submitGuess.disabled = '';
    this.infoMsg.textContent = '';
    this.lowOrHigh.textContent = '';
    if (this.resetBtn) {
      this.resetBtn.parentNode.removeChild(this.resetBtn);
      //console.log('poszło');
    }
    if (this.counterField.parentNode.style.visibility === 'hidden') {
      this.counterField.parentNode.style.visibility = 'visible';
    }
  },
  
  gameOver: function() {
    this.inputGuess.disabled = 'true';
    this.submitGuess.disabled = 'true';
    this.resetBtn = document.createElement('button');
    this.resetBtn.textContent = "Reset Game";
    this.resetBtn.addEventListener('click',this.init.bind(Game));
    this.gameForm.appendChild(this.resetBtn);
    this.counterField.parentNode.style.visibility = 'hidden';
  },
  
  inputValidation: function(input) {
    if (!(/^(-|)\d+$/g.test(input))) {
      this.warningField.textContent = 'You\'ve entered wrong value';
      this.inputGuess.value = '';
      return true;
    } else if (Number(input) < 1) {
      this.warningField.textContent = 'The number is too low';
      this.inputGuess.value = '';
      return true;
    } else if (Number(input) > 100) {
      this.warningField.textContent = 'The number is too high';
      this.inputGuess.value = '';
      return true;
    }
  },
  
  onSubmitGuess: function() {
    if (this.inputValidation(this.inputGuess.value)) {
      return false;
    } else {
      this.warningField.textContent = '';
    }
    var guessNumber = Number(this.inputGuess.value);
    if (guessNumber === this.randomNumber) {
      this.infoMsg.textContent = 'You\'ve guessed the number in ' + this.counter + ' turn!';
      this.lowOrHigh.textContent = '';
      this.gameOver();
    }  else if (this.counter === 10) {
      this.infoMsg.textContent = 'GAME OVER';
      this.gameOver();
    } else {
      if (!this.infoMsg.textContent) {
        this.infoMsg.textContent = 'Previous guesses: ';
      }
      this.infoMsg.textContent += (' ' + guessNumber);

      if (guessNumber > this.randomNumber) {
        this.lowOrHigh.textContent = 'Last guess was too high';
      } else {
        this.lowOrHigh.textContent = 'Last guess was too low';
      }

    }
    this.inputGuess.value = '';
    this.inputGuess.focus();
    this.counter++;
    this.counterField.textContent = this.counter;
  }
  
}
Game.gameForm.addEventListener('submit', function(e) {
  e.preventDefault();
  Game.onSubmitGuess();
});
Game.init();
                              
//Zmienne: referencje do elementów gry
//- formularz
//var gameForm = document.getElementById('game');
//- pole tekstowe formularza
//var inputGuess = document.getElementById('guess');
//- przycisk submit formularza
//var submitGuess = document.getElementById('submit');
//- pole wyświetlania się informacji (paragraf)
//var infoMsg = document.getElementById('info');
//- pole wyświetlania się poprzednio zgadywanych liczb (paragraf)
//var prevNumbers = document.getElementById('prevNumbers');
//- pole wyświetlania się informacji czy wprowadzona liczba jest zbyt wysoka lub zbyt niska (paragraf)
//var lowOrHigh = document.getElementById('lowOrHigh');
//- counter (paragraf)
//var counterField = document.getElementById('counter');
//- reset button
//var resetBtn;
//- pole w którym wyświetlają się ostrzeżenia dotyczące walidacji wprowadzonej wartości
//var warningField = document.getElementById('warning');

//Zmienne: mechanika gry
//- losowa liczba do zgadnięcia
//var randomNumber;
//- licznik prób
//var counter;


//Funkcja: przygotowuje grę i umożliwia zresetowanie jej po zakończeniu
/*function init() {
  randomNumber = Math.ceil(Math.random() * 100);
  counter = 1;
  counterField.textContent = counter;
  inputGuess.disabled = '';
  submitGuess.disabled = '';
  infoMsg.textContent = '';
  lowOrHigh.textContent = '';
  if (resetBtn) {
    resetBtn.parentNode.removeChild(resetBtn);
    console.log('poszło');
  }
  if (counterField.parentNode.style.visibility === 'hidden') {
    counterField.parentNode.style.visibility = 'visible';
  }
}

//Funkcja: kończy grę, blokuje pola formularza i dodaje możliwość resetu gry
function gameOver() {
  inputGuess.disabled = 'true';
  submitGuess.disabled = 'true';
  resetBtn = document.createElement('button');
  resetBtn.textContent = "Reset Game";
  resetBtn.addEventListener('click',init);
  gameForm.appendChild(resetBtn);
  counterField.parentNode.style.visibility = 'hidden';
}

//Funkcja: sprawdza czy użytkownik wprowadził poprawne dane
function inputValidation(input) {
  if (!(/^(-|)\d+$/g.test(input))) {
    warningField.textContent = 'You\'ve entered wrong value';
    inputGuess.value = '';
    return true;
  } else if (Number(input) < 1) {
    warningField.textContent = 'The number is too low';
    inputGuess.value = '';
    return true;
  } else if (Number(input) > 100) {
    warningField.textContent = 'The number is too high';
    inputGuess.value = '';
    return true;
  }
}

gameForm.addEventListener('submit',function(e) {
  e.preventDefault();
  if (inputValidation(inputGuess.value)) {
    return false;
  } else {
    warningField.textContent = '';
  }
  var guessNumber = Number(inputGuess.value);
  if (guessNumber === randomNumber) {
    infoMsg.textContent = 'You\'ve guessed the number in ' + counter + ' turn!';
    lowOrHigh.textContent = '';
    gameOver();
  }  else if (counter === 10) {
    infoMsg.textContent = 'GAME OVER';
    gameOver();
  } else {
    if (!infoMsg.textContent) {
      infoMsg.textContent = 'Previous guesses: ';
    }
    infoMsg.textContent += (' ' + guessNumber);
    
    if (guessNumber > randomNumber) {
      lowOrHigh.textContent = 'Last guess was too high';
    } else {
      lowOrHigh.textContent = 'Last guess was too low';
    }
    
  }
  inputGuess.value = '';
  inputGuess.focus();
  counter++;
  counterField.textContent = counter;
});

init();
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console