From 03820e64de518f8d72f2d05964c976f117378cbf Mon Sep 17 00:00:00 2001
From: "harshabajaj41.0041" <harshabajaj41.0041@gmail.com>
Date: Mon, 23 Oct 2023 17:54:42 +0530
Subject: [PATCH] toggle button

---
 assets/css/style.css | 56 +++++++++++++++++++++++++++++++-------------
 index.html           | 55 +++++++++++++++++++++++--------------------
 2 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index cef2822..d12628d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -16,6 +16,7 @@ body {
   /* Scroll is required to see full info */
   position: relative;
 }
+
 /* .logo {
   position: fixed;
   top: 20px;
@@ -31,9 +32,12 @@ body {
 }
 
 .logo-img {
-  max-width: 50px; /* Adjust the maximum width */
-  max-height: 50px; /* Adjust the maximum height */
+  max-width: 50px;
+  /* Adjust the maximum width */
+  max-height: 50px;
+  /* Adjust the maximum height */
 }
+
 /* Hide scrollbar for IE, Edge and Firefox */
 body {
   -ms-overflow-style: none;
@@ -41,6 +45,7 @@ body {
   scrollbar-width: none;
   /* Firefox */
 }
+
 /* Inside your CSS file (style.css) */
 
 /* Header Text */
@@ -159,7 +164,7 @@ option:hover,
 input.weather-component__search-bar:focus {
   transition: 700ms;
   box-shadow: 0px 0px 10px rgb(255 255 255 / 50%);
-  
+
   border-radius: 30px 0 0 30px;
 }
 
@@ -175,6 +180,7 @@ input.weather-component__search-bar:focus {
   cursor: pointer;
   transition: 0.2s ease-in-out;
 }
+
 .weather-component__button-microphone {
   margin: 0.5em;
   border-radius: 50%;
@@ -186,8 +192,9 @@ input.weather-component__search-bar:focus {
   cursor: pointer;
   transition: 0.2s ease-in-out;
 }
-.button_container{
- background-color: white;
+
+.button_container {
+  background-color: white;
   border-radius: 0 30px 30px 0;
   display: flex;
 }
@@ -407,13 +414,16 @@ button:focus {
   z-index: 3000;
   right: 16px;
   font-size: 16px;
-  transform: translateY(-100%); /* Start off the screen */
-  transition: transform 0.25s ease-in-out; /* Transition for sliding */
+  transform: translateY(-100%);
+  /* Start off the screen */
+  transition: transform 0.25s ease-in-out;
+  /* Transition for sliding */
 }
 
 #toast.show {
   visibility: visible;
-  transform: translateY(0); /* Slide in from the top */
+  transform: translateY(0);
+  /* Slide in from the top */
 }
 
 
@@ -519,6 +529,7 @@ footer {
   margin-top: 20px;
   margin-bottom: 0;
 }
+
 /* Responsive */
 
 @media only screen and (min-width: 1200px) {
@@ -553,16 +564,20 @@ footer {
     /* border: 2px solid red; */
     margin: 1rem 0.15rem 0rem 0.15rem;
   }
+
   .nav-component {
     height: fit-content;
   }
+
   .whatsapp img {
     /* margin-top: 20px; */
   }
+
   .weather-component__card {
     padding: 7px;
     height: 460px;
   }
+
   .weather-component__card {
     margin: 0;
   }
@@ -578,9 +593,9 @@ footer {
 }
 
 .label {
-  width: 85px;
-  height: 40px;
-  background-color: #111;
+  width: 70px;
+  height: 39px;
+  background-color: rgba(255, 255, 255, 0.5);
   display: flex;
   border-radius: 50px;
   align-items: center;
@@ -593,7 +608,7 @@ footer {
 .ball {
   width: 35px;
   height: 35px;
-  background-color: white;
+  background-color: #3b5b79;
   position: absolute;
   top: 2px;
   left: 2px;
@@ -601,18 +616,20 @@ footer {
   transition: transform 0.2s linear;
 }
 
-.checkbox:checked + .label .ball {
-  transform: translateX(45px);
+.checkbox:checked+.label .ball {
+  transform: translateX(30px);
 }
 
 .celcius {
-  color: white;
+  color: #3b5b79;
   font-size: 15px;
+  font-weight: bold;
 }
 
 .farenheit {
-  color: white;
+  color: #3b5b79;
   font-size: 15px;
+  font-weight: bold;
 }
 
 .link1 {
@@ -623,11 +640,13 @@ footer {
   transition-property: scale();
   transition-duration: 0.5s;
 }
+
 .link1:hover {
   transform: scale(1.2, 1.2);
   transition-timing-function: linear;
   color: #ffffff;
 }
+
 .link2 {
   font-weight: 900;
   padding: 0.5rem 0.5rem;
@@ -635,10 +654,12 @@ footer {
   transition-property: scale();
   transition-duration: 0.5s;
 }
+
 .link2:hover {
   transform: scale(1.2, 1.2);
   transition-timing-function: linear;
 }
+
 .link3 {
   padding: 0.5rem 0.5rem;
   box-sizing: border-box;
@@ -647,11 +668,13 @@ footer {
   transition-property: scale();
   transition-duration: 0.5s;
 }
+
 .link3:hover {
   transform: scale(1.2, 1.2);
   transition-timing-function: linear;
   color: #d62976;
 }
+
 .link4 {
   padding: 0.5rem 0.5rem;
   box-sizing: border-box;
@@ -660,6 +683,7 @@ footer {
   transition-property: scale();
   transition-duration: 0.5s;
 }
+
 .link4:hover {
   transform: scale(1.2, 1.2);
   transition-timing-function: linear;
diff --git a/index.html b/index.html
index 301a6cb..4f63faf 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,9 @@
 
   <!-- jquery CDN -->
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
   <!-- fontawesome CDN -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -42,8 +44,8 @@
       <div class="nav-component__celcius-block col-auto">
         <input type="checkbox" id="unit" class="checkbox">
         <label for="unit" class="label">
-          <span class="farenheit">F°</span>
-          <span class="celcius">C°</span>
+          <span class="farenheit">°F</span>
+          <span class="celcius">°C</span>
           <div class='ball'>
         </label>
       </div>
@@ -77,27 +79,28 @@ <h2 class="header-component mt-5"> <span id='date-time'></span></h2>
                 <datalist id="place" class="weather-component__datalist">
                   <!-- Content will be generated By Javascript  -->
                 </datalist>
-<div class="button_container">
-                <button class="weather-component__button text-white rounded-circl"
-                  aria-label="click here to search class">
-                  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
-                    width="1.5em" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
-                    </path>
-                  </svg>
-                </button>
-                <button class="weather-component__button-microphone" aria-label="speak" id="microphone-button">
-                  <svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                    fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
-                    <path
-                      d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
-                      fill="white"></path>
-                    <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"
-                      fill="white"></path>
-                  </svg>
-                </button>
-</div>
+                <div class="button_container">
+                  <button class="weather-component__button text-white rounded-circl"
+                    aria-label="click here to search class">
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
+                      height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
+                      </path>
+                    </svg>
+                  </button>
+                  <button class="weather-component__button-microphone" aria-label="speak" id="microphone-button">
+                    <svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                      fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
+                      <path
+                        d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
+                        fill="white"></path>
+                      <path
+                        d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"
+                        fill="white"></path>
+                    </svg>
+                  </button>
+                </div>
               </div>
               <div id="weather" class="weather-component__data loading">
                 <h1 id="city" class="weather-component__city-name fw-bold">Weather in ___</h1>
@@ -197,8 +200,8 @@ <h2 class="textfooter">
           </li>
           <li>
             <a href="https://twitter.com/Lets__Code/" target="_blank">
-              <i class="fa-brands fa-x-twitter fa-3x link4"></i>          
-            </li>
+              <i class="fa-brands fa-x-twitter fa-3x link4"></i>
+          </li>
         </ul>
       </div>
     </div>