error

Parv-gugnani · Nov 12, 2023 · 555c2cf · 555c2cf
1 parent 1febe9e
commit 555c2cf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/Resize Image/index.html b/Resize Image/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resize image</title>
     <link rel="stylesheet" href="style.css" />
-    <script src="script.js"></script>
+    <script src="script.js" defer></script>
   </head>
   <body>
     <div class="wrapper">
@@ -15,19 +15,19 @@
           src="https://www.codingnepalweb.com/demos/resize-and-compress-image-javascript/upload-icon.svg"
           alt=""
         />
-        <p>Browse File to Uploads</p>
+        <p>Browse File to Upload</p>
       </div>
       <div class="content">
         <div class="row sizes">
           <div class="column width">
-            <label>Height</label>
-            <input type="number" />
+            <label for="height">Height</label>
+            <input type="number" id="height" />
           </div>
         </div>
         <div class="row checkboxes">
           <div class="column ratio">
             <input type="checkbox" id="ratio" checked />
-            <label for="ratop">Lock aspect ratio</label>
+            <label for="ratio">Lock aspect ratio</label>
           </div>
           <div class="column quality">
             <input type="checkbox" id="quality" />

diff --git a/Resize Image/script.js b/Resize Image/script.js
@@ -16,19 +16,21 @@ const loadFile = (e) => {
   previewImg.addEventListener("load", () => {
     widthInput.value = previewImg.naturalWidth;
     heightInput.value = previewImg.naturalHeight;
-    ogImageRatio.value = previewImg.naturalWidth / previewImg.naturalHeight;
+    ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight; // Corrected assignment
   });
 };
 
-widthInput.addEventListener("keyup", () => {
+widthInput.addEventListener("input", () => {
+  // Changed from 'keyup' to 'input' for real-time updating
   const height = ratioInput.checked
     ? widthInput.value / ogImageRatio
     : heightInput.value;
 
   heightInput.value = Math.floor(height);
 });
 
-heightInput.addEventListener("keyup", () => {
+heightInput.addEventListener("input", () => {
+  // Changed from 'keyup' to 'input' for real-time updating
   const width = ratioInput.checked
     ? heightInput.value * ogImageRatio
     : widthInput.value;
@@ -48,7 +50,7 @@ const resizeAndDownload = () => {
   ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);
 
   a.href = canvas.toDataURL("image/jpeg", imgQuality);
-  a.downloadURL = new Date().getTime();
+  a.download = new Date().getTime(); // Corrected 'downloadURL' to 'download'
   a.click();
 };
 

diff --git a/Resize Image/style.css b/Resize Image/style.css
@@ -19,9 +19,7 @@ body {
     padding: 30px;
     background: #fff;
     border-radius: 9px;
-    transition: height 0.2 ease;
-
-
+    transition: height 0.2s ease;
 }
 
 .wrapper.active {
@@ -40,11 +38,9 @@ body {
 }
 
 .wrapper.active .upload-box {
-
     border: none;
 }
 
-
 .upload-box p {
     font-size: 1.06rem;
     margin-top: 20px;
@@ -73,7 +69,8 @@ body {
 }
 
 .content .row .column {
-    width: calc(100% / 2-15px);
+    width: calc(50% - 15px);
+    /* Adjusted calculation */
 }
 
 .row .column label {
@@ -88,8 +85,8 @@ body {
     padding: 0 15px;
     font-size: 1.06rem;
     border-radius: 4px;
-    border: 1px sloid #aaa;
-
+    border: 1px solid #aaa;
+    /* Corrected typo 'sloid' to 'solid' */
 }
 
 .size .column input:focus {