Challenge #7
Brief
In this project, we're creating a tip calculator.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.
Users should be able to:
Input a different bill amount and number of people
Select a percentage to tip. Only one percentage can be selected at a time.
Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of CSS.
Getting Started
To get started, download the zip file (within the appropriate section of Podia). This includes all the project assets you need to get started: Figma file, images, and a style guide.
Take a look around. Look at the project's Figma file and the style guide.
Open the project's README.md file. It has additional information on how the project is structured.
Customize your project/file architecture to your liking.
Happy coding!
Once you're finished, share your work using #adventofcss
Taking your Project to the Next Level
Use a framework or libraries like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.
Animate the text values in.
FAQs
-
Can I use libraries/frameworks on these projects?
Of course! We're creating the solution in vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
-
Oh no! I'm stuck!
Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.
-
Can I use this project in my portfolio?
Sure! But, be honest about the work that you did
