Bonus Homework Week 3
Introduction
For this week’s bonus material, you’ll be tackling some more involved problems to put what you’re learning into practice.
As usual with the bonus homeworks, this will be done on your local machine, rather than on a sandbox like freeCodeCamp.
These problems are meant to make you think, so I’m not giving you as many hints as I could do. If you find it hard to figure out exactly what you’re supposed to be doing here, then leave a message on the week-3 channel on Discord, and I can explain in more detail!
Assignment
1) Set up your JavaScript environment | 20 mins
To start off for this week, I want you to create some files on your computer, and open them up with VSCode.
If you didn’t do any of the bonus homework material yet, then check out week 0’s bonus homework, with has some information to help get started with VSCode.
Make a new folder called week3-problems
with a blank index.html file as normal, and a file called main.js
alongside it:
week3-problems
│ index.html
| main.js
Once you have this set up, make sure to include your main.js file from inside your HTML file. Your index.html file should end up looking like this:
<!DOCTYPE html>
<html>
<head>
<title>Week 3 Problems</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Finally, write a simple console log at the top of your main.js file, and make sure that your message shows up in the developer tools console:
console.log("Hello World")
2) French Calculator | 45 mins
How old or young is “too old” or “too young” for a romantic partner? There’s a useful shortcut to try to figure this out called The French Rule.
According to the rule, to be socially acceptable, your crush needs to be no older than twice your age minus 7, and no younger than half your age plus 7. This doesn’t tend to work for people less than 14 years old!
I want you to write a calculator that uses this rule to calculate whether your crush is too young or too old for you.
Write a function called frenchCalculator
. Inside this function, create 2 prompt()
statements to figure out the user’s age, as well as their crush’s age.
Calculate whether the french rule says that they are too old or too young for their crush. If the user is too old or too young for their crush, let them know with a console log. If the crush is of a socially acceptable age, then tell them to ask them on a date!
If you’re totally stuck and can’t figure out how to get this to work, then you can take a peek at my solution here.
3) Mario’s pyramid | 1 hour 30 mins
For this exercise, I’m stealing a great problem from Harvard’s introduction to computer science course. We’ll be doing this with JavaScript rather than with C, but the problem is more or less the same! Check out the original homework here, which should give you some clues and inspiration.
If you’ve ever played the Nintendo game Super Mario Brothers before, then you might have noticed pyramids like these littered throughout the game:
We want to make a program that recreates this pyramid, using hashes rather than blocks. So ultimately, we want to have something like this:
One way of getting the desired result could be to write something like this:
For this exercise, I want you to write some code that generates this same console output, using what you now know about loops.
You won’t have step-by-step instructions for this, but here are a few tips:
- You’ll want to use a loop to make a separate console log for each line.
- You’ll also want to use a loop to figure out how many hashes/spaces to print.
- There are always 8 characters on each line!
This is quite a challenging problem! Check out the CS50 introduction to this exercise for some more tips, and to help you figure out how to approach it.
Once again, as an absolute last resort, you can see my implementation of this problem here
4) Mario’s pyramid generator | 1 hour
At this point, we should have some code which uses loops to build a pyramid of 8 hashes in height.
For this exercise, I want you to create a function called buildPyramid
, which will create a pyramid of a particular height. You should ask the user how high they want the pyramid to be, and you should use that value to build a pyramid of that many bricks tall.
For example, when the user puts in a height of 3, then we should print this:
Alternatively, if the users puts in a height of 5, then we should see this:
Again, a few hints which might come in handy:
- You’ll want to keep prompting the user for a pyramid height until they give you an acceptable value.
- Make sure that the value that they enter in the prompt is between 1 and 20, otherwise ask them again!
- You can use something that we covered in this week’s lecture to run code like this continuously!
5) COVID-19 client screening | 1 hour
In this exercise, I want you to imagine that you’re running a hair salon. New government guidelines came into place in your country recently, requiring all your clients to fill in some information before they can book an appointment.
Every day, you’ll get new data from your clients, and you’ll need to check whether they might have coronavirus using this flowchart:
- If somebody has a fever (body temperature > 38 degrees celsius) and shortness of breath, then they might have coronavirus.
- If somebody has a fever but no shortness of breath, then they could have the flu.
- If somebody has no fever and itchy eyes, then they probably just have allergies. In that case, they count as healthy.
- If somebody has no fever, no itchy eyes, but has a runny nose, then they might have the common cold.
- If somebody has no fever, no itchy eyes, and no runny nose, then they are probably healthy.
To save you from going through this process manually yourself, I want you to write some JavaScript that does this for you!
Write a function called screenForCOVID
, which takes in an array of objects, and console logs a result for each of your clients.
- If the user might have coronavirus, log that the user might have coronavirus and that we need to cancel their reservation.
- If the user might have the flu or the cold, log that the user might have the flu/cold, and that they need to wear a mask during their appointment.
- If the user just has allergies, or if they’re healthy, just log that they’re healthy.
Use the starter code here to get started. You can either copy this into your main.js file, or you can play with it in the playcode development environment. This includes the first day of survey results.
Here’s my solution if you need it!
6) Watch/read the following materials | 1 hour 48 mins
As a final step, here is a list of extra materials which might be interesting.
- [Video] JavaScript Loops | Programming with Mosh | 6 mins
- [Article] Function Expressions | JavaScript.info | 20 mins
- [Article] How to use the switch statement in JavaScript | DigitalOcean | 20 mins
- [Article] JavaScript for Cats | Max Ogden | 30 mins
- [Video] JavaScript Pro Tips - Code This, NOT That | Fireship | 12 mins
- [Video] Code tells you how, comments tell you why | Coding Horror | 20 mins