Codecademy Practice
Pizza challenge
Challenge: Division isn’t always exact, and sometimes you will write programs that will need to deal with the leftovers as a whole number instead of a decimal.
Write a program to evenly divide pizzas. Prompt for the number of people, the number of pizzas, and the number of slices per pizza. Ensure that the number of pieces comes out even. Display the number of pieces of pizza each person should get. If there are leftovers, show the number of leftover pieces.
Example:
How many people? 8
How many pizzas do you have? 2
8 people with 2 pizzas.
Each person gets 2 pieces of pizza.
There are 0 leftover pieces.
Step by step instructions:
HTML
-
Use again pairs label/input to collect data.
-
Make sure that the user can only enter numbers. Is there an input type that allows you to ensure that?
-
Dividing by zero is nasty. Is there any attribute you can add to the input so prevent people from entering a zero?
-
Use a button again to trigger the calculation.
-
Use any HTML element to print the output.
CSS
-
Style the challenge as in the video
-
Use transitions to achieve the animations you see.
-
Did you know that you can put almost anything as the content of a pseudo element? Even emojis! Find a nice arrow to use for the button.
-
The font is Lato, from Google Fonts
-
The background is #E96D65, the input dashes are #b14943, the placeholder text is #b14943, the background of the inputs on focus is #76C3BD, the backgrounds of the button and it’s pseudo element are #76C3BD and #69B1A9, but on hover they are #69B1A9 and #58a199
JS
-
The number of slices is always 8. Since this number won’t change, make it a constant.
-
Are there any Math methods you can use?
GIT
-
Work on a branch other than master in a new project.
-
When you are finished, create a pull request as you did in the previous challenge.
DEBUGGING
Use your browser’s developer tools as you did in the previous challenge.