<h1 class="title">How old are you?</h1>

<main>
  <form id="form">
    <div class="input-container">
      <label for="age">Enter your age: </label>
      <input type="number" id="age" required min="1" max="120" />
    </div>

    <button class="submit-btn" id="submit-btn">Submit age</button>
  </form>

  <p class="result-para" id="result"></p>
</main>

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  text-align: center;
  margin: 15px 0 20px;
}

.input-container {
  display: flex;
  align-items: center;
}

input[type="number"] {
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

label,
.result-para {
  font-size: 1.2rem;
}

.submit-btn {
  display: block;
  margin: auto;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #4caf50;
  color: #fff;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #45a049;
}

.result-para {
  margin-top: 20px;
}

const ageInput = document.getElementById("age");
const form = document.getElementById("form");
const resultParagraph = document.getElementById("result");

const responsesArr = [
  "Oh wow! You are just a kid.",
  "Nice! It looks like you are old enough to drive in the States.",
  "Awesome! It looks like you are old enough to vote in the States.",
  "Cool! It looks like you are old enough to drink in the States."
];

function displayResponse(age) {
  if (age < 16) {
    resultParagraph.textContent = responsesArr[0];
  } else if (age >= 16 && age < 18) {
    resultParagraph.textContent = responsesArr[1];
  } else if (age >= 18 && age < 21) {
    resultParagraph.textContent = responsesArr[2];
  } else {
    resultParagraph.textContent = responsesArr[3];
  }
  ageInput.value = "";
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  displayResponse(ageInput.value);
});