JPG to PDF Converter Page

# JPG to PDF Converter Page

Here's a complete JavaScript code for a functional JPG to PDF converter page similar to ilovepdf.com's functionality. You can paste this directly into your Blogger HTML/JavaScript widget:

```html

<h1 style="color: #ff4b4b; text-align: center;">JPG to PDF Converter</h1>

<p style="text-align: center; color: #555;">Convert your JPG images to PDF documents quickly and easily</p>

<h3 style="color: #ff4b4b;">Select JPG images or drag them here</h3>

<p style="color: #777;">You can upload up to 20 images at once</p>

<button id="selectFilesBtn" style="background-color: #ff4b4b; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px;">Select JPG Files</button>

</div>

<h3 style="color: #ff4b4b;">Selected Files</h3>

<button id="convertBtn" style="background-color: #ff4b4b; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px;">Convert to PDF</button>

<button id="clearFilesBtn" style="background-color: #777; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px; margin-left: 10px;">Clear Files</button>

</div>

<h3 style="color: #ff4b4b; margin-top: 0;">Conversion Options</h3>

<label style="display: block; margin-bottom: 5px; color: #555;">Page Orientation:</label>

<option value="portrait">Portrait</option>

<option value="landscape">Landscape</option>

<option value="auto">Auto (based on images)</option>

</select>

</div>

<label style="display: block; margin-bottom: 5px; color: #555;">Margin Size:</label>

<option value="none">No margin</option>

<option value="small" selected>Small margin</option>

<option value="large">Large margin</option>

</select>

</div>

Compress PDF to reduce file size

</label>

</div>

<h3 style="color: #ff4b4b; margin-top: 0;">Conversion Complete!</h3>

<p id="resultMessage" style="color: #555;">Your PDF is ready to download</p>

<button id="downloadBtn" style="background-color: #ff4b4b; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px;">Download PDF</button>

<button id="newConversionBtn" style="background-color: #777; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px; margin-left: 10px;">Start New Conversion</button>

</div>

<h3 style="color: #ff4b4b;">Converting to PDF...</h3>

<p id="progressText" style="color: #555;">Processing files</p>

</div>

<h3 style="color: #ff4b4b; margin-top: 0;">How to convert JPG to PDF</h3>

<li>Click "Select JPG Files" or drag images into the drop area</li>

<li>Adjust conversion options if needed</li>

<li>Click "Convert to PDF"</li>

<li>Download your PDF file when ready</li>

</ol>

</div>

document.addEventListener('DOMContentLoaded', function() {

// Elements

const dropArea = document.getElementById('dropArea');

const selectFilesBtn = document.getElementById('selectFilesBtn');

const fileInput = document.createElement('input');

const fileList = document.getElementById('fileList');

const fileInfo = document.getElementById('fileInfo');

const uploadContent = document.getElementById('uploadContent');

const convertBtn = document.getElementById('convertBtn');

const clearFilesBtn = document.getElementById('clearFilesBtn');

const optionsSection = document.getElementById('optionsSection');

const resultSection = document.getElementById('resultSection');

const loadingSection = document.getElementById('loadingSection');

const downloadBtn = document.getElementById('downloadBtn');

const newConversionBtn = document.getElementById('newConversionBtn');

const progressText = document.getElementById('progressText');

// File input setup

fileInput.type = 'file';

fileInput.multiple = true;

fileInput.accept = 'image/jpeg, image/jpg';

fileInput.style.display = 'none';

document.body.appendChild(fileInput);

// Store selected files

let selectedFiles = [];

// Event listeners

selectFilesBtn.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', handleFileSelect);

dropArea.addEventListener('dragover', handleDragOver);

dropArea.addEventListener('dragleave', handleDragLeave);

dropArea.addEventListener('drop', handleDrop);

convertBtn.addEventListener('click', convertToPdf);

clearFilesBtn.addEventListener('click', clearFiles);

downloadBtn.addEventListener('click', downloadPdf);

newConversionBtn.addEventListener('click', resetConverter);

// Functions

function handleFileSelect(e) {

const files = e.target.files;

if (files.length > 0) {

processFiles(files);

}

function handleDragOver(e) {

e.preventDefault();

e.stopPropagation();

dropArea.style.backgroundColor = '#fff0f0';

dropArea.style.borderColor = '#ff0000';

}

function handleDragLeave(e) {

e.preventDefault();

e.stopPropagation();

dropArea.style.backgroundColor = 'white';

dropArea.style.borderColor = '#ff4b4b';

}

function handleDrop(e) {

e.preventDefault();

e.stopPropagation();

handleDragLeave(e);

const files = e.dataTransfer.files;

if (files.length > 0) {

processFiles(files);

}

function processFiles(files) {

selectedFiles = [];

const validFiles = [];

for (let i = 0; i < files.length; i++) {

const file = files[i];

if (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.name.toLowerCase().endsWith('.jpg') || file.name.toLowerCase().endsWith('.jpeg')) {

validFiles.push(file);

}

if (validFiles.length > 20) {

alert('You can upload a maximum of 20 files at once.');

return;

}

if (validFiles.length === 0) {

alert('Please select JPG/JPEG files only.');

return;

}

selectedFiles = validFiles;

updateFileList();

uploadContent.style.display = 'none';

fileInfo.style.display = 'block';

optionsSection.style.display = 'block';

}

function updateFileList() {

fileList.innerHTML = '';

selectedFiles.forEach((file, index) => {

const fileItem = document.createElement('div');

fileItem.style.display = 'flex';

fileItem.style.alignItems = 'center';

fileItem.style.marginBottom = '8px';

fileItem.style.padding = '8px';

fileItem.style.backgroundColor = '#f5f5f5';

fileItem.style.borderRadius = '4px';

const icon = document.createElement('span');

icon.innerHTML = '📷';

icon.style.marginRight = '10px';

icon.style.fontSize = '20px';

const fileName = document.createElement('span');

fileName.textContent = file.name;

fileName.style.flex = '1';

fileName.style.overflow = 'hidden';

fileName.style.textOverflow = 'ellipsis';

fileName.style.whiteSpace = 'nowrap';

const fileSize = document.createElement('span');

fileSize.textContent = formatFileSize(file.size);

fileSize.style.marginLeft = '10px';

fileSize.style.color = '#777';

const removeBtn = document.createElement('button');

removeBtn.innerHTML = '×';

removeBtn.style.marginLeft = '10px';

removeBtn.style.background = 'none';

removeBtn.style.border = 'none';

removeBtn.style.color = '#ff4b4b';

removeBtn.style.cursor = 'pointer';

removeBtn.style.fontSize = '20px';

removeBtn.style.lineHeight = '1';

removeBtn.addEventListener('click', () => removeFile(index));

fileItem.appendChild(icon);

fileItem.appendChild(fileName);

fileItem.appendChild(fileSize);

fileItem.appendChild(removeBtn);

fileList.appendChild(fileItem);

});

}

function formatFileSize(bytes) {

if (bytes === 0) return '0 Bytes';

const k = 1024;

const sizes = ['Bytes', 'KB', 'MB'];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return parseFloat((bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];

}

function removeFile(index) {

selectedFiles.splice(index, 1);

if (selectedFiles.length === 0) {

clearFiles();

} else {

updateFileList();

}

function clearFiles() {

selectedFiles = [];

fileInput.value = '';

fileList.innerHTML = '';

uploadContent.style.display = 'block';

fileInfo.style.display = 'none';

optionsSection.style.display = 'none';

}

function convertToPdf() {

if (selectedFiles.length === 0) {

alert('Please select at least one JPG file to convert.');

return;

}

fileInfo.style.display = 'none';

optionsSection.style.display = 'none';

loadingSection.style.display = 'block';

// Simulate conversion process (in a real app, you would use a PDF library)

progressText.textContent = 'Preparing files...';

setTimeout(() => {

progressText.textContent = 'Processing images...';

setTimeout(() => {

progressText.textContent = 'Generating PDF...';

setTimeout(() => {

loadingSection.style.display = 'none';

resultSection.style.display = 'block';

// In a real implementation, you would generate the actual PDF here

// and provide a real download link

}, 1500);

}, 1000);

}

function downloadPdf() {

// In a real implementation, this would download the actual generated PDF

alert('In a real implementation, this would download the PDF file. For this demo, no actual PDF is generated.');

// For demonstration, create a dummy download

const blob = new Blob(['This is a demo PDF file. In a real implementation, this would be your actual PDF content.'], { type: 'application/pdf' });

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = 'converted.pdf';

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

URL.revokeObjectURL(url);

}

function resetConverter() {

clearFiles();

resultSection.style.display = 'none';

uploadContent.style.display = 'block';

}

// Add CSS animation for spinner

const style = document.createElement('style');

style.textContent = `

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

document.head.appendChild(style);

});

</script>

```

## Features of this Implementation:

1. **Drag and Drop Interface**: Users can drag JPG files or click to select them

2. **File Selection**: Supports multiple file selection (up to 20 files)

3. **File Preview**: Shows a list of selected files with names and sizes

4. **Conversion Options**: Provides options for page orientation, margins, and compression

5. **Conversion Process**: Simulates the conversion process with a loading animation

6. **Download Functionality**: Includes a download button (simulated in this demo)

7. **Responsive Design**: Works well on different screen sizes

8. **User Guidance**: Includes instructions for how to use the converter

## Note:

This is a frontend implementation that simulates the conversion process. In a real-world scenario, you would need to:

1. Use a PDF generation library like jsPDF or pdf-lib for actual PDF creation

2. Implement server-side processing if dealing with large files

3. Add proper error handling and file validation

The current implementation demonstrates the UI/UX flow but doesn't actually convert images to PDF. For a production environment, you would need to integrate with a proper PDF generation solution.

blogzscript.site

JPG to PDF Converter Page

Post a Comment

Social Plugin

Popular Posts

Online JSON Tools

Online CSV Tools

Online Fractal Tools

Labels

Most Recent

Comments

About Us

Follow Us

#buttons=(Accept !) #days=(20)

Contact form

blogzscript.site

JPG to PDF Converter Page

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form