tip-calc
A practice project for javascript frdg.tngl.io/tip-calc
Star 0
Fork 0
Watch
8 1 0
Files
README
tailwindcss
.gitignore
index.html
LICENSE
README.md
scripts.js
README.md

Fridge's Tip Calculator

HTML5 CSS JavaScript TailwindCSS

#

This is a project I made to learn some of the basics of javascript. I do now have a better understanding of the syntax and various stuff that you can use in js. It also helped me get TailwindCSS freshened up again.



What is it? #

As the name suggests, this is a tool to calculate tips. You enter how much the bill is, what % you want to tip or select a preset and then the app returns the amount to tip (rounded to 2 decimals). The amount to tip updates whenever you change a any one of the values.

Screenshots #

Screenshot 1


Running locally #

Dependencies #

Making changes using TailwindCSS #

  1. Clone the repository: git clone https://tangled.org/frdg.eu/tip-calc
  2. Change directory into the project files: cd tip-calc
  3. Install TailwindCSS: npm install tailwindcss @tailwindcss/cli
    • Note: you might have to approve an install-script. If this issue appears, run npm install-scripts approve @parcel/watcher
  4. Run TailwindCSS: ./node_modules/.bin/tailwindcss -i ./tailwindcss/input.css -o ./tailwindcss/output.css --watch --minify
    • Note: the --minify flag is optional, but it reduces the output.css file size.
  5. Make changes to the visuals of the website. If neccesairy, refer to the TailwindCSS docs.

Running a live server #

To preview your changes, I recommend you deploy a live server. This way you can instantly see what changed without having to reload the page. How to run a live server in VSCode is described below.

  1. Open VSC and head over to the plugins tab (usually on the left).
  2. Search for ritwickdey.LiveServer and install it.
  3. Open the project folder in VSC and click "Go Live" on the bottom bar (the button should be somewhere on the right-side)
  4. It should automatically open the website, but if it doesn't, it's usually located at http://127.0.0.1:5500/.

Licence #

This project is released into the public domain under the Unlicense. Do whatever you want with it.