Building an Image Compressor Tool using chat Gpt with HTML, CSS, and JavaScript

Webdesign / By /
Spread the love
5/5 - (2 votes)

Introduction:

In this article, we will walk you through the process of creating an “Image Compressor Tool” using HTML, CSS, and JavaScript. We’ll not only guide you on how to generate the code using ChatGPT but also provide the full Source code snippets for each part of the project.

Part 1: Getting Started with ChatGPT

  1. Outline Your Project: Begin by outlining the components and features you want in your project. In this case, we’ll be building an Image Compressor Tool with features like image upload, preview, compression, and download.
  2. Engage ChatGPT: Start a conversation with ChatGPT by explaining your project and asking for code assistance. For example:”I’m working on an Image Compressor Tool. I need help generating HTML, CSS, and JavaScript code for the user interface. Could you provide guidance and code snippets for each part?”
  3. Provide Step-by-Step Instructions: Ask ChatGPT to provide code for specific sections of your project. For instance:”Could you help me generate the HTML code for the user interface?”
  4. Iterate and Refine: If needed, iterate the conversation to get the complete code for each part. Ask for HTML, then CSS, and finally JavaScript code.

Part 2: Image Compressor HTML Structure

Below is the HTML code snippet for your Image Compressor Tool. This code sets up the basic structure of the tool, including the container, image upload, preview, and download elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Image Compressor Tool</title>
</head>
<body>
    <div class="container">
        <h1>Image Compressor Tool</h1>
        <div class="upload-container">
            <label for="imageInput" class="upload-label">
                <span>Click to upload image</span>
                <input type="file" id="imageInput" accept="image/*">
            </label>
            <p class="or-text">or</p>
            <div class="drop-container" id="dropContainer">
                <p>Drag &amp; Drop an image here</p>
            </div>
        </div>
        <div class="preview-container">
            <div id="previewImageContainer">
                <img id="previewImage" src="#" alt="Preview">
            </div>
        </div>
        <button id="compressButton">Compress Image</button>
        <a id="downloadLink" style="display: none;" download>Download Compressed Image</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

Part 3: Styling with CSS

Now, let’s add styles to your Image Compressor Tool using CSS. These styles will enhance the visual appeal and usability of your tool.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 600px;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-top: 0;
}

.upload-container {
    text-align: center;
    margin-bottom: 20px;
}

.upload-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.upload-label:hover {
    background-color: #0056b3;
}

.or-text {
    margin: 10px 0;
    font-weight: bold;
}

.drop-container {
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    padding: 40px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.drop-container:hover {
    background-color: #f0f0f0;
}

#previewImageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    height: 250px;
    margin-top: 20px;
}

#previewImage {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

#compressButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    margin-top: 20px;
}

#compressButton:hover {
    background-color: #0056b3;
}

#downloadLink {
    display: block;
    margin-top: 20px;
    text-decoration: none;
    color: #007bff;
}

Part 4: Adding Functionality with JavaScript

Lastly, let’s implement the functionality using JavaScript. This code snippet handles image uploading, previewing, compressing, and downloading.

document.addEventListener("DOMContentLoaded", function() {
    const imageInput = document.getElementById("imageInput");
    const previewImage = document.getElementById("previewImage");
    const compressButton = document.getElementById("compressButton");
    const downloadLink = document.getElementById("downloadLink");

    imageInput.addEventListener("change", function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                compressButton.disabled = false;
                downloadLink.style.display = "none";
            };
            reader.readAsDataURL(file);
        }
    });

    compressButton.addEventListener("click", function() {
        const image = new Image();
        image.src = previewImage.src;

        image.onload = function() {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            const maxWidth = 800;
            const maxHeight = 800;
            let width = image.width;
            let height = image.height;

            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }

            if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
            }

            canvas.width = width;
            canvas.height = height;

            ctx.drawImage(image, 0, 0, width, height);

            canvas.toBlob(function(blob) {
                const compressedFile = new File([blob], "compressed_image.jpg", { type: "image/jpeg" });
                const compressedDataUrl = URL.createObjectURL(compressedFile);
                previewImage.src = compressedDataUrl;

                downloadLink.href = compressedDataUrl;
                downloadLink.style.display = "block";
            }, "image/jpeg", 0.7); // Adjust compression quality here
        };
    });
});

Watch videos for more clarity

Conclusion:

In this article, we’ve shown you how to use ChatGPT to generate the code for an Image Compressor Tool. We’ve provided code snippets for each part: HTML structure, CSS styling, and JavaScript functionality. By following these steps, you can create a fully functional tool that allows users to upload, preview, compress, and download images. Happy coding!

Remember that these snippets are just starting points. You can customize and expand upon them to suit your specific project requirements.

Related Posts

Scroll to Top