What is this app?
This is an app that utilizes javascript and Wikipedia's MediaWiki api in order to load search results. It is able to keep loading more data and has error checking if invalid information is inputted.
The application fetch's page information from the MediaWiki api and then displays the results for users to look at.
This app was created to help improve javascript and api skills.
Function handleSubmit
This function is used to read the inputted data in the search field by clicking on the search button.
Once the user inputs data and clicks on the search button, the phrase will be passed to the fetchResults function which will determine if it is valid or not.
Function fetchResults
This function is created to fetch results from the MediaWiki api. It will take in keywords and a number so that the url of each result can be fetched. If the api can search and pull this information then it will pass the data to the function displayResults. Otherwise, the function displayErrorMessage will run which will notify users that their input is incorrect.
Function displayResults
Once data is fetched from the api then this function will run. The displayResults function will display the fetched data for the user to see and interact with.
Here, I need to create a forEach loop that will show the fetched results titles, url, and snippet. This information is displayed by using .insertAdjacentHTML. Below this, I added a if statement that will show the "load more" button if there are more results to show.
Function displayErrorMessage
The final function that I created was the displayErrorMessage function. This function will set the result container html to be blank and then using .insertAdjacentHTML, I was able to add a div error message with a paragraph describing the issue as well as a list on how to fix the issue. This will only run if the user inputs incorrect information that the api cannot read.
Conclusion
This project helped me further improve my react skills and taught me how to implement firebase to use it as a backend for apps. I also learned how to use async and await as well as debouncing keywords to help improve the performance of the app. The app was a challenge to make but I was satisfied with the end result.
Some issues that I faced regarding css included color scheme and positioning the fetched results how I wanted. As for javascript issues, I had to figure out how to add error checking so that invalid data inputs would display an error message correcting the user on how to use the app. Overall, this app helped improve my javascript skills and I got to learn more about api implementation.
Thanks for reading!