📖 Bible Reference Web App

An interactive, multilingual, and fully responsive Bible reference web application built using HTML, CSS, and JavaScript.

This project provides a structured and engaging way to explore the Bible — including books, statistics, history, and stories — with a clean and modern user interface.

---

🚀 Features

🟢 Phase 1 — Static Website

• Bible Overview Statistics
• Old & New Testament Pages
• Bible Facts (Longest / Shortest)

---

🟡 Phase 2 — Dynamic Data Rendering

• Structured dataset for all 66 Bible books
• Dynamic rendering using JavaScript
• Displays:
  • Book Name
  • Category
  • Chapters
  • Verses
  • Writer

---

🔵 Phase 3 — Interactivity

• 🔍 Real-time search functionality
• 📚 Category-based filtering
• ⚡ Dynamic UI updates
• Combined search + filter system

---

🟣 Phase 4 — Multilingual Support

• 🌍 Language switching system

• Supported Languages:

  • English
  • Telugu
  • Hindi
  • Tamil
  • Malayalam
  • Kannada

• 🏳️ Language flags UI

• 🔄 Instant translation of book names

---

🟠 Phase 5 — Advanced Bible Content

• 📜 Bible History Timeline
• 📚 Famous Bible Stories Section
• 🪟 Modal popup for story details
• Structured and readable content

---

⚫ Phase 6 — UI/UX Improvements (Completed)

• 🎨 Modern and clean UI design
• ✨ Smooth hover animations
• 📱 Fully responsive layout
• 🧭 Improved navigation experience
• 🧩 Consistent card-based layout
• 🪟 Enhanced modal UI with animations

---

📊 Bible Statistics

• Total Books: 66
• Old Testament: 39
• New Testament: 27
• Total Chapters: 1,189
• Total Verses: 31,102
• Approx Authors: ~40

---

🛠 Technologies Used

• HTML
• CSS (Responsive Design + Animations)
• JavaScript (DOM Manipulation & Logic)
• Git & GitHub
• GitHub Pages (Deployment)

---

🌐 Live Website

👉 https://charanepuri.github.io/bible-reference-app/

---

📌 GitHub Repository

👉 https://github.com/charanepuri/bible-reference-app

---

💡 Key Learnings

• Structuring large datasets in JavaScript
• Implementing search and filter logic
• Building multilingual functionality
• Handling real-world Git & GitHub workflows
• Designing responsive and user-friendly UI
• Creating interactive components like modals

---

👨‍💻 Author

Charan Teja Epuri

---

⭐ Project Status

✅ Phase 1 — Completed ✅ Phase 2 — Completed ✅ Phase 3 — Completed ✅ Phase 4 — Completed ✅ Phase 5 — Completed ✅ Phase 6 — Completed

🎉 Project Completed Successfully