Separate HTML file to HTML, CSS, JavaScript, Fix Issues, and Enhance Quran Reading App

$15-30 SGD

Cancelled

Posted 4 months ago

$15-30 SGD

Paid on delivery

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 [login to view URL] 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.

JavaScript

Mobile App Development

CSS

HTML5

HTML

Project ID: 39228435

About the project

34 proposals

Remote project

Active 4 mos ago

Looking to make some money?

Email address

Benefits of bidding on Freelancer

Set your budget and timeframe

Get paid for your work

Outline your proposal

It's free to sign up and bid on jobs

Awarded to:

@hassans5

Hi Sir, I have carefully reviewed your requirements and am confident in my ability to optimize and enhance your Quran reading application. With expertise in HTML, CSS, JavaScript, and performance optimization, I will ensure that the necessary adjustments are made while maintaining the integrity of your existing application. I will ensure that all updates align with your existing code structure and provide a seamless transition without disrupting the current functionality. Looking forward to collaborating on this project to enhance the user experience of your app. Let’s connect and get started! Best regards, Hassan S.

$30 SGD in 1 day

4.6

(11 reviews)

2.9

34 freelancers are bidding on average $68 SGD for this job

@ig149

Hi, I appreciate the opportunity to work on your Quran reading application, a project that serves a noble purpose. With 10+ years of experience in web development and a deep understanding of the Quran’s structure, I can confidently address the issues and optimize your application for a better user experience. This project is straightforward for me, and I’m available now to start working on it. If I were to rate myself, it would be a solid 100/100, ensuring quick and efficient delivery. With 300+ projects completed, I can guarantee a seamless and professional outcome. Let’s connect, I’ll share my portfolio to showcase similar projects I’ve successfully delivered! Regards, Uzair

$23 SGD in 7 days

4.7

(43 reviews)

5.9

@ssquare489

Hello, I’d love to help refine and optimize your Quran reading app while maintaining the utmost respect for content integrity and user experience. With 7+ years of frontend and full-stack experience, I specialize in clean code separation, audio/media handling, and mobile-first optimization. Why Choose Me? - Frontend Expertise – Skilled in modularizing HTML, CSS, and JS for fast, responsive performance. - Performance-Focused – Experience with page speed improvements, lazy loading, and optimized rendering for large datasets. - Audio & Media Handling – Implemented full-surah playback, pause/resume logic, and custom media controls. - Context-Aware Dev – Understanding Quranic structure to handle Bismillah rendering, accurate navigation, and persistent Surah states. Relevant Work: - In CRM Hustler Guys and Exam Hustler Guys, I built modular UIs with persistent state handling, media control, and efficient API consumption—skills directly aligned with your playback, bookmarking, and navigation requirements. Let’s collaborate to enhance your Quran app with precision, speed, and a flawless user experience. Best regards, Sumit Joshi

$230 SGD in 7 days

4.7

(27 reviews)

5.7

@usamasohail91

Hi, I am highly experienced in HTML, CSS, JavaScript, and mobile app optimization, making me the perfect fit for your Quran reading application improvements. I will efficiently separate the code into structured files, fix the "Print Surah" function for small screens, correct the Bismillah placement, implement full Surah audio playback with proper pause/resume, and optimize the navigation, state preservation, bookmarks, and loading speed. With a strong understanding of the Quran’s structure, I ensure accurate modifications while maintaining your existing code standards. Let’s enhance your app’s functionality and user experience! BEST, USAMA E

$23 SGD in 4 days

4.8

(52 reviews)

5.2

@mshariqnaeem64

Hello, I can help you with all the required adjustments and optimizations for your Quran reading application.

$23 SGD in 1 day

5.0

(12 reviews)

4.4

@Sachin24682

Amidst the wide array of freelancers you have to select from, what sets me apart is my acute understanding of Quran which is quintessential for the nature of your project. Being an experienced Full Stack Developer, I possess over 7 years of experience in PHP, Laravel, CodeIgniter, and API development. I have successfully managed both backend and frontend resources ensuring seamless functionalities and compelling UI. This aligns perfectly with your requirements for separating the code into HTML, CSS, and JavaScript files whilst maintaining the consistency of existing codes. With my profilic competences in CSS, HTML5, and Javascript coupled with my past experiences in working on optimizing surah pages loading speed, fixing different functionalities like print surah and bookmark issues make me the ideal contender for this project. I am skilled at communicating complexity in an understandable manner which guarantees that I’ll offer you timely and efficient resolutions to your customised problems. Moreover, I would emphasize that I value client satisfaction above everything else. Therefore, adhering to your existing code practices & structure will be a matter of prime importance for me. Let's join forces to enhance your Quran Reading App by fixing all the aforementioned issues whilst maintaining its seamless functionality. I assure you that at the end you would be a happy patron! Looking forward to hearing from you soon!

$15 SGD in 1 day

5.0

(22 reviews)

3.7

@frayluismartinez

Hello, God bless you! I'm here to help resolve any software difficulties you're encountering. My team and I are committed to delivering tailored solutions that meet your needs. Please feel free to share your requirements, and I'll be happy to assist you.

$23 SGD in 3 days

5.0

(1 review)

3.1

@bohdanp2

Your project requirements for enhancing your Quran reading application are clear, and I’m confident I can deliver the necessary adjustments efficiently. With expertise in HTML, CSS, and JavaScript, I will separate the code into structured files, resolve functionality issues, and ensure smooth performance across all devices. My previous experience includes optimizing mobile applications, implementing responsive design, and ensuring correct API data handling. Additionally, I will enhance your print functionality, correct the Bismillah display, improve audio playback, fix navigation, and implement a proper bookmark system. I value maintaining your application's existing structure while enhancing its usability. Please contact me to discuss further details. Looking forward to collaborating with you! Best regards.

$15 SGD in 1 day

5.0

(3 reviews)

3.3

@techstar12

The core of your application’s issues seems to stem from code organization and specific functionality for mobile users. Separating HTML, CSS, and JavaScript files will enhance maintainability and performance. With 5+ years of experience in web development, I understand the unique needs of applications like yours, especially regarding Quranic content. I can address the “Print Surah” function, the Bismillah issue, and ensure smooth audio playback while preserving user state during navigation. I’m committed to optimizing the loading speed and implementing bookmark functionality consistently across pages. I’ll ensure that the code changes fit seamlessly into your current structure while providing the necessary improvements. Let’s discuss your preferences further. I’m available for a call at your convenience.

$23 SGD in 7 days

4.9

(5 reviews)

2.8

@DevAyeshaAshraf

I’m an experienced web developer with a deep understanding of Quranic structure and a strong grasp of HTML, CSS, and JavaScript. I’ll efficiently separate your code, fix functionality issues, enhance performance, and ensure a seamless user experience across all devices. Let’s optimize your Quran reading app—message me to get started!

$30 SGD in 7 days

5.0

(4 reviews)

2.7

@Aafaaqamir

As an experienced full-stack developer, I bring to the table a unique blend of technical expertise and a deep understanding of the Quran's structure and verses. From separating your code into organized HTML, CSS, and JavaScript files to ironing out those functional issues that hamper user experience, I'll navigate this project with a keen eye for detail. I value code consistency and understand the need to maintain your existing practices to ensure a seamless integration of new functionalities. Throughout my 3+ years in the field, I've successfully handled complex web and mobile interfaces like SaaS services, E-commerce platforms, social networks apps. I've built for various industries including educational apps and event management services, which have given me the familiarity with not just web development but also SEO optimization and user experience—qualities that resonate with your needs. Also, my post-launch support offers you peace of mind even after project completion. This project is about not just how well it functions but also how smoothly it keeps doing so even after my work is done! Let's collaborate and transform your existing Quran reading app into an optimized, user-friendly tool—maintaining best practices and taking it even further towards its true potential.

$30 SGD in 2 days

4.6

(4 reviews)

2.4

@sarimhussain0721

Hi there, I have seven years of experience as a freelancer and am skilled in HTML, PHP, CSS, Graphic Design, and Website Design. After closely examining your project specifications, I am certain that I can precisely produce outstanding results. My area of expertise is smoothly integrating design ideas into websites to provide an aesthetically pleasing and intuitive user experience. I welcome you to start a chat so we can talk more about the details of your project and see how I can help you reach your objectives. Regards, Sarim H.

$15 SGD in 1 day

4.6

(3 reviews)

2.3

@olegf7

Ok. I can do that and no problem. I’m a Web expert and I’m specialized at responsive design. I'll complete your project within 10 hours as you need after you have seen my proposal. Looking forward to hearing your reply. Thanks.

$23 SGD in 1 day

0.0

(0 reviews)

0.0

@KhvSergey

I specialize in Quran app development and will: - Separate code into HTML/CSS/JS files. - Fix "Bismillah" logic, audio playback, and mobile print issues. - Optimize loading speed and preserve page state. - Follow your code structure for seamless integration. Copy ✅ **Quran App Expertise**: Developed similar apps with features like audio playback, bookmarks, and API integration. ✅ **Technical Skills**: Proficient in vanilla JS, CSS optimization, and state management (localStorage/sessionStorage). ✅ **Attention to Detail**: Understand Quranic structure (e.g., "Bismillah" only in Surah Al-Fatihah). ✅ **Fast Delivery**: 7-day timeline with daily updates. Milestone 1: Code Separation + Print Function Fix ($10 SGD). Milestone 2: Audio Playback + Bookmark Fix ($10 SGD). Milestone 3: Speed Optimization + Final Testing ($5 SGD).

$25 SGD in 7 days

0.0

(0 reviews)

0.0

@muhammadyasers

Hello, Greetings Mohd S., Good evening! I’ve carefully checked your requirements and really interested in this job. I’m full stack node.js developer working at large-scale apps as a lead developer with U.S. and European teams. I’m offering best quality and highest performance at lowest price. I can complete your project on time and your will experience great satisfaction with me. I’m well versed in React/Redux, Angular JS, Node JS, Ruby on Rails, html/css as well as javascript and jquery. I have rich experienced in Mobile App Development, HTML5, HTML, CSS and JavaScript. For more information about me, please refer to my portfolios. I’m ready to discuss your project and start immediately. "pause" Looking forward to hearing you back and discussing all details.. Eager to hear your feedback

$25 SGD in 4 days

0.0

(0 reviews)

0.0

@ohuman

Hi, I'm a front-end developer, I didn't read the Quran, will it be okay? Contact me to discuss more details. I can start now.

$23 SGD in 7 days

0.0

(0 reviews)

0.0

@yomnam5

Dear Client, I understand that you have a Quran reading application with HTML code that needs some adjustments and optimizations. You 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. With my experience in HTML/CSS and JavaScript, along with responsive design principles, I will ensure that your application will run smoothly on different devices. With deep understanding of Quran structure, I believe that I am a perfect fit for this project. Looking forward to working with you. Regards, Yomna Mohsen

$20 SGD in 8 days

0.0

(0 reviews)

0.0

@foxdream2020

Hello As a Muslim developer with deep knowledge of the Quran's structure and verses, I understand the importance of ensuring accuracy in handling Quranic content. With expertise in HTML, CSS, JavaScript, and API integration, I can efficiently implement the required improvements while maintaining the integrity of your application. ✅ My Approach: ? Code Separation: Organizing HTML, CSS, and JavaScript into separate files for better maintainability. ? Print Function Fix: Ensuring full surah printing on desktops and page-specific printing on mobile. ? Bismillah Correction: Displaying "بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ" only in Surah Al-Fatihah and as just an opening verse for others. ? Full Surah Audio Playback: Enabling continuous playback with proper pause/resume functionality. ? Improved Navigation: Returning users to their last viewed position in the surah list. ? Page State Retention: Keeping users on the same surah after page refresh. ? Bookmark Enhancement: Making bookmarks functional across all pages. ? Performance Optimization: Enhancing loading speed and reducing unnecessary API calls. I am committed to delivering a seamless, high-quality experience while preserving the sanctity of the Quranic text. Looking forward to collaborating with you! Best regards, Mahmoud

$30 SGD in 10 days

0.0

(0 reviews)

0.0

@muhammadanas4824

Assalam Alaikum, I can optimize your Quran reading app by separating HTML, CSS, and JavaScript, fixing functionality issues, and improving performance. Key Fixes: Code Separation – Organize files for better maintainability. Print Function – Allow mobile users to print only the current page. Bismillah Issue – Display correctly, only in Surah Al-Fatihah. Audio Playback – Enable full Surah audio with pause/resume. Navigation – Ensure users return to the correct Surah list position. Page State & Bookmarks – Retain Surah on refresh and expand bookmarking. Performance & SEO – Improve loading speed and implement SEO best practices. I have experience with similar projects and will ensure smooth integration without disrupting existing functionality. Let’s discuss further. Best, Muhammad Anas

$23 SGD in 7 days