World Cup Hub
1. Project Requirements
a. Query UI Widget/Plugin
b. Use Ajax/API
c. Web Storage
d. Slideshow/Carousel
e. Single page site
2. What did these requirement inspire me to make?
So when I was brainstorming about what and how I could use these JavaScript requirements, I thought about many different websites I could make but I ended up going with my idea to create a FIFA World Cup 2022 website themed with the host country Qatar's colors of white and red with some hints gold because of the golden world cup trophy. I thought since the World Cup is starting up, this could be a cool project to make. I figured the odds of these soccer API's getting updated and being abundant for me to choose from is probably going to be at its peek, and that means less time dealing with weird or outdated API's that I could cause me problems dealing with. I knew I could find a cool API for world cup stats that I could retrieve and display to the user, but I ended up finding something even better when I found the API that I was going to use. Initially I thought I was going to create cards that showed match stats between two competing teams and create all the group standing from real-time data generated from the API called api-Football but I was shocked and pleased to see the API already had widgets that I could easily implement to do that for me so I opted to use the API to grab flag images of countries who weren't in the cup and put that in a carousel and put some informative info of why these 5 countries that people expected to easily be in the world cup didn't even make it through qualifiers in an accordion. If the user just wants to see what teams quickly what teams aren't in the cup then the carousel will easily let them know, but if they are interested in knowing why then they can click on each accordion tab and find out. So the accordion and carousel and widgets only filled two of the requirements, using the API to display country flags on the carousel plugin I used made it 3 requirements filled, and the site was designed to be a single web page, so I had 4 out of 5 of the requirements planned out. Then I had that idea to use the use the last requirement of web storage to implement a dark mode theme that that browser will remember through local storage. I then filled my last requirement in my planning process with that idea. I had many other ideas for how I thought I could implement, but some of them got too complicated and I decided I could revisit those ideas later if I had more time.
3. The Goal and Purpose of the site for the user
The Purpose of the site is to be a place where users can go to get a quick update about the games, teams, and players in the world cup as well as some insight on why certain big contenders who didn't make the cut aren't playing. The site can give real-time data thanks to the API on stats, live match scores if a game is being played, and more.
4. Steps I Took
I had to do a crazy ton of research and gathering to figure which API I was going to use, how to use the API from countless hours spent trying to understand the documentation and all sort of troubleshooting on figuring out how to extract the data from the API as the documentation wasn't very helpful with that, and troubleshooting errors I had with the web store dark mode switch, and carousel. The easiest to implement was the accordion which I used jQuery for. In my research I discovered multiple soccer API's but ended up with Football API. I had the hardest time trying to retrieve my data as the way I learned how to was a little bit different to access the data. For the carousel I ended up using Owl Carousel which worked great but at first but ended up acting weird in the end. Lastly, I had the hardest time getting web storage to actually be functional. I probably spent more hours testing and trying to find a solution to the problems I faced then the time I spent researching and planing combined. In the end, I ended up with some better, thanks to the Football API. Here is my initial planning process I wrote on my white board and mock-up at the time.
5. Tools I used
I used my whiteboard for my planning process, used illustrator for the mock-up. Then I used Football API for my soccer widgets, and retrieving data from the API, Owl carousel for my carousel, and used VS code to edit my code.
6. Whats next for this project?
I wanted to use web storage originally to save a persons bet that they might be wagering and show them the return in their bet when the match their betting on ends. So, I would of added that if I had more time. I also wanted to add more content for users to enjoy and clean up the website more. I enjoyed using Football API when I stayed persistent and didn't end up using postman or something to make it easier on myself with what I wanted to do but that really did kill a lot of my time, but I gained some vital experience. Here are some screenshots of my website.
