Merge pull request #1951 from Risad212/placeholder-generator

added new project
TusharKesarwani · Oct 31, 2023 · 6d1f9e6 · 6d1f9e6
2 parents df5939b + 4220c16
commit 6d1f9e6
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 0 deletions.
diff --git a/Projects/placeholder-generator/README.md b/Projects/placeholder-generator/README.md
@@ -0,0 +1,4 @@
+# placeholder-generator
+Introducing My Simple Placeholder Image Generator! 
+Easily create custom placeholders for your images! Just upload, hit the generate button get your perfect placeholder. Ideal for designers, developers, and social media enthusiasts! Try it now: 
+https://palaceholder-image-generator.netlify.app/
diff --git a/Projects/placeholder-generator/app.js b/Projects/placeholder-generator/app.js
@@ -0,0 +1,73 @@
+const fileInput = document.getElementById('fileinput');
+const generateButton = document.querySelector('.generateBtn');
+
+
+/*============ get image dimenstion ===============*/
+generateButton.addEventListener('click', event => {
+    if (fileInput.files.length > 0) {
+        const img = document.createElement('img');
+        const selectedImage = fileInput.files[0];
+        const objectURL = URL.createObjectURL(selectedImage);
+
+        img.onload = function handleLoad() {
+            console.log(`Width: ${img.width}, Height: ${img.height}`);
+            generateImage(img.height,img.width)
+            URL.revokeObjectURL(objectURL);
+        };
+
+        img.src = objectURL;
+    }
+
+    fileInput.value = null;
+});
+
+
+
+/*================ generate placeholder image  ===================*/
+const imagePreview = document.getElementById("imagePreview");
+const downloadImage = document.getElementById('download');
+
+function generateImage(imageHeight,imageWidth) {
+    const canvasElement = createPlaceholderCanvas(
+        imageWidth,
+        imageHeight
+    );
+    const dataUrl = canvasElement.toDataURL();
+
+    downloadImage.href = dataUrl;
+    imagePreview.src = dataUrl;
+    imagePreview.style.display = "block";
+    imagePreview.style.maxWidth = `${imageWidth}px`;
+
+
+}
+
+/**
+ * Creates a HTML canvas element of the given size.
+ *
+ * @param {number} width
+ * @param {number} height
+ * @returns {HTMLCanvasElement}
+ */
+function createPlaceholderCanvas(width, height) {
+    const element = document.createElement("canvas");
+    const context = element.getContext("2d");
+
+
+    element.width = width;
+    element.height = height;
+
+    // Fill in the background
+    context.fillStyle = "#aaaaaa";
+    context.fillRect(0, 0, element.width, element.height);
+
+    // Place the text
+    context.font = "bold 90px sans-serif";
+    context.fillStyle = "#333333";
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillText(`${width}x${height}`, element.width / 2, element.height / 2);
+
+    return element;
+}
+
diff --git a/Projects/placeholder-generator/index.html b/Projects/placeholder-generator/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>generate Placeholder image</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <h1 class="title">upload your file generate placeholder image</h1>
+
+     <div class="input-wrap">
+        <h2>upload file here</h2>
+        <input id="fileinput" type="file" accept="image/*" placeholder="upload image" />
+        <button class="generateBtn">generate image</button>
+     </div>
+
+
+    <div class="preview-wrap">
+        <h3>Preview image</h3>
+        <img alt="Preview Image" id="imagePreview" style="display: none">
+    </div>
+
+    <a href="#" id="download" download>download image</a>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Projects/placeholder-generator/style.css b/Projects/placeholder-generator/style.css
@@ -0,0 +1,65 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100vh;
+    align-items: center;
+    font-family: 'Poppins', sans-serif;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    object-fit: cover;
+    display: block;
+    margin-bottom: 150px !important;
+}
+
+.title {
+    text-transform: capitalize;
+    margin-bottom: 15px;
+}
+
+#download {
+    text-decoration: none;
+    color: #fff;
+    background: #00AA96;
+    padding: 20px 25px;
+    font-size: 19px;
+    text-transform: capitalize;
+    display: block;
+    margin-top: 25px;
+}
+
+.generateBtn {
+    color: #fff;
+    background: #00AA96;
+    padding: 16px 25px;
+    font-size: 19px;
+    text-transform: capitalize;
+    display: inline-block;
+    border: none;
+    cursor: pointer;
+    margin-top: 25px;
+}
+
+.preview-wrap {
+    width: 1000px;
+    height: 250px;
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+.input-wrap {
+    text-align: center;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+input#fileinput {
+    padding: 60px;
+    color: #00AA96;
+    border: 5px dashed #00AA96;
+    text-align: center;
+}
diff --git a/img/projects/placeholder-generator.jpg b/img/projects/placeholder-generator.jpg