Skip to content

Wikipedia Clone is a web app that lets users search Wikipedia articles using the Wikipedia API. It displays search results with clickable titles, links, and content snippets. The app features a light/dark theme toggle and responsive design for all devices.

Notifications You must be signed in to change notification settings

NKWILI/Wikipedia-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ” Wikipedia Clone

A simple and responsive Wikipedia search application built with HTML, CSS, and JavaScript. This project allows users to search Wikipedia articles using the Wikipedia API and view results instantly in a clean, user-friendly interface.


🌐 Live Demo

πŸ”— View Live Project


πŸš€ Features

  • πŸ” Search Wikipedia articles in real-time
  • πŸ“„ View article titles, links, and snippets
  • πŸŒ“ Toggle between light and dark themes
  • πŸ“± Fully responsive design
  • ⚠️ Graceful error handling and loading spinner

πŸ› οΈ Tech Stack

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Wikipedia REST API

πŸ“ Folder Structure

wikipedia-clone/
β”‚
β”œβ”€β”€ index.html        # Main HTML file
β”œβ”€β”€ style.css         # Styling (light & dark themes)
β”œβ”€β”€ app.js            # JavaScript logic
└── README.md         # Project documentation

πŸ’‘ How It Works

  1. πŸ§‘β€πŸ’» The user enters a search term and submits the form.
  2. 🌐 The app fetches matching articles from the Wikipedia API.
  3. 🧾 Results are dynamically rendered with title, link, and snippet.
  4. πŸŒ— A theme toggler allows switching between light and dark modes.

πŸ”§ Setup Instructions

To run the project locally:

# Clone the repository
git clone https://github.com/your-username/wikipedia-clone.git

# Navigate into the folder
cd wikipedia-clone

# Open the HTML file in your browser

βœ… No build tools or dependencies needed.


🧠 What I Learned

  • βœ… How to work with external APIs (Wikipedia API)
  • βœ… Using async/await for asynchronous operations
  • βœ… DOM manipulation and event listeners
  • βœ… Building a theme switcher with JavaScript and CSS

✨ Future Improvements

  • 🎀 Add voice search support
  • 🟨 Highlight keywords in the search result snippets
  • πŸ–ΌοΈ Include article images or infobox data
  • πŸ’Ύ Save recent searches using localStorage

πŸ™Œ Acknowledgements


πŸ“„ License

This project is licensed under the MIT License.



Let me know if you want help customizing this for deployment on GitHub Pages or want a dark-themed badge section too.

About

Wikipedia Clone is a web app that lets users search Wikipedia articles using the Wikipedia API. It displays search results with clickable titles, links, and content snippets. The app features a light/dark theme toggle and responsive design for all devices.

Resources

Stars

Watchers

Forks