alex-willi · solsarr · Dec 8, 2022 · Dec 8, 2022 · Dec 8, 2022 · Dec 8, 2022
diff --git a/public/index.html b/public/index.html
@@ -14,9 +14,11 @@
 <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&family=PT+Sans&display=swap" rel="stylesheet">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet
+
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/App.css b/src/App.css
@@ -75,6 +75,7 @@ body{
 }
 .sevenData{
   font-size: 15px;
+
   height:10px
 }
 .dayOne{
@@ -88,4 +89,5 @@ body{
 }
 .today{
   font-family: 'PT Sans', sans-serif;
+
 }
diff --git a/src/App.js b/src/App.js
@@ -1,3 +1,4 @@
+
 import "./App.css";
 import Data from "./components/Data";
 

diff --git a/src/components/Data.js b/src/components/Data.js
@@ -5,20 +5,8 @@ import Today from "./Today";
 import DateTime from "./DateTime";
 
 export default function Data() {
-  //   const [city, setCity] = useState([]);
-  //   const getData = () => {
-  //     fetch("data.json")
-  //       .then(function (response) {
-  //         return response.json();
-  //       })
-  //       .then(function (myJson) {
-  //         setCity(myJson);
-  //       });
-  //   };
-  //   useEffect(() => {
-  //     getData();
-  //     console.log(city);
-  //   }, []);
+
+
   const [threeDay, setThreeDay] = useState(false);
 
   const handleClick = () => {
@@ -35,11 +23,17 @@ export default function Data() {
     setCurrentDay((current) => !current);
   };
 
-  const [data, setData] = useState(null);
+
+
+ const [data, setData] = useState(null);
   async function handleData() {
     try {
       const foundData = await fetch(
+
+
+
         "https://api.open-meteo.com/v1/forecast?latitude=39.10&longitude=-94.58&daily=weathercode,temperature_2m_max,temperature_2m_min,precipitation_sum,windspeed_10m_max&temperature_unit=fahrenheit&windspeed_unit=mph&precipitation_unit=inch&timezone=auto"
+
       );
       const weatherData = await foundData.json();
       setData(weatherData);
@@ -57,7 +51,10 @@ export default function Data() {
 
   return (
     <div>
+
+
       <div className=""></div>
+
       <div className="dataWrap" style={{ border: "1px solid black" }}>
         <div className="time" style={{ border: "1px solid black" }}>
           <DateTime />
@@ -69,6 +66,31 @@ export default function Data() {
         {sevenDay && <Forecast7 {...data} />}
       </div>
       <div className="btnWrap" style={{ border: "1px solid black" }}>
+
+
+
+        <button
+          className="seven"
+          onClick={() => {
+            handleDay();
+            setThreeDay(false);
+            setCurrentDay(false);
+          }}
+          disabled={sevenDay ? true : false}
+        >
+          7 Day
+        </button>
+        <button
+          className="three"
+          onClick={() => {
+            handleClick();
+            setSevenDay(false);
+            setCurrentDay(false);
+          }}
+          disabled={threeDay ? true : false}
+        >
+          3 Day
+
         <button
           className="three"
           onClick={() => {
@@ -91,11 +113,14 @@ export default function Data() {
           disabled={sevenDay ? true : false}
         >
           1 Week
+
         </button>
         <button
           className="todayBtn"
           onClick={() => {
+
             handleToday();
+
             setSevenDay(false);
             setThreeDay(false);
           }}
@@ -106,4 +131,8 @@ export default function Data() {
       </div>
     </div>
   );
+
 }
+
+}
+
diff --git a/src/components/DateTime.js b/src/components/DateTime.js
@@ -1,19 +1,22 @@
-import React, { useState, useEffect } from "react";
 
-export const DateTime = () => {
-  const [date, setDate] = useState(new Date());
-  useEffect(() => {
-    let timer = setInterval(() => setDate(new Date()), 1000);
-    return function cleanup() {
-      clearInterval(timer);
-    };
-  });
+import React, {useState, useEffect} from "react";
 
-  return (
-    <div>
-      <p></p>
-      <p className="time"> Time : {date.toLocaleTimeString()}</p>
-    </div>
-  );
-};
-export default DateTime;
+
+
+  export const DateTime = () => {
+        const [date,setDate] = useState(new Date());
+        useEffect(() => {
+            let timer = setInterval(()=>setDate(new Date()),1000)
+            return function cleanup(){
+                clearInterval(timer)
+            }
+        });
+
+    return(
+        <div>
+            <p></p>
+            <p className="time"> Time : {date.toLocaleTimeString()}</p>
+        </div>
+    )
+}
+    export default DateTime
diff --git a/src/components/Seven.js b/src/components/Seven.js
@@ -1,96 +1,98 @@
 export default function Forecast7(data) {
-  return (
-    <div className="sevenData">
-      <div
-        className="day1"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date Today: {data.daily.time[0].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[0]}F - High:{" "}
-          {data.daily.temperature_2m_max[0]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[0]}"
-        </p>
-      </div>
-
-      <div
-        className="day2"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[1].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[1]}F - High:{" "}
-          {data.daily.temperature_2m_max[1]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[1]}"
-        </p>
-      </div>
-
-      <div
-        className="day3"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[2].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[2]}F - High:{" "}
-          {data.daily.temperature_2m_max[2]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[2]}"
-        </p>
-      </div>
 
-      <div
-        className="day4"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[3].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[3]}F - High:{" "}
-          {data.daily.temperature_2m_max[3]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[3]}"
-        </p>
+    return (
+      <div className="sevenData">
+        <div
+          className="day1"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date Today: {data.daily.time[0].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[0]}F - High:{" "}
+            {data.daily.temperature_2m_max[0]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[0]}"
+          </p>
+        </div>
+
+        <div
+          className="day2"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)", backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[1].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[1]}F - High:{" "}
+            {data.daily.temperature_2m_max[1]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[1]}"
+          </p>
+        </div>
+
+        <div
+          className="day3"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[2].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[2]}F - High:{" "}
+            {data.daily.temperature_2m_max[2]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[2]}"
+          </p>
+        </div>
+
+        <div
+          className="day4"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[3].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[3]}F - High:{" "}
+            {data.daily.temperature_2m_max[3]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[3]}"
+          </p>
+        </div>
+
+        <div
+          className="day5"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[4].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[4]}F - High:{" "}
+            {data.daily.temperature_2m_max[4]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[4]}"
+          </p>
+        </div>
+
+        <div
+          className="day6"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[5].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[5]}F - High:{" "}
+            {data.daily.temperature_2m_max[5]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[5]}"
+          </p>
+        </div>
+
+        <div
+          className="day7"
+          style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)",backgroundColor: 'rgba(255,255,255, .2' }}
+        >
+          <p>
+            {" "}
+            Date: {data.daily.time[6].slice(5)} Low:{" "}
+            {data.daily.temperature_2m_min[6]}F - High:{" "}
+            {data.daily.temperature_2m_max[6]}F - Inches of rain:{" "}
+            {data.daily.precipitation_sum[6]}"
+          </p>
+        </div>
       </div>
+    );
+  }
 
-      <div
-        className="day5"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[4].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[4]}F - High:{" "}
-          {data.daily.temperature_2m_max[4]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[4]}"
-        </p>
-      </div>
-
-      <div
-        className="day6"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[5].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[5]}F - High:{" "}
-          {data.daily.temperature_2m_max[5]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[5]}"
-        </p>
-      </div>
-
-      <div
-        className="day7"
-        style={{ border: "1px solid black", borderColor: "rgba(0, 0, 0, .2)" }}
-      >
-        <p>
-          {" "}
-          Date: {data.daily.time[6].slice(5)} Low:{" "}
-          {data.daily.temperature_2m_min[6]}F - High:{" "}
-          {data.daily.temperature_2m_max[6]}F - Inches of rain:{" "}
-          {data.daily.precipitation_sum[6]}"
-        </p>
-      </div>
-    </div>
-  );
-}
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@

		import "./App.css";
		import Data from "./components/Data";

Expand Down