🌐 Language Learner

Learn Smarter. Practice Daily. Speak Confidently.

A Fully Responsive, Single-File Language Learning Web App — Flashcards • Quizzes • Instant Translation • Progress Tracking

---

📖 Overview

Language Learner is a fully responsive, single-file web application designed to help users learn vocabulary, practice through quizzes, translate text instantly, and track their learning progress — all in one clean, elegant interface.

Built entirely with vanilla HTML, CSS, and JavaScript (no frameworks, no build tools), the entire app lives in a single index.html file, making it lightweight, portable, and trivially easy to deploy anywhere.

---

📸 Project Preview

---

🚀 Key Highlights

✅ 34 Supported Languages	✅ Interactive Flashcards	✅ Multiple-Choice Quiz Mode
✅ Instant Translator with TTS	✅ XP & Daily Streak System	✅ Per-Language Best Scores
✅ Offline Dictionary Fallback	✅ Fully Responsive Design	✅ Zero Dependencies / Single File

---

🎯 Core Features

📇 Flashcards

• Flip-style flashcards covering Vocabulary, Phrases, and Grammar
• Organized into categories: Greetings, Food, Family, Colors, Numbers, Objects, Animals
• Shuffle mode for randomized practice
• "I Know This" tracking to mark mastered words
• Built-in pronunciation playback via text-to-speech

🎯 Quiz Mode

• Multiple-choice questions generated from the active language and category
• Real-time scoring with instant right/wrong feedback
• Earns XP on completion (10 XP per correct answer)
• "Review Answers" and "Try Again" flows for reinforcement

🌍 Instant Translator

• Translate any English text into the selected target language
• Powered by the MyMemory Translation API, with a built-in offline dictionary fallback for common words — so core vocabulary still translates even without network access
• One-click copy and text-to-speech playback for translated results
• Request timeout handling (auto-aborts after 7 seconds) with clear error messaging

📊 Progress Tracker

• Tracks Total XP, Day Streak, and Words Known
• Automatic daily streak logic — increments on consecutive days, resets if a day is missed
• Best Scores leaderboard-style view per language
• Progress is saved persistently and reloaded automatically on return visits

🔊 Text-to-Speech

• Native browser Web Speech API integration
• Correct locale-specific pronunciation for each of the 34 supported languages (e.g. es-ES, ur-PK, zh-CN, ja-JP)

🌐 Multi-Language Support

Supports 34 languages including Spanish, French, German, Italian, Portuguese, Urdu, Hindi, Arabic, Chinese (Simplified), Japanese, Korean, Russian, Turkish, Dutch, Greek, Polish, Swedish, Persian, Bengali, Vietnamese, Thai, Indonesian, Hebrew, Swahili, Ukrainian, Punjabi, Pashto, Malay, Romanian, Czech, Hungarian, Finnish, Danish, Norwegian, and Filipino — each with its own flag icon and speech locale.

---

🏗 System Architecture

                    User (Browser)
                        │
                        ▼
           Single-File HTML/CSS/JS App
                        │
        ┌───────────────┼────────────────┐
        │               │                │
        ▼               ▼                ▼
  Offline Dictionary  MyMemory API   Web Speech API
  (Instant, built-in)  (Live Translate) (Pronunciation)
                        │
                        ▼
              Persistent Key-Value Storage
           (XP, Streak, Words Known, Best Scores)

The app first checks its built-in offline dictionary for common words (instant, zero-latency translation); if the word isn't found locally, it falls back to a live request to the MyMemory Translation API.

---

🛠 Technology Stack

Layer	Technology	Purpose
Structure	HTML5	Semantic app layout
Styling	CSS3 (Custom Properties, Flexbox/Grid, Keyframe Animations)	Responsive, animated, themeable UI
Logic	Vanilla JavaScript (ES6+)	State management, quiz logic, flashcard deck handling
Fonts	Google Fonts — Fraunces, Inter, JetBrains Mono	Editorial-style headings with clean, modern body text
Translation	MyMemory Translation API	Live English → target-language translation
Speech	Web Speech API (SpeechSynthesisUtterance)	Native, zero-cost text-to-speech
Persistence	Key-value storage (window.storage)	Saves XP, streaks, words known, and quiz history across sessions

---

🗄 App State Structure

state = {
  targetLang: "es",
  category: "All",
  deck: [],
  deckIndex: 0,
  translationCache: {},
  quiz: { category: "All", num: 8, questions: [], index: 0, score: 0, pool: [] },
  progress: { xp: 0, streak: 0, lastActiveDate: null, wordsKnown: {}, quizzes: [] }
}

Field	Purpose
targetLang	Currently selected language code (e.g. es, fr, ur)
deck / deckIndex	Active flashcard deck and current card position
translationCache	In-memory cache to avoid repeat API calls for the same word
quiz	Tracks the active quiz session — question pool, index, and running score
progress	Persisted learning progress — XP, streak, mastered words, and quiz history

---

📂 Project Structure

Language-Learner/
│
├── assets/
│   └── POST_Language_Learner.png
│
├── index.html          # Complete single-file application (HTML + CSS + JS)
└── README.md

---

🚀 Getting Started

Since Language Learner is a fully self-contained, single-file application, no installation, build step, or server is required.

1. Clone or download the project

git clone https://github.com/abdulqadeer-44/Language-Learner.git
cd Language-Learner

2. Open the app

open index.html   # or simply double-click the file in any modern browser

💡 No dependencies, no npm install, no environment variables — just open and start learning.

---

📡 External API Reference

Service	Endpoint	Purpose
MyMemory Translation API	https://api.mymemory.translated.net/get?q={text}&langpair=en|{code}	Live English-to-target-language translation

---

📈 Performance Highlights

• Instant load — no build step, no server round-trip for the core app
• Offline-first translation for common vocabulary via a built-in dictionary
• Lightweight in-browser TTS using the native Web Speech API (zero additional API cost)
• Smooth flip, slide, and progress animations for an engaging, app-like feel
• Fully responsive across desktop, tablet, and mobile

---

⭐ Roadmap

• Spaced-repetition scheduling for smarter flashcard review
• User accounts with cloud-synced progress across devices
• Audio-based listening comprehension exercises
• Sentence-building and grammar-correction exercises
• Leaderboards and social/friend progress comparison
• Downloadable offline language packs

---

🤝 Contributing

Contributions are always welcome!

1. Fork the repository
2. Create a new feature branch
3. Commit your changes
4. Push your branch
5. Open a pull request

git checkout -b feature/new-feature
git commit -m "Add new feature"
git push origin feature/new-feature

---

👨‍💻 Author

Abdul Qadeer Sikandar Software Engineering Student · University of Gujrat Full Stack Web Developer

💼 LinkedIn · 💻 GitHub

---

🌟 Support

If you found this project useful, please consider ⭐ starring the repository, 🍴 forking it, and 📢 sharing it with others.

📜 License

Licensed under the MIT License — free to use, modify, and distribute for educational purposes.

Made with ❤️ by Abdul Qadeer Sikandar