i have a four files and a folder inin my project one of each html ,css,js,json and a few images i have used in my project. html holds the makr up and style for the styling of my project the solution is provided in the Javascript file
i defered my file on html first then started by declaring variables for my functions that is targeting the html DOM elements i need to manipulate the markup.then proceded to create 3 functions in my file the first of which i used to fetch data from the json file.
next i build the movie names in my second function using a for loop to iterate through the array of data i was able to fetch.
after that i proceeded to build the default display function
that is what appears when the page loads and caled it inside
the first function,the one used to fetch data
i then retracted to finish my second function and called it inside the first function (that fetch's data) ,so as to display the data. I created it based on the basis of the loop to print out all the data required and an event listener on the movie names to display the required data ,i then proceeded to add an event listener to the button so that it would be able compute available tickets and display sold out when the computation results to 0.
in conclusion this is what i used for my code challenge in terms solution:-
- Functions
- Fetch method to get data
- Control flow statements
- Event listeners
- I did DOM manipulation on the markup
Overall it was fun to be able to combile all of the above and be able to use them on my project.