Merge branch 'main' into patch-3

tajulafreen · web-flow · commit 036b2779dab7 · 2024-07-10T01:27:02.000+05:30
diff --git a/Source-Code/BluringImage/index.html b/Source-Code/BluringImage/index.html
@@ -3,13 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bluring Image</title>
+    <title>Blurring Image</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="loading-text">0%</div>
     <section class="bg"></section>
     
-    <script src="script.js"></script>  
+    <script src="script.js" defer></script>  
 </body>
-</html>
+</html>
diff --git a/Source-Code/BluringImage/script.js b/Source-Code/BluringImage/script.js
@@ -2,20 +2,23 @@ document.addEventListener("DOMContentLoaded", () => {
     const loadingText = document.querySelector(".loading-text");
     const bg = document.querySelector(".bg");
     let load = 0;
+  
+  // Function to update the loading state and apply styles
+  const blurring = () => {
+    load++;
+    if (load > 99) {
+      clearInterval(intervalId);
+    }
+    loadingText.innerText = `${load}%`;
+    loadingText.style.opacity = scale(load, 0, 100, 1, 0);
+    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
+  };
 
-    const blurring = () => {
-        load += 1;
-        if (load > 99) {
-            clearInterval(int);
-        }
-        loadingText.innerText = `${load}%`;
-        loadingText.style.opacity = scale(load, 0, 100, 1, 0);
-        bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
-    };
+  // Start the interval to run the blurring function every 20ms
+  const intervalId = setInterval(blurring, 20);
 
-    const int = setInterval(blurring, 20);
-
-    const scale = (num, inMin, inMax, outMin, outMax) => {
-        return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    };
+  // Utility function to scale a number from one range to another
+  const scale = (num, inMin, inMax, outMin, outMax) => {
+    return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  };
 });
diff --git a/Source-Code/SplitLanding-Page/style.css b/Source-Code/SplitLanding-Page/style.css
@@ -58,16 +58,13 @@ h1 {
 .split {
   position: absolute;
   width: 50%;
-  height: 50%;
+  height: 100%;
   overflow: hidden;
 }
 
 .split.left {
   left: 0;
-  background: url(./assets/ps5.webp);
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 100%;
+  background: url(./assets/ps5.webp) no-repeat center center/cover;
 }
 
 .split.left::before {
@@ -87,10 +84,7 @@ h1 {
 
 .split.right {
   right: 0;
-  background: url(./assets/boxseries.jpeg);
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 100%;
+  background: url(./assets/boxseries.jpeg) no-repeat center center/cover;
 }
 
 .split.right::before {
