Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Class Activity 1.1</title>
<style id="jsbin-css">
* {
  font-family: helvetica;
  font-size: 12pt;
}

p{
  text-align: center;
}
input{
    border:0;
    border-bottom: dotted;

}
button{
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
div{
  text-align: center;
}
</style>
</head>
<body>

  <p><label>Name</label>
    <input id="player" type="text">
    <br>
    <br>
    <label>Enter Number</label>
    <input id="input" type="number">
    <br>
    <br>
    <button type="reset">Reset</button>
    <button type="submit" onclick="guessAnyNumber()">Guess</button>
    <div id="output"></div>
  </p>
<script id="jsbin-javascript">
const i = 100;

function guessAnyNumber(){

  var myplayer=document.getElementById("player").value;
  var myinput = document.getElementById("input").value;

            if (myinput < i){
                document.getElementById("output").innerHTML="The input is lower than the actual number";

            }
            else if (myinput > i){
                document.getElementById("output").innerHTML="The input is higher than the actual number";

            }
            else{
                document.getElementById("output").innerHTML="The input is the right number";

            }
 }
</script>


<script id="jsbin-source-css" type="text/css">* {
  font-family: helvetica;
  font-size: 12pt;
}

p{
  text-align: center;
}
input{
    border:0;
    border-bottom: dotted;

}
button{
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
div{
  text-align: center;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
const i = 100;

function guessAnyNumber(){

  var myplayer=document.getElementById("player").value;
  var myinput = document.getElementById("input").value;

            if (myinput < i){
                document.getElementById("output").innerHTML="The input is lower than the actual number";

            }
            else if (myinput > i){
                document.getElementById("output").innerHTML="The input is higher than the actual number";

            }
            else{
                document.getElementById("output").innerHTML="The input is the right number";

            }
 }

</script></body>
</html>