first commit

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.css

@@ -1,38 +1,87 @@
-.App {
-  text-align: center;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.app.warm {
+  background-image: url('./assets/warm-bg.jpg');
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.search-container {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+}
+.search-container .search-input {
+  padding: 15px; 
+  color: #333;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 5px;    
+  font-size: 20px;
+  transition: 0.4s ease;
+}
+.search-button {
+  padding: 10px;
   color: white;
+  background-color: #333;
+  font-size: 18px;
+  border: none;
+  border-radius: 5px;
+  margin-left: 5px;
 }
+.app {
+  display: flex;
+  flex-direction: column;  
+  text-align: center;
+  height: 100vh;
+  width: 100vw;
+  text-align: center;
+  background-image: url('./assets/cold-bg.jpg');
+  background-size: cover;
+  background-position: bottom;
+  transition: 0.4 ease;
+  min-height: 100vh;
+  padding: 25px;
+}
+
 
-.App-link {
-  color: #61dafb;
+.location {
+  color: #FFF;
+  font-size: 32px;
+  font-weight: 500;
+  text-align: center;
+  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);
+}
+
+.date {
+  color: #008080;
+  font-size: 20px;
+  font-weight: 500;
+  font-style: italic;
+  text-align: center;
+  text-shadow: 2px 2px rgba(50, 50, 70, 0.5);
+}
+.temp {
+  position: relative;
+  display: inline-block;
+  margin: 30px auto;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 15px 25px;
+  color: #c0c0c0;
+  font-size: 102px;
+  font-weight: 900;
+  text-shadow: 3px 6px rgba(50, 50, 70, 0.5);
+  text-align: center;
+  box-shadow: 3px 6px rgba(0, 0, 0, 0.2);
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.weather {
+  color: #008080;
+  font-size: 48px;
+  font-weight: 700;
+  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);
 }
+.wrapper {
+  margin: 25px 0 0;
+}

src/App.js

@@ -1,23 +1,57 @@
-import logo from './logo.svg';
+
+import React, { useState } from 'react';
+import moment from 'moment'
 import './App.css';
+const api = {
+  key: "858f15fed9292cbe25c341a754c55e45",
+  base: "https://api.openweathermap.org/data/2.5/"
+}
 
 function App() {
+  const [location, setLocation] = useState('');
+  const [weather, setWeather] = useState({});
+  const search = () => {
+    console.log('hello');
+    getData(location);
+  }
+  const getData = async (location) => {
+    let url = `${api.base}weather?q=${location}&APPID=${api.key}`
+    try {
+        const response = await fetch(url);
+        const json = await response.json();
+        setWeather(json);
+      } catch (error) {
+        console.log("error", error);
+    }
+};
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className={(typeof weather.main != "undefined") ? ((weather.main.temp - 273.15 > 19) ? 'app warm' : 'app') : 'app'}>        
+    {/* </div><div className="app"> */}
+      <div className="search-container">
+        <input 
+            type="text"
+            className="search-input"
+            placeholder="Enter the location"
+            onChange={e => setLocation(e.target.value)}
+            value={location}
+          />
+          <button className="search-button" onClick={search}>Search</button>
+      </div>
+      {
+        (Object.keys(weather).length > 0 && weather.constructor === Object ) && 
+        <div className="wrapper">
+          <div className="location-container">
+            <div className="location">{weather?.main?.name}</div>
+            <div className="date">{moment(new Date()).format('MMM Do, YYYY')}</div>
+          </div>
+          <div className="weather-container">
+            <div className="temp">
+              {`${Math.floor(weather?.main?.temp - 273.15)}° C`}
+            </div>
+            <div className="weather">{weather?.weather?.[0].main}</div>
+          </div>
+        </div>
+      }                 
     </div>
   );
 }