You've grown tired of waiting until the next time you get a fortune cookie to find what your future holds and have decided to take things into your own hands. Using your knowledge of CSS, HTML, and JavaScript you'll create your very own personal fortune teller, so you can get your fortune fix whenever you need.
You've been provided with an image that you can use for your fortune teller, but feel free to replace this with whatever image you trust to see into the future. Your goal is to recreate the example shown below. Each time the image is clicked on, the fortune displayed should change randomly.
Here are some general steps to get you started...
- Write your HTML file, you'll need to include the image and some kind of text element.
- Give your page some very basic styling, you can always come back to this, at this point we just want readability.
- Write some JavaScript in your script.js file. Your code should detect when you click on the image and change the text displayed. You may want to think about...
- What type of variable should each fortune be? How will you keep all of these fortunes grouped together and easily accessible?
- How do you generate a random number that will be within valid index bounds?
- How do you get elements from your HTML into your JavaScript?
- And so much more!
Finished up early and want to keep going?
- Style your page nicely so other people will trust your website for fortunes too.
- Have two fortune tellers for your user to choose from, have each one give a different type of fortune. For example, one could be very philosophical while the other told you things like "Don't forget to tie your shoes today!"
- Give your fortune teller a yellow border when your mouse is over it so it looks like it's glowing with magical powers.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent