A Pen by Joe Dix

Thumbnail
This awesome code was written by dixign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dixign ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Joe Dix</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Name the people who live in my house</h1>

<p class="answer hidden"><span>Joe</span></p>

<p class="answer hidden"><span>Pickle</span></p>

<p class="answer hidden"><span>Carrera</span></p>

<p class="answer hidden"><span>Sausage</span></p>  

<input type="text" class="answer-field">
<p>Hit return to submit</p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dixign/a-pen-by-joe-dix-mqyxRL */
.answer {
  height: 40px;
  width:200px;
}

.answer.hidden { background: black; }

.answer.hidden span { display:none; }

/*Downloaded from https://www.codeseek.co/dixign/a-pen-by-joe-dix-mqyxRL */
$( document ).ready(function() {
    $('.answer-field').keypress(function(){
      var typedText = $('.answer-field').val();
      $('.answer span').each(function(){
        var rightAnswer = $(this).html().toLowerCase();
        if( typedText.toLowerCase() == rightAnswer.toLowerCase()){
          $(this).parent().removeClass('hidden');
        }
      })
    })

});

Comments