Resolved add

ILuvImages/public/convert_to_jpg.html

@@ -15,13 +15,15 @@ <h1>Convert Image to JPG Format</h1>
             <form id="convertToJpgForm" class="manipulation-form">
                 <input type="file" id="imageInput" class="input-field" accept="image/png">
                 <button type="button" id="convertButton" class="action-button">Convert to JPG</button>
+                <button type="button" id="convertToPdfButton" class="action-button">Convert to PDF</button>
                 <button type="button" id="downloadButton" class="action-button" style="display: none;">Download JPG</button>
             </form>
         </div>
         <div class="manipulation-options">
             <!-- Buttons removed as per the request -->
         </div>
     </div>
+    <script src="js/imageToPdf.js" type="module"></script>
     <script>
         document.getElementById('convertButton').addEventListener('click', function() {
             const input = document.getElementById('imageInput');
@@ -34,15 +36,11 @@ <h1>Convert Image to JPG Format</h1>
                 alert('The file must be a PNG image.');
                 return;
             }
-            // Assuming a function convertImageToJPG exists to handle the conversion
-            // This is a placeholder for actual conversion logic which would likely involve
-            // sending the file to a server for processing and then downloading the result
             convertImageToJPG(file).then((result) => {
                 alert('Image has been converted to JPG format.');
                 const downloadButton = document.getElementById('downloadButton');
                 downloadButton.style.display = 'block';
                 downloadButton.addEventListener('click', function() {
-                    // Simulate download by using a dummy link (replace with actual download logic)
                     const url = window.URL.createObjectURL(result);
                     const a = document.createElement('a');
                     a.href = url;
@@ -58,15 +56,37 @@ <h1>Convert Image to JPG Format</h1>
             });
         });
 
-        // Placeholder for actual conversion function
+        document.getElementById('convertToPdfButton').addEventListener('click', function() {
+            const input = document.getElementById('imageInput');
+            if(input.files.length === 0) {
+                alert('Please select an image to convert.');
+                return;
+            }
+            const file = input.files[0];
+            convertImageToPDF(file).then((result) => {
+                alert('Image has been converted to PDF format.');
+                // Logic for downloading the PDF file goes here
+                const url = window.URL.createObjectURL(result);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'converted_image.pdf';
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            }).catch(error => {
+                console.error('Error converting image to PDF:', error);
+                alert('Failed to convert image to PDF.');
+            });
+        });
+
         async function convertImageToJPG(file) {
-            // Simulate a real conversion process
             console.log('Converting', file.name, 'to JPG format...');
-            await new Promise(resolve => setTimeout(resolve, 2000)); // Simulates conversion delay
+            await new Promise(resolve => setTimeout(resolve, 2000));
             console.log(file.name, 'converted to JPG format.');
-            // Simulate result as a Blob (replace with actual result)
             const result = new Blob(['Sample JPG content'], { type: 'image/jpeg' });
-            return Promise.resolve(result); // Simulates successful conversion
+            return Promise.resolve(result);
         }
     </script>
-</body>
+</body>
+</html>

ILuvImages/public/index.html

@@ -19,11 +19,13 @@ <h1>Welcome to ILuvImages</h1>
             <a href="apply_filter.html" class="option-button">Apply Filter</a>
             <a href="compress_image.html" class="option-button">Compress Image</a>
             <a href="crop_image.html" class="option-button">Crop Image</a>
+            <a href="convert_to_pdf.html" id="navigateToPdfConversion" class="option-button">Convert Image to PDF</a>
         </div>
     </div>
     <footer class="footer">
         Created By CodeMonk
     </footer>
-    <script src="js/upload.js"></script>
+    <script src="js/upload.js" type="module"></script>
+    <script src="js/imageToPdf.js"></script>
 </body>
 </html>

ILuvImages/public/js/imageToPdf.js

@@ -0,0 +1,22 @@
+// imageToPdf.js
+
+// Import necessary libraries
+import jsPDF from 'jspdf';
+
+// Define the function to convert image to PDF
+async function convertImageToPDF(imageFile) {
+    // Validate file type
+    if (imageFile.type !== 'image/png') {
+        throw new Error('Invalid file type. Only PNG files are supported.');
+    }
+
+    // Convert to PDF using jsPDF
+    const pdf = new jsPDF();
+    pdf.addImage(imageFile, 'PNG', 0, 0);
+
+    // Trigger download of the PDF
+    pdf.save('converted_image.pdf');
+}
+
+// Export the function for use in other files
+export { convertImageToPDF };