Separate Files HTML file to HTML, CSS, JavaScript, Fix Issues, and Enhance Quran Reading App
$12-20 SGD
Closed
Posted 4 months ago
$12-20 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.
Selamat Pagi
I'm a seasoned front-end web developer with over years of experience building and maintaining responsive, user-friendly web applications. My expertise lies in HTML, CSS, JavaScript, and various JavaScript frameworks . I have a strong track record of delivering high-quality projects on time and within budget, with a particular focus on creating intuitive and accessible user interfaces. My portfolio includes projects ranging from e-commerce platforms to educational applications, demonstrating my proficiency in handling complex web development tasks.
I understand you require assistance in refactoring your Quran reading application. This involves separating the existing HTML code into distinct HTML, CSS, and JavaScript files for better organization and maintainability. Furthermore, you need to resolve existing functionality issues and enhance the overall user experience.
My skills are perfectly aligned with your project requirements. My extensive experience in HTML, CSS, and JavaScript enables me to efficiently refactor your codebase into a well-structured, modular design. I possess the problem-solving abilities necessary to diagnose and resolve the functionality issues you've encountered. I'm also adept at optimizing code for performance and creating intuitive user interfaces.
I will utilize standard web development tools such as a code editor (e.g., VS Code), version control system (Git), and a browser developer console for debugging.
I'm confident that I can deliver a significantly improved Quran reading application that meets your requirements. I'd welcome the opportunity to discuss this project further and answer any questions you may have. Please contact me to schedule a brief call.
I guarantee high-quality code, timely delivery, and open communication throughout the project. I will provide regular updates and actively seek your feedback to ensure the final product perfectly aligns with your vision.
Giáp Văn Hưng
Hi I am an expert web developer with over 6 years of development experience I can help you fix these simple issues in quick time let's discuss this over chat
As an experienced full-stack developer, I have years of experience working with HTML, CSS, and JavaScript. I can swiftly and meticulously separate your code into separate files, ensuring your project is more organized and maintainable going forward. Moreover, your requirement for an optimized mobile-responsive Quran Reading App resonates with my extensive web development experience. .
With a deep understanding of the Quran's structure and verses, I appreciate your unique project and its needs. Consequently, as a seasoned professional maintaining high coding standards is my forté; hence consistently preserving code practices & structures while optimizing is guaranteed. My utmost priority isn't just fixing issues but creating long-term elegant solutions.
Through my skillset and passion for innovative designs irrespective of frameworks or languages involved,
I am confident about adding significant value to your Quran Reading app.
Thank you for considering me. Let's work together to enhance this important online resource!
Hello Sir,
I have 6 years of experience in web development and can convert your Figma design into clean, responsive HTML and CSS code. I will ensure smooth animations and full compatibility across desktop and mobile platforms.
I look forward to bringing your vision to life!
Best regards,
Shafiq
Please come to my chat. I am ready to start right now.
Hello,
I have experience in web development and Quran-based applications, and I can efficiently separate your code into structured HTML, CSS, and JavaScript files while ensuring smooth functionality. I will optimize loading speeds, fix the surah print function for small screens, correct Bismillah placement, implement full surah audio playback, and enhance navigation and bookmark features. Let’s improve your Quran reading app while maintaining its existing structure.
Thank you for considering my proposal. I look forward to the possibility of working with you.
Best Wishes, Muhammad Saad
Hello,
I’d love to assist in refining your Quran reading app with precise code structuring, improved mobile performance, and full respect for its content integrity. With 7+ years of frontend and full-stack experience, I specialize in modular HTML/CSS/JS setups and cross-device optimizations for seamless user experience.
Why Choose Me?
Frontend Expertise – Skilled in organizing single-file projects into clean, modular codebases.
Performance-Oriented – Experience in speeding up large datasets with lazy loading and DOM optimization.
Audio Handling – Implemented full media playback with pause/resume controls and responsive behavior.
UX Consistency – Expertise in scroll preservation, state retention on refresh, and navigation improvements.
Islamic App Sensitivity – Aware of proper Surah structure; will ensure Bismillah logic is displayed only where appropriate.
Case Study: CRM Hustler Guys & Exam Hustler Guys I built modular educational platforms with persistent audio, secure routing, and real-time data handling—skills directly aligned with your Surah playback, bookmark fixes, and mobile responsiveness needs.
Let’s enhance your Quran app with clarity, performance, and respect for its purpose.
Best regards,
Sumit Joshi
Hello,
I have extensive experience in optimizing and structuring HTML-based applications. I can efficiently separate your code into proper HTML, CSS, and JavaScript files while fixing functionality issues like print surah limitations, full surah audio playback, and navigation improvements. My understanding of Quranic structure ensures accurate implementation of required changes. Let's enhance your app for a seamless user experience!
Best wishes,
Fizza Nadeem
Greetings! I’ve reviewed your project. and I understand you want a skilled web developer to translate your Figma website design. As a skilled software engineer with over five years of experience, I’m confident in delivering a website that exceeds your expectations. I specialize in languages and frameworks like HTML, CSS, JavaScript, Bootstrap, React, and React JS. I also have expertise in PHP, Node JS, Laravel, and Angular and am proficient in CMS platforms like WordPress, Shopify, WIX, and Squarespace.
I’m also a web and mobile app trainer at Saylani Mass IT Training International Trust, where I share my expertise with future developers.
I look forward to collaborating with you!
Best regards,
Afsah Farooqui
Hello,
I understand that you're seeking assistance with your Quran reading application, specifically in separating your code into individual HTML, CSS, and JavaScript files, while fixing functionality issues that affect usability on mobile devices.
My expertise in JavaScript, HTML, and CSS, coupled with a solid understanding of the Quran's structure, makes me well-equipped to tackle the tasks outlined, from correcting the "Print Surah" function to optimizing page loading speeds. I will ensure that your application maintains its current seamless operation post-adjustments.
Thanks,
Muhammad
Hello Mohd S.,
We would like to grab this opportunity and will work till you get 100% satisfied with our work.
We are an expert team which have many years of experience on JavaScript, Mobile App Development, CSS, HTML5, HTML
https://www.freelancer.com/u/LivraisonTech
Lets connect in chat so that We discuss further.
Thank You
Hello,
I can quickly diagnose and fix your PHP file to restore email functionality on your contact page. I’ll ensure proper integration, validate required fields before submission, and test thoroughly to confirm emails are sent correctly. With strong expertise in PHP, form validation, and troubleshooting, I can deliver a fast and reliable solution. Let’s get this resolved—I’m also available for future enhancements if needed!
? TZANNUM TECH – Your Web Development Partner! ?
⭐️ Dear Client ⭐️
Your task is not a problem for me!
Having spent the past 7 years specializing in Laravel and Linux server management, I am very well equipped to take on your project.
I will thoroughly investigate your server's resource usage, debug the timeout issue, and optimize the server configuration. I will also identify any bottlenecks causing the performance lag when activating high-resource addons. Additionally, I will ensure a more stable and responsive application.
Please contact me for a detailed discussion!
Looking forward to working together.
Best regards.
As an experienced web developer, with over 8 years of expertise in HTML and JavaScript, I am confident that I can successfully tackle your Quran Reading App project and deliver it beyond your expectations. I understand how important this app is to you, and why accuracy matters even more when dealing with verses from the Quran. With my knowledge of the Quran's structure and verses coupled with my coding ability, I assure you accurate separation of the HTML, CSS, and JavaScript files for improved performance, maintainability and readability.
In addition to fixing the functionality issues you mentioned like the "Print Surah" issue, correcting the Bismillah problem in Surah Data or enabling full surah audio playback my proficiency extends to other relevant areas such as speed optimization and mobile responsiveness. This will ensure fast page loading for an enhanced user experience which is crucial for a smooth operation of any functioning web app.
Hi Mohd,
Your project resonates with me—not just as a technical challenge, but as an opportunity to honor the sacred structure of the Quran while refining user experience. I understand how important it is to preserve both the functional integrity and respectful presentation of the content.
I’m ready to break your current monolithic file into clean, separate HTML, CSS, and JavaScript files, ensuring that your code remains consistent with your established practices. I’ll address the responsive behavior so that the "Print Surah" function adapts perfectly for mobile users, and fix the “Bismillah” inclusion to appear only in Surah Al-Fatihah, respecting the Quran’s structure.
I bring both technical expertise and a deep respect for the content, ensuring that every adjustment is made with accuracy and care. I look forward to the opportunity to collaborate on this project and ensure your application continues to serve its users seamlessly.
Hello,
I am a senior web and mobile developer with extensive experience in creating innovative and high-performing solutions. My expertise spans [e-commerce platforms, SaaS applications, or custom app development], ensuring tailored results that meet your business objectives. I am committed to delivering high-quality work and would love the opportunity to discuss how I can add value to your project.
Best,
Yuliia
Hi Mohd S.,
I just checked your job post, and I see you need someone experienced in Mobile App Development, HTML5, CSS, HTML and JavaScript. I have worked on similar projects before and would love to collaborate. Please review my profile to see my experience with these technologies.
Before we proceed, I have a few questions:
1. Are there any additional requirements?
2. Is there existing work, or does this need to be built from scratch?
3. What is your deadline for this project?
Why choose me?
✅ 250+ successful projects
✅ No bad feedback in the last 5-6 years
✅ 100+ recent 5-star reviews from happy clients
I am available from 9 AM - 9 PM Eastern Time. I’ll share my past work in a private chat for privacy reasons.
Looking forward to your response!
Best regards,
Zain R
Hello,
With my solid understanding of the Quran and expertise in HTML, JavaScript, and other front-end technologies, I believe I am the perfect fit for your project. Throughout my years in the field, I have worked on countless projects similar to yours and have successfully separated code into HTML, CSS, and JavaScript files. I understand that preserving the accuracy of the Quran's verses is crucial, and I guarantee that all the changes will be applied respectfully while maintaining a consistent code structure.
I understand that your Quran reading application is currently working smoothly and you're looking to add these improvements without disrupting its functionality. That's where my extensive experience in organizing code efficiently comes into play. I am equipped with an in-depth knowledge of server-side programming languages and frameworks like PHP/Laravel/CodeIgniter, Node.js/ExpressJS which enables me to effectively optimize your application's loading speed using best industry practices.
Lastly, my familiarity with DevOps tools like Docker for containerization allows me to deploy your application using AWS or Azure, ensuring high performance and scalability. My track record speaks for itself - delivering innovative solutions that align with user needs and business objectives. Given the opportunity, I assure you of a seamless transformation of your app that enhances the user experience, resolves existing issues and retains th
Thanks!
Aslam o alikukum!
Having worked extensively in HTML, CSS, and JavaScript fields, I am well-equipped to address the task of separating your code into the relevant files. Additionally, my skills in mobile app development enable me to tackle your demand regarding the "Print Surah" function seamlessly across devices.
aslam o alikum !
I hope that you are doing well! I'm Mariam Qadeem, a passionate software engineer who is always excited to tackle complex problems and craft efficient, real-world solutions.
When it comes to your project, I don't just have the required technical skills in HTML and JavaScript but I also bring an in-depth understanding of the subject matter at hand i.e the Quran which I am certain will be critical in ensuring your project's accuracy.
