Dom manipulation web game based off the beloved television show that quizzes contestants with a multitude of popular genres. Assigned to my software cohort for our first official project, the requirements were a two player game that included multiple rounds of questions, a win state, reset button, all built within one of each a HTML, Javascript and css file. As a dom manipulation based project, the Javascript file was the center focus as majority of our code was implemented and modified using different elements/functions within the file. The projcet is comprised mostly of looping through objects and arrays, and creating and calling functions. Before any code was written code we created a wireframe layout that demonstrated what interface elements would exist on the page. Defining the main variables, players, and classifying each object in our questions array with an index style ID to effectively loop the content were all seamless but the real challenges occured afterwards.
Along the process my partner and I endured many challenges while creating the project. We ran into many problems along the way from buttons not displaying to cards, data not being placed in its proper location within the cards, the flip event listener not effetively functioning on the cards. The most challenging part of the project was making sure that each card held the correct data of questions and that it incremented the score properly according to value on front of card. We origanally planned a text prompt within each card that allows players to input a typed answer to generate to the score. All resources we came across took the boolean/multiple choice approach. At the start we followed the same logic of boolean answers, but later decided the project would be more suitable if we were able to make the game text based rather than multiple choice, to closer mirror the actual Jeopardy experience. Of course utilizing and modifying the CSS.
Working on this project has shown us how to approach problems with a programmer's mentality, and to be more clear about what exactly needs to be done. This projcet has shown me how to handle and parse through data in an effective manner, and how to consider your approach when trying to recieve one specific outcome. Getting more familiar with DevTools was extremely vital in this project. We were too focused on the content within the actual VS code and at times avoided the use of DevTools to properly inspect the issues at hand. DevTools allows you to see mistakes/bugs immediately, view messages, and helps you find solutions in real time. DevTools was also key for us in our css styling as we were able to test out a variety of properties on the actual console without modifying the code. Overall I'm really proud of how we created functions to handle everything and called on them as needed, placing the function call exactly where it needs to be.
Source used for input text - https://www.w3schools.com/tags/tag_input.asp
Source used for reset button - https://stackoverflow.com/questions/5480945/refreshing-page-on-click-of-a-button
Source used for ternary statements - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Source used for card flip animation (big thank you to laura) - https://marina-ferreira.github.io/tutorials/js/memory-game/
Youtube source - https://www.youtube.com/watch?v=vYEkEMfoi1c