Brief

In this project, we're going to create a simplified budget.



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 would be a great way to push yourself.

Users should be able to:

NOTE: All interactivity must be handled through JavaScript. In this challenge, we are only writing the HTML and CSS.

  • The user should be able to enter a budget amount. As soon as they move leave the budget amount input field (blur), the summary information should update

  • The user should be able to ender a vendor and an amount into the input fields. When they click on the plus button, the amount should get added to the table on the expenses table on the right.

  • When an expense is added, the summary information should be updated

  • The user should be able to click on the delete an expense button and the row will be removed

  • When an expense is removed, the summary information should be updated

  • The summary information in the footer should display the income, expenses, and balance

  • If the balance is a positive number, the text should be green.

  • If the balance is a negative number, the text should be red.


Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from Amy.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a style guide.

  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

  3. Open the project's README.md file. It has additional information on how the project is structured.

  4. Customize your project/file architecture to your liking.

  5. Happy coding!

  6. 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.

  • Add animation as the information loads, exits, and updates.

  • Add form validation (through HTML)

  • Add the ability to edit an expense


FAQs

  • Can I use libraries/frameworks on these projects? 

    • Of course! We're providing the solution in vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck! 

  • Can I use this project in my portfolio? 

    • Sure! But, be honest about the work that you did