Lesson 2 - Learning construction STEP 2

by nathanesa

HTML

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

<br>

<button onclick='start()'> START </button>

<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 {
 font-family: 'Roboto', sans-serif;
 font-size: 40px; 
}

JavaScript

function start() {

  let noOfDevices = prompt('How many Wi-Fi devices are in your home?');

  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? ...";
  }

}