Updated files to pass checks

Author: suraj-singh127

URL Shortener API Master/css/style.css

@@ -19,7 +19,7 @@
 }
 
 body{
-  padding: 0rem;
+  padding: 0;
   max-width: 1440px;
   margin: auto;
 }
@@ -42,7 +42,7 @@ body{
   height: 4px;
   width: 1.5rem;
   background-color: black;
-  margin: 5px 0px;
+  margin: 5px 0;
   transition: 0.2s;
 }
 
@@ -62,14 +62,14 @@ body{
 /* /////////////////////////////////////////// Navlist //////////////////////////////////////////////*/
 
 .navlist{
-  margin: 0rem auto 0rem 0rem; 
+  margin: 0 auto 0 0; 
   display: flex;
   margin-top: 0;
 }
 
 .listItem{
   list-style: none;
-  padding: 0rem 1rem;
+  padding: 0 1rem;
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--nuetralGray);
@@ -166,25 +166,25 @@ body{
 .header{
   display: flex;
   margin: 2rem 4rem;
-  padding: 1rem 0rem;
+  padding: 1rem 0;
 }
 
 .content h1{
   font-size: 4.8rem;
   line-height: 99px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   font-weight: 700;
   color: var(--veryDarkBlue);
   letter-spacing: -4px;
 }
 
 .content {
-  padding: 0rem 4rem;
+  padding: 0 4rem;
 }
 
 .content p{
   color: var(--grayishViolet);
-  padding: 0rem 3rem 0rem 0rem;
+  padding: 0 3rem 0 0;
   font-size: 1.3rem;
 }
 
@@ -194,7 +194,6 @@ body{
 
 .getStarted{
   cursor: pointer;  
-  padding: 0.2rem 1.4rem;
   margin: 0.3rem;
    background-color: var(--primaryCyan);
    border-radius: 30px;
@@ -218,7 +217,7 @@ body{
    .header{
      flex-wrap: wrap-reverse;
      justify-content: center;
-     margin: 2rem 2rem;
+     margin: 2rem;
    }
    .illustration{
      margin-right: 0;
@@ -233,7 +232,7 @@ body{
     width: 20rem;
   }
   .content{
-    padding: 0rem;
+    padding: 0;
   }
   .content h1{
     font-size: 2.7rem;
@@ -247,7 +246,7 @@ body{
 /* /////////////////////////////////////////// Shortened Link //////////////////////////////////////////////////////*/
 
 .formContainer{
-  background-color:rgb(240,241,246);;
+  background-color:rgb(240,241,246);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -306,7 +305,6 @@ body{
 .submit{
   position: relative;
   cursor: pointer;  
-  padding: 0.2rem 1.4rem;
   margin: 0.3rem;
    background-color: var(--primaryCyan);
    border-radius: 10px;
@@ -352,7 +350,6 @@ body{
 
 .copyLink{
   cursor: pointer;  
-  padding: 0.2rem 1.4rem;
   margin: 0.3rem;
    background-color: var(--primaryCyan);
    border-radius: 10px;
@@ -385,27 +382,25 @@ body{
 
   .form{
     flex-direction: column;
-    padding: 1.2rem 0rem;
+    padding: 1.2rem 0;
     margin-left: 0.2rem;
     margin-right: 0.2rem;
     width: 90%;
   }
 
   .wrapper{
     position: relative;
-  }
-
-  .wrapper{
     flex-direction: column;
   }
 
+
   .wrongLinkText{
     bottom: 30%;
   }
 
   .submit{
-     padding: 1rem 0rem;
-     width: 70%;
+     padding: 1rem 0;
+     width: 88%;
   }
 
   .shortenedLink{
@@ -414,22 +409,19 @@ body{
   }
 
   .linkItems{
-    margin: 0.3rem 0rem;
+    margin-top: 0.3rem 0;
   }
 
   .copyLink{
     width: 100%;
-    margin: 0.5rem 0rem;
+    margin: 0.5rem 0;
   }
 
   .default{
     width: 80%;
     margin: 1.4rem;
   }
 
-  .submit{
-    width: 88%;
-  }
   .originalLink{
     max-width: 300px;
   }
@@ -444,7 +436,10 @@ body{
   justify-content: center;
   flex-direction: column;
   text-align: center;
-  margin: 4rem 0rem 2rem 0rem;
+  margin-top: 4rem;
+  margin-right: 0;
+  margin-bottom: 2rem;
+  margin-left: 0;
 }
 
 .infoContainer h2{
@@ -469,7 +464,7 @@ body{
    background-image: url(/images/line.png);
    background-position: center;
    background-size: contain;
-   margin: 0rem 2rem;
+   margin: 0 2rem;
 }  
 
 .icon{
@@ -487,7 +482,6 @@ body{
 .cards{
   background-color: white;
   padding: 2.5rem 2rem;
-  width: 20rem;
   border-radius: 10px;
   margin: 3rem 1rem;
   width: 100%;
@@ -531,7 +525,7 @@ body{
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    margin: 3rem 0rem;
+    margin: 3rem 0;
   }
 
 }
@@ -544,7 +538,7 @@ body{
     background-image: url(/images/verticalLineMobile.png);
     background-size:contain;
     background-repeat: no-repeat;
-    background-position-x: 0px;
+    background-position-x: 0;
   }
 
 }
@@ -567,7 +561,10 @@ body{
 }
 
 .advert .getStarted{
-   margin: 0.6rem 0rem 2.2rem 0rem ;
+  margin-top: 0.6rem;
+  margin-right: 0;
+  margin-bottom: 2.2rem;
+  margin-left: 0;
 }
 
 /* Media Query for handling advert */
@@ -576,7 +573,10 @@ body{
     .advert h2{
       text-align: center;
       font-size: 1.5rem;
-      margin: 5rem 0rem 0rem 0rem;
+      margin-top: 5rem;
+      margin-bottom: 0;
+      margin-left: 0;
+      margin-right: 0;
     }
 
     .advert .getStarted{
@@ -653,7 +653,7 @@ body{
    }
 
    .footerList{
-     padding: 0rem 3rem;
+     padding: 0 3rem;
    }
 }
 
@@ -668,7 +668,7 @@ body{
 
 .fListItem:first-child{
   font-weight: 700;
-  margin: 2rem 0rem;
+  margin: 2rem 0;
 }
 
 

URL Shortener API Master/index.html

@@ -26,7 +26,7 @@
     <div class="logo">
       <img src="images/logo.svg" alt="">
     </div>
-    <div class="hamburgerIcon" onclick="handler(this)">
+    <div class="hamburgerIcon">
       <p class="bar1"></p>
       <p class="bar2"></p>
       <p class="bar3"></p>

URL Shortener API Master/js/app.js

@@ -1,15 +1,11 @@
-//To do - 
-// 1. To make the error message on empty link
-
-
+//Running the generate element function to generate all the shortened links stored in local storage
 generateElement();
 
-//Function to trigger hamburger Icon
-function handler(element){
+document.querySelector('.hamburgerIcon').addEventListener('click',()=>{
    element.classList.toggle('change');
    let navbar = document.querySelector('.navbar');
    navbar.classList.toggle('show');
-}
+});
 
 //Function to handle form submission
 let shortenBtn = document.getElementById('shorten');
@@ -89,7 +85,7 @@ function generateElement(){
       html+=`<div class="shortenedLink">
       <a href="${shortenedLinksArray[i].opLink}" class="originalLink linkItems" target="__blank">${shortenedLinksArray[i].opLink}</a>
       <a href="${shortenedLinksArray[i].shortLink}" class="shortened linkItems" target="__blank">${shortenedLinksArray[i].shortLink}</a>
-      <button class="copyLink linkItems" onclick="copyShortenedLink(this.parentElement,this)">Copy</button>
+      <button class="copyLink linkItems">Copy</button>
     </div>`
    }
    document.querySelector('.linksContainer').innerHTML = html;
@@ -108,6 +104,14 @@ function clipboard(linkToBeCopied){
    document.body.removeChild(textArea);
 }
 
+//Function to add event listener to copy links button
+document.body.addEventListener('click',function(event){
+   let target = event.target;
+   if(target.nodeName === "BUTTON" && /copyLink/.test(target.className)){
+      copyShortenedLink(target.parentElement,target);      
+   }
+})
+
 //Function to handle copy and paste operations
 function copyShortenedLink(parentElement,element){
    let shortenedLink = parentElement.childNodes[3].innerText;