mathewchris96 · codeshwar-preview · Feb 6, 2025
diff --git a/image-to-pdf-app/README.md b/image-to-pdf-app/README.md
@@ -0,0 +1,31 @@
+
+## Project Overview
+The Image to PDF Converter is a web-based application that allows users to easily convert their JPEG images into PDF format. This application simplifies the process of converting images to PDFs, making it accessible to anyone with a web browser.
+
+## Installation Instructions
+As this application is web-based, there's no need for a traditional installation. However, to run it locally on your machine, you can use Python's HTTP server module by following these steps:
+1. Ensure you have Python installed on your computer. You can download it from https://www.python.org/downloads/.
+2. Open your terminal or command prompt.
+3. Navigate to the directory where you have saved the project files.
+4. Run the command `python -m http.server` (for Python 3.x) or `python -m SimpleHTTPServer` (for Python 2.x).
+5. Open a web browser and visit `http://localhost:8000` to access the application.
+
+## Usage Guide
+To use the Image to PDF Converter, follow these steps:
+1. Load the web application in your web browser by navigating to the URL provided by the local server setup.
+2. On the homepage, click the "Convert JPEG to PDF" button.
+3. You will be prompted to select the JPEG image(s) you wish to convert.
+4. After selecting the images, click the "Convert to PDF" button to initiate the conversion process.
+5. Once the conversion is complete, you can download the resulting PDF file to your local device.
+
+## Prerequisites
+- **Browser Compatibility**: The application is compatible with modern web browsers such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
+- **JavaScript Libraries**: The application uses the jsPDF library to perform the image to PDF conversion. This library is included via CDN, so there's no need for manual installation.
+
+## Screenshots
+- **Image Selection**: A screenshot showing how to select images for conversion.
+- **Conversion Process**: A screenshot depicting the conversion process.
+- **PDF Download**: A screenshot illustrating the option to download the converted PDF.
+
+## Acknowledgments
+This project makes use of the jsPDF library for converting images to PDF format. jsPDF is a powerful library that simplifies the process of generating PDF documents using JavaScript. More information about jsPDF can be found at their official GitHub repository: https://github.com/MrRio/jsPDF.
diff --git a/image-to-pdf-app/index.html b/image-to-pdf-app/index.html
@@ -0,0 +1,22 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image to PDF Converter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Welcome to the Image to PDF Converter</h1>
+    </header>
+    <main>
+        <section>
+            <p>Convert your JPEG images to PDF in a snap!</p>
+            <button id="convert-btn" onclick="window.location.href='jpeg-to-pdf.html'">Convert JPEG to PDF</button>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2023 Image to PDF Converter</p>
+    </footer>
+</body>
+</html>
diff --git a/image-to-pdf-app/jpeg-to-pdf.html b/image-to-pdf-app/jpeg-to-pdf.html
@@ -0,0 +1,29 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Convert JPEG to PDF</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
+    <script defer src="script.js"></script>
+</head>
+<body>
+    <header>
+        <h1>Convert Your JPEG Images to PDF</h1>
+        <nav>
+            <button onclick="window.location.href='index.html'">Home</button>
+        </nav>
+    </header>
+    <main>
+        <section class="conversion-section">
+            <p>Select a JPEG file from your device and click on "Convert to PDF" to start the conversion process.</p>
+            <input type="file" id="jpeg-upload" accept="image/jpeg">
+            <button id="convert-button">Convert to PDF</button>
+            <a id="download-link" style="display: none;">Download PDF</a>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2023 Image to PDF Converter</p>
+    </footer>
+</body>
+</html>
diff --git a/image-to-pdf-app/script.js b/image-to-pdf-app/script.js
@@ -0,0 +1,49 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+    const uploadInput = document.getElementById("jpeg-upload");
+    const convertButton = document.getElementById("convert-button");
+    const downloadLink = document.getElementById("download-link");
+
+    // Validate the file input to ensure it's a JPEG file
+    uploadInput.addEventListener("change", function() {
+        const file = uploadInput.files[0];
+        if (file.type !== "image/jpeg") {
+            alert("Please select a JPEG file.");
+            uploadInput.value = ""; // Reset the input
+        }
+    });
+
+    // Convert the uploaded JPEG to PDF
+    convertButton.addEventListener("click", function() {
+        const file = uploadInput.files[0];
+        if (!file) {
+            alert("Please upload a JPEG file first.");
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const imgData = event.target.result;
+            const pdf = new jsPDF({
+                orientation: 'p',
+                unit: 'mm',
+                format: 'a4'
+            });
+
+            // Calculate the PDF width and height to maintain the image aspect ratio
+            const imgProps = pdf.getImageProperties(imgData);
+            const pdfWidth = pdf.internal.pageSize.getWidth();
+            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+            pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+            const pdfBlob = pdf.output('blob');
+
+            // Create a download link for the PDF
+            const pdfUrl = URL.createObjectURL(pdfBlob);
+            downloadLink.href = pdfUrl;
+            downloadLink.download = "converted.pdf";
+            downloadLink.innerHTML = "Download PDF";
+            downloadLink.style.display = "block";
+        };
+        reader.readAsDataURL(file);
+    });
+});
diff --git a/image-to-pdf-app/style.css b/image-to-pdf-app/style.css
@@ -0,0 +1,75 @@
+
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+header {
+    background-color: #f8f9fa;
+    padding: 20px 0;
+    text-align: center;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+header h1 {
+    margin: 0;
+    color: #333;
+}
+
+main {
+    padding: 20px;
+    text-align: center;
+}
+
+button, #convert-btn, #convert-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover, #convert-btn:hover, #convert-button:hover {
+    background-color: #0056b3;
+}
+
+input[type="file"] {
+    margin: 20px 0;
+}
+
+.conversion-section {
+    margin-top: 20px;
+}
+
+footer {
+    background-color: #f8f9fa;
+    text-align: center;
+    padding: 10px 0;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e0e0e0;
+}
+
+footer p {
+    margin: 0;
+    color: #777;
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 768px) {
+    header, main, footer {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    button, #convert-btn, #convert-button {
+        width: 100%;
+        box-sizing: border-box; /* Ensures padding does not add to the total width */
+    }
+}