🌟 My Reading Buddy 🌟

Welcome to My Reading Buddy! This is a fun and interactive web application designed to help young learners practice their reading skills. Personally, this tool was specially created to help my students in english text reading. At this time, they are 4-7th graders and are strugling to read so I developed this tool in a hurry.

✨ Features

• Text-to-Speech Reading: The core feature of the app is its ability to read any provided text aloud.

• Word Highlighting: As the text is being read, the current word is highlighted, making it easy for readers to follow along.

• Custom Text Input: Users can type or paste any text they want into the application.

• Pre-loaded Passages: Includes a dropdown menu with 50 built-in reading passages suitable for 5th-grade level readers.

• Adjustable Reading Speed: The speed of the narration can be easily adjusted to match the reader's pace, from slow (🐢) to fast (🐰).

• Adjustable Pause Between Words: Users can control the duration of the pause between each word.

• Interactive Controls: Simple controls to play, pause, stop, and reset the reading session.

• Click-to-Speak: Click on any word in the text to hear it pronounced individually.

• Progress Tracking: A visual progress bar and statistics show the total words, current position, and words remaining.

• Keyboard Shortcuts: Use the SPACEBAR to quickly play or pause the reading.

• Fun & Engaging UI: A colorful and friendly interface designed to be appealing to children.

🚀 How to Use

1. Open the Application: Open the index.html file in your web browser.

2. Choose Your Text:

   • Select a pre-loaded story from the "Choose a pre-made story" dropdown menu.

   • OR type/paste your own text into the text area.

3. Start Reading: Click the "🚀 Let's Start Reading!" button.

4. Control the Playback:

   • Use the "▶️ Start Reading" button to begin. This button will change to "⏸️ Pause".

   • Use the "⏹️ Stop" button to end the session completely.

   • Use the "🔄 Start Over" button to go back to the beginning of the text.

5. Adjust Settings:

   • Use the "Reading Speed" slider to make the voice faster or slower.

   • Use the "Word Pause" slider to change the time between words.

📁 File Structure

For easy management and deployment, the project is structured into three main files:

• index.html: Contains the main structure of the web page (the HTML content).

• style.css: Contains all the styling rules to make the application look great (the CSS).

• script.js: Contains all the application logic, including the reading functionality and the passage data (the JavaScript).

To set this up, download all the three files and save it in a folder named folder-name

🌐 Deployment on GitHub Pages

You can easily host this tool for free using GitHub Pages.

1. Create a GitHub Repository: Create a new public repository on GitHub.

2. Upload Files: Upload your index.html, style.css, and script.js files to the repository.

3. Enable GitHub Pages:

   • In your repository, go to the "Settings" tab.

   • In the left sidebar, click on "Pages".

   • Under "Build and deployment", select the branch you want to deploy from (usually main or master).

   • Click "Save".

4. Access Your Site: GitHub will provide you with a URL (e.g., https://your-username.github.io/your-repository-name/). Your Reading Buddy will be live at that address!

Happy Reading! 📚