Quranly App 😊
Links :tv:
Purpose :pencil:
Build a website that views Surahs of the Holy Quran,
Build a website that recite's Surahs of the Holy Quran,
User Stories :books:
As a User trying the use Quranly App
- I want to visit your site and be able to view an ayah text of the holy quran
- I want to visit your site and be able to to play a recitation of a surah in the quran
- I want to see the current Date and Time
- I want to easily view the site when browsing on my mobile, tablet or desktop so that I can understand the sites content easily on whatever device I choose to view it in.
- I want to be able to go forward or backward in the recited surah
- I want to be able to mute the sound of the recitation
- I want to see the name of the surah and a translation of it
- I want to see a new background on every refresh or every 30s
As a visually impaired client:
- I would like to easily read and understand the text on your site.
As a blind client:
- I would like to easily understand how to navigate the site after my screen reader reads me the content of the site so I can understand the information available and be able to hear the recitation of the surah
User journey 🛸
- when visiting the Quranly App website you'll be faced with a random ayah and a translation of it
- you'll see the current date and time
- if you clicked on the play button you will start to hear the current ayah recitation
- if you clicked on the pause button, the audio will stop
- if you clicked on the next button you'll skip an ayah froward
- if you clicked on the back button you'll skip an ayah backward
- if you clicked on the volume icon you'll mute the sound while still playing the audio
Prototype 🤖
Clone It 🖨
git clone https://github.com/GSG-G11/Amjad-Abdulrahman-Quran-app.git
- Change your current directory
cd ./Amjad-Abdulrahman-Quran-app
- Open it with your favorite text editor
code .
- npm i
- at line 5 replace the clientId value to your own clientId from unsplash
- Enjoy the App
Tech Stack :clipboard:
- HTML
- CSS
- Javascript
- Figma
Team Members :busts_in_silhouette: