href fixes

Author: akshayitzme

.gitignore

@@ -0,0 +1 @@
+node_modules

src/App.js

@@ -22,8 +22,6 @@ import fogImg from "./icons/017-foog.png";
 import sunImg from "./icons/039-sun.png";
 import loader from "./icons/810.gif";
 
-const inputElm = document.querySelector("#cityInput");
-
 function App() {
   // State
   const [isInit, setInit] = useState(0);
@@ -96,8 +94,6 @@ function App() {
     }
   };
 
-  const getQuote = () => {};
-
   const getWeather = async () => {
     let city = document.querySelector("#cityInput").value;
     console.log(city);
@@ -164,7 +160,7 @@ function App() {
                       onClick={getWeather}
                     >
                       {isLoading ? (
-                        <img src={loader} className="loader" />
+                        <img alt="loaderr" src={loader} className="loader"/>
                       ) : (
                         <i className="bi bi-caret-right fs-6"></i>
                       )}

src/Components/HumidityCard.js

@@ -16,9 +16,9 @@ const HumidityCard= (props)=>{
                       <span>%</span> 
                   </div>
                   <div className="d-flex flex-column justify-content-center ">
-                      <a href="#" data-toggle="tooltip" data-placement="top" title="Precipitation is a form of water from the atmosphere" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Precipitation: <span className="text-white">{props.preci} mb</span></a>
-                      <a href="#" data-toggle="tooltip" data-placement="top" title="Visibility is a measure of the distance at which an object or light can be clearly discerned." className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Visibiltiy: <span className="text-white">{props.vis} k.m</span></a>
-                      <a href="#" data-toggle="tooltip" data-placement="top" title="The dew point is the temperature the air needs to be cooled to (at constant pressure) in order to achieve a relative humidity (RH) of 100%" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Dew Point: <span className="text-white">{props.dpt} ℃</span></a>
+                      <button className="bg-transparent border-bottom border-0  border-warning clr-31 fw-bold text-decoration-none">Precipitation: <span className="text-white">{props.preci} mb</span></button>
+                      <button  className="bg-transparent border-bottom border-0  border-warning clr-31 fw-bold text-decoration-none">Visibiltiy: <span className="text-white">{props.vis} k.m</span></button>
+                      <button  className="bg-transparent border-bottom border-0  border-warning clr-31 fw-bold text-decoration-none">Dew Point: <span className="text-white">{props.dpt} ℃</span></button>
                     </div>
               </div>
         </div>

src/Components/PressureCard.js

@@ -17,9 +17,9 @@ const PressureCard= (props)=>{
                         <span>mb</span> 
                     </div>
                     <div className="d-flex flex-column justify-content-center">
-                        <a href="#" data-toggle="tooltip" data-placement="top" title="atmospheric pressure at mean sea level" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Sea Level: <span className="text-white">{props.slp}</span></a>
-                        <a href="#" data-toggle="tooltip" data-placement="top" title="The UVI is a measure of the level of UV radiation" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">UV Index: <span className="text-white">{props.uvi}</span></a>
-                        <a href="#" data-toggle="tooltip" data-placement="top" title="electromagnetic radiation emitted by the sun" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Radiation: <span className="text-white">{props.sr}</span></a>
+                        <button className="bg-transparent border-bottom border-0 border-warning clr-31 fw-bold text-decoration-none">Sea Level: <span className="text-white">{props.slp}</span></button>
+                        <button className="bg-transparent border-bottom border-0 border-warning clr-31 fw-bold text-decoration-none">UV Index: <span className="text-white">{props.uvi}</span></button>
+                        <button className="bg-transparent border-bottom border-0 border-warning clr-31 fw-bold text-decoration-none">Radiation: <span className="text-white">{props.sr}</span></button>
                     </div>
 
                 </div>

src/Components/WindSpdCard.js

@@ -17,9 +17,9 @@ const WindSpdCard= (props)=>{
                             <span>m/s</span> 
                         </div>
                         <div className="d-flex flex-column justify-content-center ">
-                            <a href="#" data-toggle="tooltip" data-placement="top" title="direction the wind is coming from" className="border-bottom border-2 border-warning text- clr-31 fw-bold text-decoration-none text-capitalize">Direction: <span className="text-white">{props.windDir}</span></a>
-                            <a href="#" data-toggle="tooltip" data-placement="top" title="refers to the fraction of the sky obscured by clouds when observed from a particular location" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Clouds: <span className="text-white">{props.cloudIndex}</span></a>
-                            <a href="#" data-toggle="tooltip" data-placement="top" title="Air quality is a measure of how clean or polluted the air is" className="border-bottom border-2 border-warning clr-31 fw-bold text-decoration-none">Air Quality: <span className="text-white">{props.airQuality}</span></a>
+                            <button  className="bg-transparent  border-bottom border-0 border-warning text- clr-31 fw-bold text-decoration-none text-capitalize">Direction: <span className="text-white">{props.windDir}</span></button>
+                            <button className="bg-transparent  border-bottom border-0 border-warning clr-31 fw-bold text-decoration-none">Clouds: <span className="text-white">{props.cloudIndex}</span></button>
+                            <button  className="bg-transparent  border-bottom border-0 border-warning clr-31 fw-bold text-decoration-none">Air Quality: <span className="text-white">{props.airQuality}</span></button>
                         </div>
                     </div>