<div class="container">
  <h1>Tip Calculator</h1>
  <form action="">
    <section class="total-bill">
      <h2>Total bill amount</h2>
      <input type="numbrt" placeholder="0.00" id="amount" value="" required />
    </section>
    <section class="select-tip">
      <h2>Choose Tip</h2>
      <div class="radio-group">
        <input type="radio" id="5" name="percentage" value="5" />
        <label for="5">
          <span> 5%</span>
        </label>
        <input type="radio" id="10" name="percentage" value="10" checked />
        <label for="10">
          <span> 10%</span>
        </label>
        <input type="radio" id="15" name="percentage" value="15" />
        <label for="15">
          <span>15%</span>
        </label>
        <input type="radio" id="20" name="percentage" value="20" />
        <label for="20">
          <span>20%</span>
        </label>
      </div>
    </section>
    <section class="people">
      <h2>Number of People sharing</h2>
      <input type="number" placeholder="1" value="2" id="people" required />
    </section>
    <section class="submit-form">
      <button class="calculate-btn">Calculate</button>
      <div class="final-bill">
        <p id="tip">Tip Per Person: $0</p>
    </section>
  </form>
</div>

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  --black: #2c2626;
  --darkgrey: #6a5959;
  --white: #ffffff;
  --green: #80ed99;
  --darkgreen: #24532f;
  --grey: #f0f0f0;
  --radius: 8px;
}

body {
  background: var(--grey);
  color: var(--black);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  font-family: "DM Mono", monospace;
  text-align: center;
}

.container {
  width: 400px;
  padding: 20px 0 50px 0;
}

h1 {
  font-size: 3em;
  margin: 50px 0;
}

h2 {
  margin: 0 0 20px;
}

section {
  margin: 20px 0 50px;
}

input {
  width: 90%;
  height: 2em;
  font-size: 2em;
  box-sizing: border-box;
  text-align: end;
  outline: none;
  background: var(--white);
  padding: 5px;
  border-radius: var(--radius);
  border: 2px solid var(--darkgrey);
}

.select-tip h2 {
  margin-bottom: 50px;
}

.radio-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.radio-group label::before {
  text-align: center;
  content: "";
  display: inline-block;
  width: 60px;
  height: 50px;
  border: 2px solid var(--darkgrey);
  border-radius: var(--radius);
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.radio-group input[type="radio"]:checked + label::before {
  background-color: var(--green);
}

.radio-group label span {
  position: absolute;
  left: 20px;
  top: -10px;
}

.final-bill p {
  font-size: 1.5em;
}
.calculate-btn {
  background: var(--darkgreen);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 15px 30px;
  font-size: 2em;
}

const calculateBtn = document.querySelector(".calculate-btn");

function CalculateTip(e) {
  event.preventDefault();
  const tipMessage = document.getElementById("tip");
  const amount = document.getElementById("amount").value;
  const tipPercentage = document.querySelector('[name="percentage"]:checked')
    .value;
  if (amount === "") {
    alert("Please enter the amount.");
    return;
  }

  const people = document.getElementById("people").value;
  const tip = (amount * (tipPercentage / 100)) / people;
  console.log(tip);
  tipMessage.innerHTML = `The Tip per person is $${tip}`;
}

calculateBtn.addEventListener("click", CalculateTip);