Tip calculator Code in Javascript

Tip calculator Code in Javascript. We need three files.

index.php
min.js
style.css

index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Tip calculator</title>
  </head>
  <body>
    <div class="overlay">
      <!-- MAIN -->
      <main>
        <form action="">
          <h1>Accurate Tip Calculator</h1>
          <div class="group">
            <label for="bill-value">your's bill</label>
            <input
              type="number"
              name="bill-value"
              id="bill-value"
              class="fields"
            />
          </div>
          <div class="group">
            <label for="sharing">Total No of customer who paid the bill...</label>
            <input type="number" name="sharing" id="sharing" class="fields" />
          </div>
          <div class="group">
            <p>How was your service?</p>
            <select
              name="dropdown"
              id="dropdown"
              placeholder="Select one..."
              class="fields"
            >
              <option value="">Plz select first ...</option>
              <option value="10">10%</option>
              <option value="15">15%</option>
              <option value="20">20%</option>
            </select>
          </div>
          <button type="button" id="calculate">Calculate</button>
        </form>
        <div class="bottom"></div>
      </main>
    </div>
    <!-- RESULT -->
    <div class="result hidden">
      <p>Total Tip amount: <span id="tip">0</span></p>
      <p>Total amount: <span id="total">0</span></p>
      <p>Each person owes: <span id="owes">0</span></p>
      <button id="btn-new">New</button>
    </div>

    <script src="./js/script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Tip calculator</title>

</head>

<body>

<main>

<h1>Accurate Tip Calculator</h1>

<input

type="number"

name="bill-value"

id="bill-value"

class="fields"

</div>

<label for="sharing">Total No of customer who paid the bill...</label>

</div>

<p>How was your service?</p>

<select

name="dropdown"

id="dropdown"

placeholder="Select one..."

class="fields"

<option value="">Plz select first ...</option>

</select>

</div>

<button type="button" id="calculate">Calculate</button>

</form>

</main>

</div>

<p>Total Tip amount: <span id="tip">0</span></p>

<p>Total amount: <span id="total">0</span></p>

<p>Each person owes: <span id="owes">0</span></p>

</div>

</body>

</html>

script.js

'use strict';

// CALCULATOR
const billInput = document.querySelector('#bill-value');
const peopleInput = document.querySelector('#sharing');
const percentageInput = document.querySelector('#dropdown');

document.querySelector('#calculate').addEventListener('click', function () {
  const billValue = Number(billInput.value);
  const people = Number(peopleInput.value);
  const percentage = Number(percentageInput.value);

  if (billValue == '' || people == '' || percentage == '') {
    if (billValue == '') {
      billInput.style.background = '#dd8080';
    } else if (people == '') {
      peopleInput.style.background = '#dd8080';
    } else if (percentage == '') {
      percentageInput.style.background = '#dd8080';
    }
  } else {
    billInput.style.background = '#fff';
    peopleInput.style.background = '#fff';
    percentageInput.style.background = '#fff';
    const tip = billValue * (percentage / 100);
    const total = tip + billValue;
    const owes = total / people;
    document.querySelector('.result').classList.remove('hidden');

    document.querySelector('#tip').textContent = tip;
    document.querySelector('#total').textContent = total;
    document.querySelector('#owes').textContent = owes;
  }
});

//NEW BUTTON

document.querySelector('#btn-new').addEventListener('click', function () {
  document.querySelector('.result').classList.add('hidden');
  billInput.value = '';
  peopleInput.value = '';
  percentageInput.value = '';
});

'use strict';

// CALCULATOR

const billInput = document.querySelector('#bill-value');

const peopleInput = document.querySelector('#sharing');

const percentageInput = document.querySelector('#dropdown');

document.querySelector('#calculate').addEventListener('click', function () {

const billValue = Number(billInput.value);

const people = Number(peopleInput.value);

const percentage = Number(percentageInput.value);

if (billValue == '' || people == '' || percentage == '') {

if (billValue == '') {

billInput.style.background = '#dd8080';

} else if (people == '') {

peopleInput.style.background = '#dd8080';

} else if (percentage == '') {

percentageInput.style.background = '#dd8080';

}

} else {

billInput.style.background = '#fff';

peopleInput.style.background = '#fff';

percentageInput.style.background = '#fff';

const tip = billValue * (percentage / 100);

const total = tip + billValue;

const owes = total / people;

document.querySelector('.result').classList.remove('hidden');

document.querySelector('#tip').textContent = tip;

document.querySelector('#total').textContent = total;

document.querySelector('#owes').textContent = owes;

}

});

//NEW BUTTON

document.querySelector('#btn-new').addEventListener('click', function () {

document.querySelector('.result').classList.add('hidden');

billInput.value = '';

peopleInput.value = '';

percentageInput.value = '';

});

style.css

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body {
  margin-left: 10%;
  margin-right: 10%;
  
  padding: 0;
  background: url(../img-bg.jpg) no-repeat center/cover;
  background-attachment: fixed;
  background-color: #2e2626;
  position: relative;
  font-family: 'Lato', sans-serif;
  font-size: 30px;
  font-style: italic;

}
/* MAIN */
main {
  width: 90%;
  background-color: rgb(59, 7, 7);
  margin: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:left;
}

p {
  margin: 0;
}
input,
select {
  font-size: 20px;
  
  margin-top: 1rem;
}

.group {
  display: flex;
  flex-direction: column;
  margin: 1rem 3rem;
}

.overlay {
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}
button {
  background-color: #f32929;
  color: #fff;
  border: none;
  margin-left: 10%;
  font-size: 20px;
  width: 175px;
  
}
button:hover {
  background-color: #0a0a0a;
  cursor: pointer;
}
/* RESULT */

.result {
  background-color: rgba(38, 97, 48, 0.781);
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  padding: 3rem 4rem;
  border: 4px solid #000;
  text-align: right;
}
.result p {
  margin: 1rem;
}

.hidden {
  display: none;
}

h1 {
  background-color: #ac594e3b;
  margin: 0;
  line-height: 2;
}
.bottom {
  background-color: #ac594e3b;
  height: 3.5rem;
  margin-top: 2rem;
  
}

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

body {

margin-left: 10%;

margin-right: 10%;

padding: 0;

background: url(../img-bg.jpg) no-repeat center/cover;

background-attachment: fixed;

background-color: #2e2626;

position: relative;

font-family: 'Lato', sans-serif;

font-size: 30px;

font-style: italic;

}

/* MAIN */

main {

width: 90%;

background-color: rgb(59, 7, 7);

margin: auto;

height: auto;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align:left;

}

p {

margin: 0;

}

input,

select {

font-size: 20px;

margin-top: 1rem;

}

.group {

display: flex;

flex-direction: column;

margin: 1rem 3rem;

}

.overlay {

height: 100vh;

background-color: rgba(0, 0, 0, 0.7);

}

button {

background-color: #f32929;

color: #fff;

border: none;

margin-left: 10%;

font-size: 20px;

width: 175px;

}

button:hover {

background-color: #0a0a0a;

cursor: pointer;

}

/* RESULT */

.result {

background-color: rgba(38, 97, 48, 0.781);

position: absolute;

top: 50%;

left: 10%;

transform: translate(-50%, -50%);

padding: 3rem 4rem;

border: 4px solid #000;

text-align: right;

}

.result p {

margin: 1rem;

}

.hidden {

display: none;

}

h1 {

background-color: #ac594e3b;

margin: 0;

line-height: 2;

}

.bottom {

background-color: #ac594e3b;

height: 3.5rem;

margin-top: 2rem;

}

Tip calculator Code in Javascript
By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022

Download Tip calculator Code in Javascript

Related Posts:

Leave a Comment