20_image_select_preview coded succesfully

nitishkhobragade · Mar 23, 2024 · 26d52b4 · 26d52b4
1 parent 9b8cc0f
commit 26d52b4
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 0 deletions.
diff --git a/20_image_select_preview/app.js b/20_image_select_preview/app.js
@@ -0,0 +1,29 @@
+const selectImage = document.querySelector('.select-img');
+const inputFile = document.querySelector('#file');
+const imgSection = document.querySelector('.img-section');
+
+selectImage.addEventListener('click', function() {
+    inputFile.click();
+});
+
+inputFile.addEventListener('change', function () {
+    const image = this.files[0];
+    console.log(image);
+    if(image.size < 2000000) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const allImg = imgSection.querySelectorAll('img');
+            allImg.forEach(item => item.remove());
+            const imgUrl = reader.result;
+            const img = document.createElement('img');
+            img.src = imgUrl;
+            imgSection.appendChild(img);
+            imgSection.classList.add('active');
+            imgSection.dataset.img = image.name;
+        }
+        reader.readAsDataURL(image);
+    } else {
+        alert("Image size more than 2MB");
+    }
+
+})
diff --git a/20_image_select_preview/index.html b/20_image_select_preview/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+    <title>Image Select and Preview</title>
+    <link rel="icon" type="image/x-icon" href="https://nitishkhobragade.github.io/portfolio.nitish/img/favicon.png">
+    <link rel="stylesheet" href="./styles.css">
+
+</head>
+<body>
+    <div class="wrapper">
+        <div class="container">
+            <input type="file" id="file" accept="image/*" hidden>
+            <div class="img-section" data-img="">
+                <i class='bx bxs-cloud-upload icon'></i>
+                <h3>Upload</h3>
+                <p>Image size must be less than <span>2MB</span></p>
+
+            </div>
+            <button class="select-img">Select Image</button>
+        </div>
+    </div>
+    <script src="./app.js"></script>
+</body>
+</html>
diff --git a/20_image_select_preview/styles.css b/20_image_select_preview/styles.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --blue: #0071fF;
+    --light-blue: #b6dbf6;
+    --dark-blue: #005dd1;
+    --grey: #f2f2f2;
+    --white: #fff;
+    --para-color: #999;
+}
+
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: var(--light-blue);
+}
+
+.container {
+    max-width: 400px;
+    width: 100%;
+    background: var(--white);
+    padding: 30px;
+    border-radius: 30px;
+}
+
+.img-section {
+    position: relative;
+    width: 100%;
+    height: 240px;
+    background: var(--grey);
+    margin-bottom: 30px;
+    border-radius: 15px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;align-items: center;
+    flex-direction: column;
+}
+
+.img-section .icon {
+    font-size: 100px;
+}
+
+.img-section h3 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 6px;
+}
+
+.img-section p {
+    color: var(--para-color);
+}
+
+.img-section p span {
+    font-weight: 600;
+}
+
+/* properties for position  center image accurately */
+.img-section img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    z-index: 100;
+}
+
+.img-section::before {
+    content: attr(data-img);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+    color: var(--white);
+    font-weight: 500;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: all .3s ease;
+}
+
+.img-section.active:hover::before {
+    opacity: 1;
+} 
+
+.select-img {
+    display: block;
+    width: 100%;
+    padding: 16px 0;
+    border-radius: 15px;
+    background: var(--blue);
+    color: var(--white);
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    transition: all .3s ease;
+}
+
+.select-img:hover {
+    background: var(--dark-blue);
+}
+
+
+
diff --git a/projects.css b/projects.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');