<!DOCTYPE html>
<html>

<head>
  <title>Tip Calculator App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <form action="index.html" method="post" id="tipForm">
      <h1>Tip Calculator</h1>
      <div class="inputs">
        <div class="flex">
          <label for="bill_amount">Bill total:</label>
          <input type="number" name="bill_amount" id="bill" min="0" placeholder="$0">
        </div>
        <div class="flex">
          <label for="service_quality">Service quality:</label>
          <select name="service_quality" id="service" form="tipForm">
                            <option value="0.05">Bad</option>
                            <option value="0.10">Good</option>
                            <option value="0.20">Excellent</option>
                        </select>
        </div>
        <div class="flex">
          <label for="split_bill">People sharing bill?</label>
          <input type="number" name="split_bill" id="split" min="1" placeholder="0">
        </div>
        <div id="result">$--</div>
      </div>
      <div class="flex-btn">
        <button type="button" onclick="calculateTip()" id="calc-btn">Calculate</button>
      </div>
    </form>
  </div>
  <script src="app.js"></script>
</body>

</html>
* {
  box-sizing: border-box;
}

body {
/*   background: #222; */
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
}

/* -------------
    FORM STYLES 
----------------*/

.container {
}

#tipForm {
  border-radius: 5px;
  box-shadow: 0 0 1px;
  position: absolute;
  left: 40%;
  top: 20%;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 300px;
  padding-bottom: 10px;
}

h1 {
  border-radius: 5px 5px 0 0;
  background-color: #fcba03;
  margin: 0;
  text-align: center;
  padding: 0 20px;
}

.inputs {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  margin: 20px;
}

label {
  font-size: 1.2em;
  font-weight: bold;
}

#result {
  align-self: center;
  background-color: #eee;
  text-align: center;
  width: 50%;
}

button {
  border: none;
  border-radius: 5px;
  background: #fcba03;
  display: inline-block;
  text-align: center;
  width: 50%;
}

button:hover {
  background: #c79200;
}

#split,
#bill {
  width: 30%;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-btn {
  display: flex;
  justify-content: space-around;
}

var data = [];

function calculateTip() {
    var tip;
    getData();
    
    tip = (data[0] * data[1]) / data[2];

    if (isNaN(tip)) {
        document.getElementById('result').textContent = '$--';
    } else if (tip === Infinity) {
        document.getElementById('result').textContent = '$--';
    } else {
        document.getElementById('result').textContent = '$' + tip.toFixed(2);
    }
}



function getData() {
    data[0] = document.getElementById('bill').value;
    data[1] = document.getElementById('service').value;
    data[2] = document.getElementById('split').value;

    if (data[0] <= 0) {
        alert('Please enter a bill amount.');
    } else if (data[2] < 1) {
        alert('Please enter 1 for yourself or more if you are splitting the bill.');
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.