Fix Mistakes
A little girl is developing a friendship website for herself and her friends, but her website is not turning out the way she wanted. A bunch of things do not work as intended, and she asked you to fix them. When she describes you what she wanted to achieve visually, you get this picture:
In addition, she says that she wanted to have a music player on her menu that would start playing a song when the button “Play” is clicked, but the player doesn’t work.
She made a “select your pony” test, but not all ponies can be selected (she doesn’t know why). And in addition, something is wrong with the test she designed for her friends. Ideally, it should be outputting a message whenever the user types any of the words she mentioned in her test description (“friendship”, “love”, “money”).
How to approach this assignment
- Determine what does and what does not work
- First, solve the visual errors you see (CSS, HTML, Structural issues with Bootstrap)*
- Then, solve JavaScript errors. Approach JavaScript errors this way:
- a) First, look at the functions and see what they are meant to achieve; think back to examples we have studied in class and try to remember examples of which JavaScript functions/concepts you are seeing in the assignment code.
- b) Then, check whether all HTML elements for those JavaScript functions are in place and have the correct IDs
- c) Then, check syntax (missing dots, semicolons, typos, etc)
Clues
- There are no mistakes in this website that deal with concepts or code you haven’t practiced in class before.
- Pay attention to spelling
*Container - row - column structure inside of another column in Bootstrap (lines 56-58) IS NOT A MISTAKE, it’s called nested container.
To start fixing
- Open the “broken” codepen.
- FORK the “broken” codepen (there is a button on the menu above that promps you to Fork the pen). Forking will copy the assignment to your codepen account
- Fix the mistakes on your forked pen and upload the link to the fixed assignment via Blackboard together with a list of mistakes you found (a single doc file). List can be in a point form.
- Good luck!