对象已移动

可在此处找到该文档 Build a JavaScript Tip Calculator [Article] – New Self New Life
New Self New Life
No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
New Self New Life
No Result
View All Result
Home Softwares

Build a JavaScript Tip Calculator [Article]

by admin
3 years ago
in Softwares
Build a JavaScript Tip Calculator [Article]
Share on FacebookShare on Twitter


Ever discovered your self at a restaurant wishing you possibly can determine find out how to cut up the invoice with your pals or household? Constructing a calculator that may deal with that isn’t as laborious as you assume! I’m going to take you thru a few of what I did to construct this calculator out in HTML, SCSS and vanilla JavaScript. Make sure you stick round to the top the place I’m going over some cool, further options you’ll be able to simply add to this calculator.

I strongly encourage you to learn via this weblog submit to get a really feel for what the calculator can do and try to sort out it your self! This isn’t a step-by-step information, however an outline to get the gears handing over your head. This can be each a difficult and rewarding step in your total developer journey!

You’ll find the code for this and find out how to set up on our GitHub:
https://www.github.com/treehouse/javascript-tip-calculator
Make sure you learn via the README.md file to get it put in accurately.

Dwell demo hyperlink:
https://treehouse.github.io/javascript-tip-calculator

The Software

What was used:

  • HTML, SCSS, JavaScript
  • Flex-box
  • CSS Grid
  • SCSS mixins/variables/partials
  • Excessive-order array strategies
  • Primary OOP

It’s really useful you have got a superb understanding of HTML, CSS(SCSS), and JavaScript to construct or comply with together with this venture. Listed here are some useful assets to get you going or should you want a refresher:

HTML Fundamentals:
https://teamtreehouse.com/library/html-basics-2

SCSS/SASS Fundamentals:
https://teamtreehouse.com/library/sass-basics-2

JavaScript Fundamentals:
https://teamtreehouse.com/library/javascript-basics
JavaScript ideas used
https://teamtreehouse.com/library/javascript-numbers
https://teamtreehouse.com/library/javascript-objects-2
https://teamtreehouse.com/library/interacting-with-the-dom
https://teamtreehouse.com/library/javascript-and-the-dom-3
https://teamtreehouse.com/library/javascript-loops

Mission Overview

This easy calculator solely has a couple of sections. Crucial are invoice quantity part, tip quantity part and the cut up quantity part. We need to calculate the overall price of the invoice primarily based off the enter the person provides in every of those sections. Lets rapidly go over every part now.

Invoice Quantity

The invoice quantity part is fairly easy. It’s simply the overall price of the invoice. Let’s say I went out to eat some pizza with my pal Brandon. He and I cut up one massive pizza. That pizza prices a complete of $12.00. We’d write in $12.00 within the invoice quantity part.

By default, the calculator is about at a 5% tip. In order quickly as you set in $12.00 within the invoice quantity subject, you’ll see that the overall per particular person adjustments as nicely to mirror a 5% tip.

Tip Quantity

The tip quantity subject is to calculate the tip. By default, there are 3 tip proportion choices; 5, 10 and 15. (Stick round to the top of this text to see how we will simply add extra choices!) There may be additionally a button for the person to enter a customized tip. Let’s add a customized tip because the pizza was so scrumptious! I’ll add in $5.00.

If selecting a customized tip, this part will calculate the customized tip’s greenback quantity and add it to the invoice complete. If selecting one of many proportion values, this part will multiply the proportion into the invoice to get the overall tip quantity. Then it is going to add that to the invoice complete to get a complete worth.

After including in our customized $5.00 tip, it exhibits the overall being $17.00 per particular person. ($12.00 pizza and $5.00 tip)

Cut up Quantity

Lastly, we’ve the cut up quantity part. By default, the invoice is about for just one particular person paying however we’ve choices to separate the invoice as much as 6 methods! (This may be modified simply with one line of code, stick round to the top to learn how!) I’m going to pick out 2 in order that we will evenly cut up the invoice.

And there you have got it. Brandon and I’ll every pay $8.50. That is our invoice ($12.00) with an added $5.00 tip ($17.00). Cut up between 2 folks ($17.00 divided by 2) brings the overall per particular person to $8.50.

Code Group

As talked about above, there have been three principal sections for this calculator; invoice quantity, tip quantity, and cut up quantity. It solely is sensible to verify our code is structured to mirror that.

HTML Construction

SCSS partial naming conventions

Group of JavaScript Objects

Since this venture is fairly JavaScript intensive, let’s concentrate on how that’s structured.

Being that lots of this utility has default knowledge when the web page hundreds, I’ve a “UI” object inside every of those part objects. Right here’s what that appears like:

This method could also be overkill for such a small venture however it’s good to maintain issues organized. The great thing about code is you are able to do a lot of the identical issues in many various methods. So discover a method that works finest for you! Every of those UI objects include a construct technique. It may be accessed like this for instance:

Inside this construct technique, I write all of the logic to load the web page with the default knowledge.

As for occasions like when a person sorts in an quantity or selects a tip, I’ve arrange an object only for that.

You’ll discover a way (operate) for every of the forms of occasions we must be listening for. In addition to a pay attention technique. The pay attention technique calls all the above strategies so that each one we have to do is name the pay attention technique.

The one factor left to determine is calculating the overall, proper? So I arrange a operate to calculate the invoice:

Because the utility updates the invoice complete throughout many various occasions, this operate known as in all the pay attention strategies talked about above. This operate calculates the information and spits out the underside part for worth per particular person.

With a stable understanding of HTML, SCSS and JavaScript, I believe that is all the data you should take a stab at this venture! If you happen to try it and need assistance, don’t be shy, attain out to us in Slack! We’d love to assist out. Or perhaps you tried the venture and crushed it! Share your work with us and the remainder of our superior neighborhood of pupil builders. We’d like to see what you’ve provide you with!

Bonus Content material

Random Themes

What if I advised you this utility is already set as much as deal with a number of themes? Discover on the very prime of the app.js file, you’ll see an object for calculatorData. This holds the default knowledge for the calculator.

Setting calculatorData.randomThemeOnLoad to true will set off certainly one of 4 totally different colour choices for the calculator when the web page hundreds! That is really quite simple. We first take a look at if calculatorData.randomThemeOnLoad is true or false. If it’s true, we select a random colour from an array of colours and set that as the worth for a CSS variable in our kinds referred to as —main-theme. I encourage you to have a look via the code and see should you can’t determine how I did this! If you happen to’ve by no means heard of CSS variables, I counsel having a look on the MDN Docs:
https://developer.mozilla.org/en-US/docs/Internet/CSS/Using_CSS_custom_properties

Altering the default tipping and splitting choices

In the identical object we mentioned above, it’s best to see defaultTippingOptions. This mimics the choices displayed on the calculator when the web page hundreds. Strive including one or two new numbers in that array and checking your browser. Let’s add a 25% possibility and a 50% possibility!

That is completed by utilizing the information supplied on this array to construct out the UI as an alternative of hard-coding this within the HTML. Now the calculator could be up to date very simply if wanted! It’s also possible to change the default quantity of splitting choices out there by updating the information within the calculatorData object. Give it a attempt to see should you can’t change the quantity of splitting choices!

I hope you give this venture a go and share your work with the neighborhood! Have enjoyable and blissful coding!



Source link

Tags: ArticleBuildCalculatorJavaScriptTip
Previous Post

Netflix lays off roughly 150 workers amid slowing growth – National

Next Post

FFDP’s Zoltan Bathory Describes Near-Death Experience Feeling

Related Posts

Warp 2.0 evolves its terminal experience into an Agentic Development Environment
Softwares

Warp 2.0 evolves its terminal experience into an Agentic Development Environment

by admin
June 25, 2025
Huawei Cloud rolls out Pangu Models 5.5 to cover more industries
Softwares

Huawei Cloud rolls out Pangu Models 5.5 to cover more industries

by admin
June 24, 2025
Minor update(4) for Vivaldi Android Browser 7.4
Softwares

Minor update(4) for Vivaldi Android Browser 7.4

by admin
June 21, 2025
How AI Medical Coding Software Reduces Errors & Accelerates Billing in 2025
Softwares

How AI Medical Coding Software Reduces Errors & Accelerates Billing in 2025

by admin
June 22, 2025
10+ Best Free Portfolio & Lookbook Templates for InDesign in 2025 — Speckyboy
Softwares

10+ Best Free Portfolio & Lookbook Templates for InDesign in 2025 — Speckyboy

by admin
June 20, 2025
Next Post
FFDP’s Zoltan Bathory Describes Near-Death Experience Feeling

FFDP's Zoltan Bathory Describes Near-Death Experience Feeling

Which 80s vampire movie do you prefer? (Fright Night, The Lost Boys, Lifeforce, Near Dark, etc.) : movies

Which 80s vampire movie do you prefer? (Fright Night, The Lost Boys, Lifeforce, Near Dark, etc.) : movies

  • Trending
  • Comments
  • Latest
Pamela Anderson raves about new natural, makeup-free look: ‘It’s freedom’

Pamela Anderson raves about new natural, makeup-free look: ‘It’s freedom’

October 8, 2023
I Tried Calocurb For 90 Days. Here’s My Review.

I Tried Calocurb For 90 Days. Here’s My Review.

January 8, 2025
Alec Baldwin indicted again for ‘Rust’ shooting that left cinematographer dead – National

Alec Baldwin indicted again for ‘Rust’ shooting that left cinematographer dead – National

January 21, 2024
Bones: All Of Brennan’s Interns, Ranked

Bones: All Of Brennan’s Interns, Ranked

June 15, 2021
A look into CAMPUS, ShopBack’s new Singapore HQ at Pasir Panjang

A look into CAMPUS, ShopBack’s new Singapore HQ at Pasir Panjang

July 2, 2022
Guide for Bagisto Quick Commerce

Guide for Bagisto Quick Commerce

October 16, 2024
User Manual for Odoo Docx Report Builder

User Manual for Odoo Docx Report Builder

November 30, 2024
Aaron Rodgers returns to ‘Pat McAfee Show’ 1 day after being axed by host – National

Aaron Rodgers returns to ‘Pat McAfee Show’ 1 day after being axed by host – National

January 11, 2024
Warp 2.0 evolves its terminal experience into an Agentic Development Environment

Warp 2.0 evolves its terminal experience into an Agentic Development Environment

June 25, 2025
Cybersight Guardian HUD Glasses review – wearable tech that helps keep you safe on the road

Cybersight Guardian HUD Glasses review – wearable tech that helps keep you safe on the road

June 25, 2025
Jeff Bezos and Lauren Sanchez wedding live updates: all the guests attending the $10 million ceremony

Jeff Bezos and Lauren Sanchez wedding live updates: all the guests attending the $10 million ceremony

June 25, 2025
The Importance of Rigorous Research in Lice Treatment Products

The Importance of Rigorous Research in Lice Treatment Products

June 25, 2025
Brittany Cartwright Accuses Jax Taylor of Drinking, Partying Following Rehab Stint

Brittany Cartwright Accuses Jax Taylor of Drinking, Partying Following Rehab Stint

June 25, 2025
TikTok Looks to Gamify Livestream Engagement With Fan Clubs

TikTok Looks to Gamify Livestream Engagement With Fan Clubs

June 25, 2025
Who Is Karmelo Anthony? About His Case & Updates on His Trial – Hollywood Life

Who Is Karmelo Anthony? About His Case & Updates on His Trial – Hollywood Life

June 25, 2025
Over 140 People ‘Pricked’ With Syringes at Music Festival

Over 140 People ‘Pricked’ With Syringes at Music Festival

June 24, 2025
New Self New Life

Your source for entertainment news, celebrities, celebrity news, and Music, Cinema, Digital Lifestyle and Social Media and More !

Categories

  • Celebrity
  • Cinema
  • Devices
  • Digital Lifestyle
  • Entertainment
  • Music
  • Social Media
  • Softwares
  • Uncategorized

Recent Posts

  • Warp 2.0 evolves its terminal experience into an Agentic Development Environment
  • Cybersight Guardian HUD Glasses review – wearable tech that helps keep you safe on the road
  • Jeff Bezos and Lauren Sanchez wedding live updates: all the guests attending the $10 million ceremony
  • Home
  • Disclaimer
  • DMCA
  • Privacy Policy
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites. slotsfree  creator solana token

No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites.

New Self New Life