Tip Calculator App in HTML, CSS, and JavaScript

By
Asif Ali
-
0

Hey all people I hope you’re all superb, at this time we’re going to create a Tip Calculator App in HTML CSS and JavaScript. It is an excellent venture to construct logic and enhance your expertise in HTML CSS and JavaScript. This venture is for freshmen who’re working in HTML CSS and JavaScript.

So, I will use HTML and CSS to Design the venture and we’ll use media question to make it responsive for any system. As soon as we designed the entire software, then we’ll use JavaScript so as to add the functionalities that assist to show the dynamic content material, when the person clicks on a specific button.

On this tutorial, we’ll information you thru the method of constructing a sensible and user-friendly tip calculator app utilizing the trio of internet growth languages: HTML, CSS, and JavaScript. Whether or not you’re a newbie or have some expertise with internet growth, this step-by-step information will provide help to create a useful instrument that simplifies the duty of calculating suggestions at eating places or every other service-based transactions.

Tip Calculator App in HTML CSS and JavaScript

So, Let’s take a look at the video tutorial that lets you create your venture particularly Tip Calculator App in HTML CSS and JavaScript. Contained in the tutorial you possibly can study every step with virtually, I hope the video is useful and helpful for you, you possibly can watch the video until to finish.

I hope you have watched the entire video tutorial, you have realized one thing new from this tutorial. Let’s take a look at the supply code of the venture under.

You Might Additionally Like:

Earlier than coding, let’s break down the first performance we goal to realize with our tip calculator app. The app ought to enable customers to enter the invoice quantity and choose a tip share. Subsequently, it ought to calculate the tip quantity and show each the tip and the full invoice, together with the tip. This user-friendly instrument will streamline the method of figuring out suggestions, making it handy for everybody.

HTML Construction:

The HTML (Hypertext Markup Language) is the muse of our internet web page. It gives the construction for our tip calculator app, defining the weather customers will work together with. We’ll begin by creating enter fields for the invoice quantity and tip share, a button to provoke the calculation, and placeholders to show the outcomes. These organized construction units the stage for our app’s performance.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
    <!-- shows web site correctly based mostly on person's system -->

    <title>Tip calculator App | OnlineITtuts</title>
    <hyperlink rel="stylesheet" href="fashion.css" />
    <script defer src="app.js"></script>
  </head>
  <physique>
    <header>
      <img src="./photographs/emblem.svg" alt="" />
    </header>

    <most important>
      <div class="container">
        <div class="topSection">
          <div class="label">
            <label for="enter">Invoice</label>
          </div>

          <div class="input_wrapper">
            <enter sort="quantity" placeholder="0.0" id="enter" />
            <img src="./photographs/icon-dollar.svg" alt="" />
          </div>

          <div class="label">
            <label for="customTip">Choose Tip %</label>
          </div>

          <div class="btnContainer">
            <button class="btn">5%</button>
            <button class="btn">10%</button>
            <button class="btn lively">15%</button>
            <button class="btn">25%</button>
            <button class="btn">50%</button>
            <enter sort="quantity" placeholder="Customized" id="customTip" />
          </div>

          <div class="label">
            <label for="individuals">Variety of Folks</label>
            <p id="error"></p>
          </div>

          <div class="peopleWrapper">
            <enter sort="quantity" placeholder="1" id="individuals" />
            <img src="./photographs/icon-person.svg" alt="" />
          </div>
        </div>

        <div class="bottomSection">
          <div class="quantity">
            <div class="desc">
              <p>
                Tip Quantity <br />
                <span>/ individual</span>
              </p>
              <div class="tipValue">$5</div>
            </div>
            <div class="desc">
              <p>
                Whole <br />
                <span>/ individual</span>
              </p>
              <div class="tipValue">$200</div>
            </div>
          </div>
          <button class="reset">Reset</button>
        </div>
      </div>
    </most important>
  </physique>
</html>

CSS Styling:

As soon as we’ve our HTML construction in place, it is time to add some visible enchantment with CSS (Cascading Fashion Sheets). CSS will deal with the styling, making our app not solely purposeful but in addition visually pleasing. We’ll select a color scheme, fonts, and layouts that contribute to a clear and intuitive design. A well-styled interface enhances the general person’s expertise.

@import url("https://fonts.googleapis.com/css2?household=Manrope:wght@400;600;700;800&household=Area+Mono:ital,wght@0,400;0,700;1,400;1,700&show=swap");

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

physique {
  background-color: hsl(185, 41%, 84%);
  font-family: "house Mono", sans-serif;
  font-weight: 700;
  show: flex;
  align-items: middle;
  justify-content: middle;
  top: 100vh;
  flex-direction: column;
}

header {
  show: flex;
  justify-content: middle;
  margin-block: 50px;
}

.container {
  border-radius: 20px;
  background-color: #fff;
}

.topSection {
  padding: 30px;
}

.label {
  font-size: 14px;
  coloration: hsl(186, 14%, 43%);
  font-weight: 700px;
  margin-bottom: 20px;
}

.input_wrapper {
  place: relative;
}

.input_wrapper > enter {
  margin-block: 0 40px;
  padding: 10px;
  font-size: 16px;
  width: 350px;
  border: none;
  border-radius: 5px;
  background-color: hsl(189, 41%, 97%);
  text-align: proper;
  cursor: pointer;
  coloration: hsl(183, 100%, 15%);
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
}

enter[type="number"] {
  -moz-appearance: textfield;
}

.input_wrapper > enter:focus {
  define: none;
}

.input_wrapper > img {
  place: absolute;
  prime: 15px;
  left: 15px;
}

.btnContainer {
  show: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 15px;
  margin-bottom: 40px;
}

.btnContainer > button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: hsl(183, 100%, 15%);
  coloration: #fff;
  font-size: 20px;
  cursor: pointer;
  font-family: "house Mono", sans-serif;
}

.btnContainer > button.lively {
  background-color: hsl(185, 41%, 84%);
  coloration: hsl(183, 100%, 15%);
}

button:lively {
  rework: scale(0.98);
}

.btnContainer > enter {
  border: none;
  padding: 10px;
  background-color: hsl(189, 41%, 97%);
  border-radius: 5px;
  font-family: "house Mono", sans-serif;
  font-size: 14px;
}

.peopleWrapper {
  place: relative;
}

.peopleWrapper > enter {
  margin-block: 10px 40px;
  padding: 10px;
  font-size: 16px;
  width: 350px;
  border: none;
  border-radius: 5px;
  background-color: hsl(189, 41%, 97%);
  text-align: proper;
  cursor: pointer;
  coloration: hsl(183, 100%, 15%);
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
}

.peopleWrapper > enter:focus {
  define: none;
}

.peopleWrapper > enter:focus {
  define: none;
}

.peopleWrapper > img {
  place: absolute;
  prime: 20px;
  left: 20px;
}

.bottomSection {
  background-color: hsl(183, 100%, 15%);
  border: none;
  border-radius: 20px;
  padding-block: 50px 20px;
  padding-inline: 20px;
}

.desc {
  show: flex;
  justify-content: space-between;
  align-items: middle;
  margin-bottom: 55px;
}

.desc > p {
  font-size: 20px;
  font-family: inherit;
  coloration: #fff;
}

.desc > p > span {
  opacity: 0.5;
}

.desc > div {
  font-size: 30px;
  font-family: inherit;
  coloration: hsl(172, 67%, 45%);
  font-weight: 700;
}

.reset {
  padding: 15px;
  border: none;
  border-radius: 5px;
  background-color: hsl(184, 14%, 56%);
  font-size: 16px;
  coloration: hsl(183, 100%, 15%);
  font-weight: 700;
  width: 380px;
  cursor: pointer;
  show: block;
  /* margin-top: 15rem; */
}

@media (min-width: 1200px) {
  .container {
    show: flex;
    width: 920px;
    top: 490px;
    margin: Zero auto;
  }

  .topSection {
    width: 50%;
  }

  .bottomSection {
    width: 50%;
    margin-block: 35px;
    margin-right: 35px;
    padding-block: 50px 20px;
    padding-inline: 20px;
    place: relative;
  }

  .desc {
    padding-inline: 40px;
  }

  .reset {
    place: absolute;
    backside: 40px;
    left: 40px;
    width: 355px;
    margin: Zero auto;
  }

  .input_wrapper > enter {
    width: 379px;
  }

  .peopleWrapper > enter {
    place: relative;
    width: 379px;
    backside: 20px;
  }

  .peopleWrapper > img {
    place: absolute;
    prime: 7px;
  }

  .btnContainer {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 2.5rem;
  }

  .btn {
    width: 115px;
  }

  .btnContainer > enter {
    width: 100%;
  }
}

@media (min-width: 375px) and (max-width: 1199px) {
  .reset {
    width: 100%;
  }
}

JavaScript Performance:

Now, let’s carry our tip calculator app to life by incorporating JavaScript. JavaScript is a dynamic scripting language that permits us so as to add performance and interactivity to our Internet web page. We’ll create an occasion for listeners to seize personal inputs, carry out the mandatory calculations, and dynamically replace the displayed outcomes. JavaScript’s versatility ensures a responsive person’s expertise.

"use strict";

const inputEl = doc.querySelector("#enter");
const btnEl = doc.querySelectorAll(".btn");
const customTip = doc.querySelector("#customTip");
const errorEl = doc.querySelector("#error");
const peopleEl = doc.querySelector("#individuals");
const totalVal = doc.querySelectorAll(".tipValue");
const resetEl = doc.querySelector(".reset");

let billVal = 0;
let peopleVal = 1;
let tipVal = 0.15;

inputEl.addEventListener("enter", validateBill);
peopleEl.addEventListener("enter", setPeopleValue);
resetEl.addEventListener("click on", handleReset);
customTip.addEventListener("enter", tipCustomVal);

// btn Occasions
btnEl.forEach((btn) => {
  btn.addEventListener("click on", handleClick);
});

operate handleClick(e) {
  btnEl.forEach((btn) => {
    btn.classList.take away("lively");

    if (e.goal.innerHTML === btn.innerHTML) {
      btn.classList.add("lively");
      tipVal = parseFloat(btn.innerHTML) / 100;
    }
  });

  customTip.worth = "";
  calculate();
}

// validate the invoice
operate validateBill() {
  if (inputEl.worth.contains(",")) {
    inputEl.worth.substitute(",", ".");
  }

  billVal = parseFloat(inputEl.worth);
  calculate();
}

// tip customized worth
operate tipCustomVal() {
  tipVal = parseFloat(customTip.worth / 100);

  btnEl.forEach((btn) => {
    btn.classList.take away("lively");
  });

  if (customTip.worth !== 0) {
    calculate();
  }
}

// set individuals Worth
operate setPeopleValue() {
  peopleVal = parseFloat(peopleEl.worth);

  if (peopleVal <= 0) {
    errorEl.innerHTML = "quantity should be higher than zero";

    setTimeout(() => {
      errorEl.innerHTML = "";
    }, 2000);
  }
  calculate();
}

// calculate
operate calculate() {
  if (peopleVal >= 1) {
    let tip = (billVal * tipVal) / peopleVal;
    let totalAmount = (billVal * (tipVal + 1)) / peopleVal;

    totalVal[0].innerHTML = "$" + tip.toFixed(2);
    totalVal[1].innerHTML = "$" + totalAmount.toFixed(2);
  }
}

// reset
operate handleReset() {
  inputEl.worth = 0.0;
  validateBill();
  btnEl[2].click on();
  peopleEl.worth = 1;
  setPeopleValue();
}

Step-by-Step Improvement:

  1. HTML Construction:
  • Create a brand new HTML file and outline the fundamental construction.
  • Add enter fields for the invoice quantity and tip share.
  • Embrace a button to set off the calculation.
  • Arrange placeholders to show the tip quantity and the whole invoice.
  1. CSS Styling:
  • Open a brand new CSS file to fashion your HTML parts.
  • Select a color scheme that’s simple on the eyes.
  • Outline fonts and sizes for textual content parts.
  • Apply layouts and spacing for a well-organized design.
  1. JavaScript Performance:
  • Hyperlink your JavaScript file to your HTML doc.
  • Use JavaScript to seize personal inputs from the invoice and tip share fields.
  • Implement a operation to calculate the tip quantity based mostly on the entered values.
  • Replace the displayed outcomes dynamically because the person interacts with the app.
  1. Dealing with Edge Instances and Validation:
  • Implement validation checks to make sure customers enter legitimate knowledge.
  • Contemplate edge circumstances, similar to zero invoice quantity or excessive tip percentages.
  • Show significant error messages to information customers in case of invalid inputs.
  1. Testing and Debugging:
  • Completely check your app below for varied eventualities.
  • Debug any points or glitches that come up throughout testing.
  • Make sure the app performs reliably and gives correct outcomes.

Conclusion:

By following this step-by-step tutorial, you may have efficiently created a user-friendly tip calculator app utilizing HTML, CSS, and JavaScript. This venture not solely enhances your internet growth expertise but in addition, gives a sensible instrument that can be utilized by a variety of customers. Be at liberty to customize the design and add extra options to make the app uniquely yours. Blissful coding!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.