diff --git a/pages/api/data.js b/pages/api/data.js new file mode 100644 index 0000000..6d195c4 --- /dev/null +++ b/pages/api/data.js @@ -0,0 +1,8 @@ +export default async function handler(req, res) { + const { input } = req.body; + const getWeatherData = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${input}&units=metric&appid=${process.env.OPENWEATHER_API_KEY}` + ); + const data = await getWeatherData.json(); + res.status(200).json(data); +} diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index df63de8..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function handler(req, res) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/index.js b/pages/index.js index 08145bb..7798663 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,69 +1,44 @@ -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' +import { useState } from "react"; +import styles from "../styles/Home.module.css"; +import Image from "next/image"; export default function Home() { + const [input, setInput] = useState(); + const [weatherData, setWeatherData] = useState(); + + const clickHandler = async () => { + const res = await fetch("/api/data", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ input }), + }); + const data = await res.json(); + setWeatherData({ ...data }); + console.log(data); + }; return ( -
- - Create Next App - - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - +
+

My weather app {input}

+ setInput(e.target.value)} /> + + {weatherData && ( + <> +

+ {weatherData.name}, {weatherData.sys.country} +

+

+ {Math.round(weatherData.main.temp)}° +

+

Feels like {weatherData.main.feels_like}°

+ + )}
- ) + ); } + +// export const getServerSideProps = async () => { +// const res = async fetch() +// console.log(process.env.OPENWEATHER_API_KEY); + +// return { props: {} }; +// }; diff --git a/public/icons/001-cloudy day.svg b/public/icons/001-cloudy day.svg new file mode 100644 index 0000000..9cc3a71 --- /dev/null +++ b/public/icons/001-cloudy day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/002-sunny.svg b/public/icons/002-sunny.svg new file mode 100644 index 0000000..48c9c89 --- /dev/null +++ b/public/icons/002-sunny.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/003-sunny.svg b/public/icons/003-sunny.svg new file mode 100644 index 0000000..a49fcb7 --- /dev/null +++ b/public/icons/003-sunny.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/004-thunderstorm.svg b/public/icons/004-thunderstorm.svg new file mode 100644 index 0000000..92d2838 --- /dev/null +++ b/public/icons/004-thunderstorm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/005-cloudy.svg b/public/icons/005-cloudy.svg new file mode 100644 index 0000000..49780bb --- /dev/null +++ b/public/icons/005-cloudy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/006-snowy.svg b/public/icons/006-snowy.svg new file mode 100644 index 0000000..c54233a --- /dev/null +++ b/public/icons/006-snowy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/007-windy.svg b/public/icons/007-windy.svg new file mode 100644 index 0000000..8ba4093 --- /dev/null +++ b/public/icons/007-windy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/008-snowy.svg b/public/icons/008-snowy.svg new file mode 100644 index 0000000..85f2333 --- /dev/null +++ b/public/icons/008-snowy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/009-rainy.svg b/public/icons/009-rainy.svg new file mode 100644 index 0000000..da62dac --- /dev/null +++ b/public/icons/009-rainy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/010-night.svg b/public/icons/010-night.svg new file mode 100644 index 0000000..70c87ec --- /dev/null +++ b/public/icons/010-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/011-night.svg b/public/icons/011-night.svg new file mode 100644 index 0000000..63d2882 --- /dev/null +++ b/public/icons/011-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/012-rainy.svg b/public/icons/012-rainy.svg new file mode 100644 index 0000000..6e3055a --- /dev/null +++ b/public/icons/012-rainy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/013-rainbow.svg b/public/icons/013-rainbow.svg new file mode 100644 index 0000000..cf959b0 --- /dev/null +++ b/public/icons/013-rainbow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/014-thunderstorm.svg b/public/icons/014-thunderstorm.svg new file mode 100644 index 0000000..dd15db3 --- /dev/null +++ b/public/icons/014-thunderstorm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/015-rainy.svg b/public/icons/015-rainy.svg new file mode 100644 index 0000000..e5eceb2 --- /dev/null +++ b/public/icons/015-rainy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/016-sunrise.svg b/public/icons/016-sunrise.svg new file mode 100644 index 0000000..61a4c6b --- /dev/null +++ b/public/icons/016-sunrise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/017-sunset.svg b/public/icons/017-sunset.svg new file mode 100644 index 0000000..25da2cd --- /dev/null +++ b/public/icons/017-sunset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/018-high tide.svg b/public/icons/018-high tide.svg new file mode 100644 index 0000000..eea9266 --- /dev/null +++ b/public/icons/018-high tide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/019-low tide.svg b/public/icons/019-low tide.svg new file mode 100644 index 0000000..210a0d5 --- /dev/null +++ b/public/icons/019-low tide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/020-Hailstorm.svg b/public/icons/020-Hailstorm.svg new file mode 100644 index 0000000..615dab9 --- /dev/null +++ b/public/icons/020-Hailstorm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/021-cloudy night.svg b/public/icons/021-cloudy night.svg new file mode 100644 index 0000000..e8b923c --- /dev/null +++ b/public/icons/021-cloudy night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/022-humidity.svg b/public/icons/022-humidity.svg new file mode 100644 index 0000000..96ea179 --- /dev/null +++ b/public/icons/022-humidity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/023-moon phase.svg b/public/icons/023-moon phase.svg new file mode 100644 index 0000000..07cc4b5 --- /dev/null +++ b/public/icons/023-moon phase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/024-temperature.svg b/public/icons/024-temperature.svg new file mode 100644 index 0000000..797a965 --- /dev/null +++ b/public/icons/024-temperature.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/025-temperature.svg b/public/icons/025-temperature.svg new file mode 100644 index 0000000..344444e --- /dev/null +++ b/public/icons/025-temperature.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/026-weather alert.svg b/public/icons/026-weather alert.svg new file mode 100644 index 0000000..9e9ea14 --- /dev/null +++ b/public/icons/026-weather alert.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/027-location.svg b/public/icons/027-location.svg new file mode 100644 index 0000000..f5ba8a9 --- /dev/null +++ b/public/icons/027-location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/028-wind vane.svg b/public/icons/028-wind vane.svg new file mode 100644 index 0000000..5535374 --- /dev/null +++ b/public/icons/028-wind vane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/029-wave.svg b/public/icons/029-wave.svg new file mode 100644 index 0000000..013d2c5 --- /dev/null +++ b/public/icons/029-wave.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/030-weather app.svg b/public/icons/030-weather app.svg new file mode 100644 index 0000000..5205cf0 --- /dev/null +++ b/public/icons/030-weather app.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/031-weather forecast.svg b/public/icons/031-weather forecast.svg new file mode 100644 index 0000000..390cdfa --- /dev/null +++ b/public/icons/031-weather forecast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/032-snowy.svg b/public/icons/032-snowy.svg new file mode 100644 index 0000000..0c92fed --- /dev/null +++ b/public/icons/032-snowy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/033-rainy day.svg b/public/icons/033-rainy day.svg new file mode 100644 index 0000000..3e6361f --- /dev/null +++ b/public/icons/033-rainy day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/034-sun.svg b/public/icons/034-sun.svg new file mode 100644 index 0000000..c42b49e --- /dev/null +++ b/public/icons/034-sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/035-night.svg b/public/icons/035-night.svg new file mode 100644 index 0000000..b809362 --- /dev/null +++ b/public/icons/035-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/036-night.svg b/public/icons/036-night.svg new file mode 100644 index 0000000..1e3a409 --- /dev/null +++ b/public/icons/036-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css index 35454bb..5bbbf0a 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,121 +1,10 @@ -.container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; -} - -.main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { +.wrapper { + max-width: 1200px; + margin: 0 auto; + /* border: 1px solid grey; */ text-align: center; } -.description { - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - width: 45%; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } +.mainTemp { + font-size: 84px; } diff --git a/styles/globals.css b/styles/globals.css index e5e2dcc..8c2fec4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,16 +1,26 @@ -html, -body { +@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); + +* { padding: 0; margin: 0; + box-sizing: border-box; +} + +html, +body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + background-image: radial-gradient( + circle 993px at 0.5% 50.5%, + rgba(137, 171, 245, 0.37) 0%, + rgba(245, 247, 252, 1) 100.2% + ); + /* background-image: linear-gradient( 112.1deg, rgba(32,38,57,1) 11.4%, rgba(63,76,119,1) 70.2% ); */ + font-family: "Varela Round", sans-serif; + min-height: 100vh; } a { color: inherit; text-decoration: none; } - -* { - box-sizing: border-box; -}