Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
madarsbiss
2021-07-16 23:05:27 +03:00
parent de2fba45a3
commit 4593c3cabd
41 changed files with 105 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/api/data.js Normal file
View File

@@ -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);
}

5
pages/api/hello.js
View File

@@ -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' })
}

103
pages/index.js
View File

@@ -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 (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
<div className={styles.wrapper}>
<h1>My weather app {input}</h1>
<input type="text" onChange={(e) => setInput(e.target.value)} />
<button onClick={clickHandler}>Send</button>
{weatherData && (
<>
<h1>
{weatherData.name}, {weatherData.sys.country}
</h1>
<h1 className={styles.mainTemp}>
{Math.round(weatherData.main.temp)}°
</h1>
<p>Feels like {weatherData.main.feels_like}°</p>
</>
)}
</div>
)
);
}
// export const getServerSideProps = async () => {
// const res = async fetch()
// console.log(process.env.OPENWEATHER_API_KEY);
// return { props: {} };
// };