Lab 12 Reflection

In this lab, lab 12, I was tasked with using J query and Css to make a website based on a subject that I dislike and make a set of six questions and six answers pertaining to that subject. The subject I chose was Music History, taught by Mr. Evans and the questions I asked were: What is Music History? Who is my Music History teacher? What is the Middle Ages? What is the Renaissance? What is the Baroque period? And lastly, What is the Classical era?. These six questions had their own distinct and detailed responses that explain what they are and their influence on history.

The previous paragraph explains the content and what it consisted of, this paragraph is about the coding I used during this project. To start off, the J query I used for this lab was link through this piece of code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

This was the code I used to allow the following function to operate properly. Based on the 15 minute video on J query events 201. I learned many things like $( dd ).hide() in order to hide the content that is underneath the text boxes. $( dd ).show() is the contrary and the supplement for these two could be $( dd ).slideup() or $( dd ).slidedown(). One of the ones from the video I found most interesting was $( dd ).toggle(), by toggling you have full controller over what is being managed in terms of the content in the boxes, so instead easily hovering over the box, the content won't reveal until you click the box. Moving on, my code consisted of other things  such as the tags d1, dt and dd. Simply to explain how I used these tags are that the <dd> tag is used to describe a specific term or name. So in the case of this lab, when answering the question what is Music History, under the dd tag it would say : "Music History is the study of the history of past forms of expression through sounds. Time Periods consist of the Middle Ages, the Renaissance, the Baroque period as well as the Classical Era and so on. Adding on there are a various amount of composers through these time periods such as Mozart, Claudio Monterverdi and many more". The dt tag on the however supplies the name for the dd tag, so in the case of the lab, all six questions fall under the dt tag. Lastly is the d1 tag, it is the tag that defines the whole entire description list. Without counting the script and the J query I also added a Css by the name of style.css, it consisted of many things such as alignment, border lengths and etc.  There is a code at the end of the Css that is essential to the lab and it is ".hide { display: none;}". Without this the content will have trouble performing its proper function which is to not show any boxes opened besides the one that is hovered over. Overall, I learned a lot about this lab and plan to learn more about J query in the future.