Separate HTML file to HTML, CSS, JavaScript, Fix Issues, and Enhance Quran Reading App
Budget: $15 – $30 SGD
Project Overview:
I have a Quran reading application with HTML code that needs some adjustments and optimizations. I need assistance in breaking the code into separate HTML, CSS, and JavaScript files. Additionally, there are some functionality issues that need to be resolved to improve the user experience, especially for mobile users. Below are the details:
Tasks to be Completed:
Separate Code into HTML, CSS, and JavaScript Files
The current project has a single file for HTML, CSS, and JavaScript. I need someone to separate them into their respective files.
Fix the "Print Surah" (Cetak Surah) Function for Small Screen Views
On desktop or laptop views, I can download the entire surah (e.g., Surah Al-Baqarah). However, on mobile or small screens, I should only be able to download the current surah page being viewed.
The print function should reflect this difference between large and small screens.
Fix Bismillah Issue in Surah Data
Every time I fetch surah data from the API, it includes "بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ" as the first verse. This is incorrect, as "بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ" should only appear at the beginning of Surah Al-Fatihah.
Please correct this behavior so it is only included for Surah Al-Fatihah.
Fix Full Surah Audio Playback
Currently, the audio function only works for individual verses. I need a feature where users can play the full audio of a surah (e.g., Surah Al-Baqarah in its entirety).
Also, the "pause" function needs fixing. Right now, when a surah is paused, it doesn't allow users to resume from the point they left off. It should function properly.
Fix Navigation Back to Surah List
If a user is on a specific surah page (e.g., Surah As-Saffat) and wants to go back to the surah list, they should return to the surah list they were viewing.
Currently, going back to the home page takes them to the top of the surah list, not to their previous position.
Preserve Surah Page State on Refresh
When a user refreshes the page on a surah page (e.g., Surah As-Saffat), the page should remain on that surah, not revert to the home page (surah list).
Bookmark (Tandaan) Functionality
The bookmark (Tandaan) works on the surah list page, but not on individual surah pages. This feature should be functional on all pages, including when viewing a specific surah.
Improve Surah Page Loading Speed
The surah page takes too long to load the surah details. I need help optimizing it to load faster.
Requirements:
Understanding of the Quran: It’s essential that the developer understands the Quran’s structure and its verses to ensure the changes are accurate.
Code Organization: The project files need to be organized into separate HTML, CSS, and JavaScript files. Additionally, please create .htaccess and robots.txt files for proper routing and SEO.
Code Consistency: It is important that the changes fit seamlessly into the existing code structure. I am happy with how the application works at this moment, so please follow my existing code practices and structure to maintain consistency.
Final Notes: I need someone who is experienced and can fix these issues effectively. The application is currently running smoothly, and I want to ensure it continues to work seamlessly after these fixes are applied.
I have a Quran reading application with HTML code that needs some adjustments and optimizations. I need assistance in breaking the code into separate HTML, CSS, and JavaScript files. Additionally, there are some functionality issues that need to be resolved to improve the user experience, especially for mobile users. Below are the details:
Tasks to be Completed:
Separate Code into HTML, CSS, and JavaScript Files
The current project has a single file for HTML, CSS, and JavaScript. I need someone to separate them into their respective files.
Fix the "Print Surah" (Cetak Surah) Function for Small Screen Views
On desktop or laptop views, I can download the entire surah (e.g., Surah Al-Baqarah). However, on mobile or small screens, I should only be able to download the current surah page being viewed.
The print function should reflect this difference between large and small screens.
Fix Bismillah Issue in Surah Data
Every time I fetch surah data from the API, it includes "بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ" as the first verse. This is incorrect, as "بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ" should only appear at the beginning of Surah Al-Fatihah.
Please correct this behavior so it is only included for Surah Al-Fatihah.
Fix Full Surah Audio Playback
Currently, the audio function only works for individual verses. I need a feature where users can play the full audio of a surah (e.g., Surah Al-Baqarah in its entirety).
Also, the "pause" function needs fixing. Right now, when a surah is paused, it doesn't allow users to resume from the point they left off. It should function properly.
Fix Navigation Back to Surah List
If a user is on a specific surah page (e.g., Surah As-Saffat) and wants to go back to the surah list, they should return to the surah list they were viewing.
Currently, going back to the home page takes them to the top of the surah list, not to their previous position.
Preserve Surah Page State on Refresh
When a user refreshes the page on a surah page (e.g., Surah As-Saffat), the page should remain on that surah, not revert to the home page (surah list).
Bookmark (Tandaan) Functionality
The bookmark (Tandaan) works on the surah list page, but not on individual surah pages. This feature should be functional on all pages, including when viewing a specific surah.
Improve Surah Page Loading Speed
The surah page takes too long to load the surah details. I need help optimizing it to load faster.
Requirements:
Understanding of the Quran: It’s essential that the developer understands the Quran’s structure and its verses to ensure the changes are accurate.
Code Organization: The project files need to be organized into separate HTML, CSS, and JavaScript files. Additionally, please create .htaccess and robots.txt files for proper routing and SEO.
Code Consistency: It is important that the changes fit seamlessly into the existing code structure. I am happy with how the application works at this moment, so please follow my existing code practices and structure to maintain consistency.
Final Notes: I need someone who is experienced and can fix these issues effectively. The application is currently running smoothly, and I want to ensure it continues to work seamlessly after these fixes are applied.