I’ve been banging my head against a wall for a bit with my latest freeCodeCamp project, so I decided to take a break for about a week and play around with a couple other things. I find it really helpful to do that, and I’ve been trying to take a step back and look at the whole picture in various parts of my life- it’s so easy to get stuck focusing and worrying about a single thing, that you can’t see a simple solution!

I joke a lot about the hours I work as a pastry chef, and one day during a conversation with my co-workers I realised that few of them knew how to figure out what their hourly wage was. I was pretty shocked, but then, these guys hadn’t really read their contracts either… I had an idea for a little web page that people could use to figure out exactly how much they earn per hour. I called it “What Am I Worth?”

You can check out my project over on codepen

I had a lot of fun making it- it’s pretty simple, and it was a nice little javascript exercise for me. I used vanilla javascript for this project- I realised part way through that I could have done some things a bit easier and my code would have been a bit cleaner with jQuery, but I was far enough along that I wanted to see if I could do it with javascript alone. I made an input for each day of the week, and an additional one for an annual salary. Pressing the button at the bottom divides your annual salary by 52 [weeks of the year], and then by your hours worked that week, giving you your hourly wage for the week. This is helpful [really?? is it??] for people like me who might work different hours each week, and are curious about how much they make hourly. Generally, it’s a legal requirement to be paid minimum wage- so if you ever drop below that, you’ll probably be getting paid overtime, but I still think it’s nice to keep an eye on things like wage, taxes- all that jazz.

I contained the bulk of the code within a div element [using a form forced the page to refresh,, but I wanted the hours entered to still be visible, so I used a div instead,] and used inputs with the number type for the hours worked each day and the salary. I also attempted to use max and min attributes for the hours worked inputs, but these haven’t been working because I used a button [vs. a submit input] to start the javascript function. I’ve also added the required attribute to the salary input, but again, because I went with the button, that’s not working. I do have an alert launch if the field is left blank, or if it just contains a zero. I would like to eventually change the button to be a submit input, but I would have to add a lot of code that I just don’t understand yet to make the javascript function run and return the result without refreshing the page, so for the time being I’m leaving it as is.

Some of the issues that I ran into really made me learn a lot about javascript. Initially when I ran the function I was getting some pretty small results [I’m talking fractions of a cent per hour! -defo not cool!!], and I realised [all by myself!! I should totally get a gold star!] that I was treating the hours that were being entered as strings! [D’oh!!] Once I had the number of hours being treated as… numbers, I ran into a different problem- I was seeing NaN an awful lot. Which seemed weird, because I *thought* I had just fixed that. I figured that the easiest way to fix this would be to make sure that there was a number in each input. That was easy enough to do- I used if statements to check if there was a value in the input, and if there wasn’t it would be given the value 0. I even managed to figure out why max, min, and required weren’t working by myself, and then did a bit of research to see what I could do instead.

I’d quite like to keep playing around with this project- I think that there could be the opportunity to add features, and it might be something that I could build on as I learn more. I feel like I’ve taken a nice little step back now anyway, so I’m looking forward to getting back to my freeCodeCamp project!