Weekly Web Dev Challenge: Budgeting Tool

Hi everyone! I’m Himani.

When I was learning about web development I came across this amazing place where we can code and that too in an interactive manner. Yes you guessed it right! Scrimba!! It also organizes weekly web dev challenges which are not only fun but also helps us in improving our skills to a great extent. Thank you Scrimba for these amazing challenges!

I recently solved the Budgeting Tool challenge. Well, the difficulty was intermediate.

Prerequisites for the challenge:

1. HTML5
2. CSS3
3. JavaScript

So I will try to explain it in an easy fashion. Let’s Begin!

The starting boiler plate.

As you can see from the above image it contains some starter code. Three files namely, index.html, index.css, index.js. The CSS file and JavaScript file was completely blank.

Basically the challenge was to enter some amount into first input bar( which I call it funds) and some amount into the second input bar (which I call it price). So if the amount in funds ≥ price I can definitely purchase it!

Woohoo Happy Shopping!

or else I need to save some money to purchase it!

Also there is button named “Give it to me straight” which basically tells us whether we can buy it or not.

Let’s first build the logic and then we will style the things. Inside the index.js we will write the logic for this challenge. Firstly we’ll get hold of button.

After getting the button we need to addEventListener to it. The event would be click. Inside the function we will get hold of the input bars namely Funds and Price.

You might be wondering why we have used Math.floor. Well, without Math.floor it returns a string. The .value returns the value inside the input bar. After this, we need to setup our good old if-else statements. But before that I just added a div tag after the button and gave it id of index. Inside my JavaScript file I will get hold of that div with id of index.

Also, I have created a element “h1”. Basically, heading will be appended to the div created.

Logic of the challenge

1. Check whether the input bars have some values if it doesn’t contain then tell the user to enter some amount.
2. If one of the input bars are kept empty there will be alert saying “Please enter the amount in funds/price”
3. Finally, funds ≥ price Woohoo! Happy Shopping else Uh-oh! Save a little more.

Last but not the least append the heading to the div created.

Lets have a look to the styles.

Styles folder contains some basic CSS. Nothing much to explain. From the stretch goals I have tried the change the theme. It’s simple you just need to change the background color and color and do some toggling and that’s it!

Congratulations! Challenge completed 🥳🥳.

The scrim is attached for your reference.

Note at 2:23

Thank you for reading.

Ps: This is my first post on medium. Hope you liked it! :)