-
-
Output
Inspiration
My inspiration for this project was to create a faster and easier way to search Wikipedia. I wanted a clean interface where users could instantly get information with just one keyword.
What it does
How we built it
We built the Wikipedia Search Web App using a combination of HTML, CSS, JavaScript, and jQuery. The structure of the page was created with HTML, forming the search bar and results container. CSS was used to design a clean and centered layout with hover effects and smooth animations. The main functionality was implemented using JavaScript and jQuery. When the user types a keyword and presses Enter, the app sends a request to the Wikipedia API using AJAX with JSONP. The response is processed, and each result—containing a title and a short description—is dynamically displayed on the page as a clickable link that opens the full Wikipedia article.
Challenges we ran into
Handling Wikipedia API restrictions and using JSONP Removing old results and showing new ones dynamically Detecting the Enter key properly Designing a smooth and neat UI with CSS Making sure each result linked correctly to Wikipedia
Accomplishments that we're proud of
Successfully built a working web app that fetches real-time data from Wikipedia. Learned how to use APIs, AJAX, and JSONP effectively. Created a clean and user-friendly UI with smooth hover effects. Made search results dynamic, clickable, and easy to explore. Improved our understanding of JavaScript, jQuery, and web development concepts.
What we learned
How to work with external APIs and fetch real-time data Using AJAX and JSONP to handle cross-origin restrictions Creating dynamic content using JavaScript and jQuery Structuring and styling a webpage with HTML & CSS Improving UI/UX through animations and hover effects Debugging issues related to events, API responses, and linking
What's next for Wikipedia Search Web App
Add voice search to make searching easier Improve design with a more modern and responsive UI Add search history so users can revisit previous searches Include filters like images, categories, and related topics Convert it into a full web application using frameworks like React
Log in or sign up for Devpost to join the conversation.