Lesson 2 - Learning construction STEP 3

by nathanesa

HTML

<img src="https://i.ibb.co/GdtZYgN/festisite-google-1.png" alt="wifi-checker" border="0">
<br>

<form>
  <label>How many wi-fi devices do you have?</label>
  <input id="numberDevices" type="number" value="0" maxlength="4" oninput="start()">
</form>
<br>

<p id='output'> </p>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
 text-align:center;
}

img {
  width: 400px;
  margin-top: 220px;
}

button {
  background: #f3f3f3;
  border: 1px solid #556699;
  border-radius: 11px;
  padding: 10px 20px;
  color: #000000;
  display: inline-block;
  font: normal normal 20px/1 "Roboto", sans-serif;
  text-align: center;
}

p, label {
 font-family: 'Roboto', sans-serif;
 font-size: 40px; 
}

input {
  width: 70px;
  height: 40px;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  text-align: center;
}

JavaScript

function start() {

  let noOfDevices = document.getElementById("numberDevices").value;
  
  if (noOfDevices < 7) {
    document.getElementById('output').innerHTML = "You don't have too many devices.";
  } else if (noOfDevices >= 7 & noOfDevices < 15) {
    document.getElementById('output').innerHTML = "You have a lot of devices!";
  } else if (noOfDevices >= 15 & noOfDevices < 30) {
    document.getElementById('output').innerHTML = "You have far too many devices!";
  } else {
    document.getElementById('output').innerHTML = "Seriously? ...";
  }

}