Skip to content

Weather accordion #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
9 commits merged into from
Aug 1, 2022
Merged

Weather accordion #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d7c001b
created a weather tips modal to repace the text section
Jul 30, 2022
bf25268
sorted spacing and a few spelling errors
Jul 30, 2022
bc8215a
updated weather modal text
Jul 31, 2022
9a74e06
made weather cards responsive - still more tweaking to do but majorit…
Jul 31, 2022
a64d47a
added weather image to main weather container
Jul 31, 2022
68c3438
added border to the 4 day forecast weather cards
Jul 31, 2022
34c5084
created a unix time stamp fucntion to change from unix to a human rea…
Jul 31, 2022
968e9fb
added margin top to weather div
Aug 1, 2022
ec69dbc
chnaged footer class name
Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 31 additions & 18 deletions project-app/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,34 @@
import Link from "next/link";
import {
AiFillFacebook,
AiFillInstagram,
AiOutlineTwitter,
} from "react-icons/ai";

import Link from "next/link"
import {AiFillFacebook,AiFillInstagram,AiOutlineTwitter} from "react-icons/ai";





export default function Footer () {
return (
<footer className=" border-black border-2 h-20 m-[0.2rem] pl-[43%] bg-[#004F54]">
<div class="flex justify-evenly items-center space-x-8 space-y-1 h-auto w-min">
<div class="item w-12 h-12"><a href="https://www.facebook.com" target='blank'><AiFillFacebook className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
<div class="item w-12 h-12"><a href="https://www.instagram.com" target='blank'><AiFillInstagram className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
<div class="item w-12 h-12"><a href="https://www.twitter.com" target='blank'><AiOutlineTwitter className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
export default function Footer() {
return (
<footer className=" border-black border-2 h-20 m-[0.2rem] pl-[43%] bg-[#004F54]">
<div className="flex justify-evenly items-center space-x-8 space-y-1 h-auto w-min">
<div className="item w-12 h-12">
<a href="https://www.facebook.com" target="blank">
<AiFillFacebook className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
</a>
</div>
<div className="item w-12 h-12">
<a href="https://www.instagram.com" target="blank">
<AiFillInstagram className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
</a>
</div>
<p className="text-base pl-[4%] m-[.1rem] tracking-wider font-normal text-gray-50"> Copyright &copy;2022</p>
</footer>
)
<div className="item w-12 h-12">
<a href="https://www.twitter.com" target="blank">
<AiOutlineTwitter className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
</a>
</div>
</div>
<p className="text-base pl-[4%] m-[.1rem] tracking-wider font-normal text-gray-50">
{" "}
Copyright &copy;2022
</p>
</footer>
);
}

2 changes: 1 addition & 1 deletion project-app/components/Weather/SearchBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";

const SearchBar = ({ fetchWeather, handleChange, city }) => {
return (
<div className="w-80 ml-28">
<div className="w-96 xl:w-80 ml-4 xl:ml-40 mr-4">
<label
htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
Expand Down
36 changes: 19 additions & 17 deletions project-app/components/Weather/Weather.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,32 +26,34 @@ const Weather = () => {
console.log(data);
setWeatherObject(data);
//uncomment the below city State after development stage - means each time you make a change, props cant be found
setCity("");
// setCity("");
}

useEffect(() => {
fetchWeather();
}, []);

return (
<div id="weather" className="mt-4">
<h2 className="text-6xl font-bold ml-4">Weather Forecast</h2>
<div id="weather" className="mt-8">
<h2 className="text-3xl text-[#004F54] md:text-5xl font-bold ml-40">
Check The Weather
</h2>
<div className="flex flex-col sm:flex-row md:justify-start">
<SearchBar
handleChange={handleChange}
fetchWeather={fetchWeather}
city={city}
/>
<WeatherReqs />
</div>
<div className="weather">
<div>
<SearchBar
handleChange={handleChange}
fetchWeather={fetchWeather}
city={city}
/>
<WeatherForecast
weatherObject={weatherObject}
handleChange={handleChange}
fetchWeather={fetchWeather}
city={city}
/>
</div>
<WeatherForecast
weatherObject={weatherObject}
handleChange={handleChange}
fetchWeather={fetchWeather}
city={city}
/>
</div>
<WeatherReqs />
</div>
);
};
Expand Down
91 changes: 63 additions & 28 deletions project-app/components/Weather/WeatherForecast.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
import React from "react";

const WeatherForecast = ({ weatherObject }) => {
function datConvertor(timeStamp) {
let unix = timeStamp;
let milliSeconds = unix * 1000;
let dateObject = new Date(milliSeconds);
let displayDate = dateObject.toLocaleString("en-US", { weekday: "long" });
return displayDate;
}

return (
//main div container
<div className="flex justify-evenly mb-4 mt-4 ml-4 ">
<div className=" flex flex-col xl:flex-row justify-between md:justify-evenly mb-4 mt-4 ml-4 mr-4 bg-[url('/weather-background.jpg')] bg-cover">
{/* todays weather stats */}
<div className="flex justify-evenly rounded bg-stone-300 p-2 w-2/5">
<div className="flex justify-between md:justify-evenly rounded bg-[#004F54]/75 p-2 md:pt-10 w-full xl:w-2/5 xl:mt-4 xl:mb-4">
<div>
<h2 className="text-5xl font-bold mb-6 mt-5">Today</h2>
<h2 className="text-2xl text-white lg:text-5xl font-bold mb-6 mt-5">
Today
</h2>

<div className="text-2xl font-bold">{weatherObject?.city.name}</div>
<h1 className="text-6xl font-bold mt-3">
<div className="text-2xl text-white font-bold">
{weatherObject?.city.name}
</div>
<h1 className="text-3xl text-white lg:text-6xl font-bold mt-3">
{Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
</h1>
<h2 className="text-xl font-bold">
<h2 className="text-xl text-white font-bold">
{weatherObject?.list[0].weather[0].description}
</h2>
</div>
Expand All @@ -26,19 +38,28 @@ const WeatherForecast = ({ weatherObject }) => {
</div>

<div className="flex-col content-center mt-5">
<h3 className="font-bold">feels like:</h3>
<span>{Math.floor(weatherObject?.list[0].main.feels_like)}°C</span>
<h3 className="font-bold mt-5">humidity:</h3>
<span> {weatherObject?.list[0].main.humidity}%</span>
<h3 className="font-bold mt-5">wind speed:</h3>
<span>{weatherObject?.list[0].wind.speed}m/s</span>
<h3 className="font-bold text-white">feels like:</h3>
<span className="text-white">
{Math.floor(weatherObject?.list[0].main.feels_like)}°C
</span>
<h3 className="font-bold text-white mt-5">humidity:</h3>
<span className="text-white">
{" "}
{weatherObject?.list[0].main.humidity}%
</span>
<h3 className="font-bold text-white mt-5">wind speed:</h3>
<span className="text-white">
{weatherObject?.list[0].wind.speed}m/s
</span>
</div>
</div>
{/* 5 day forecast cards */}
<div className="flex justify-between rounded bg-stone-300 ">
<div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p>{weatherObject?.list[8].dt_txt.slice(0, 10)}</p>
<p className="text-3xl">
<div className="flex justify-evenly rounded bg-[#004F54]/75 w-full xl:w-2/5 mt-4 mb-4">
<div className="flex flex-col rounded border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 justify-evenly items-center text-xl font-bold mb-4">
<p className="text-white">
{datConvertor(weatherObject?.list[8].dt)}
</p>
<p className="text-3xl text-white">
{" "}
{Math.floor(weatherObject?.list[8].main.temp)}°C
</p>
Expand All @@ -47,11 +68,15 @@ const WeatherForecast = ({ weatherObject }) => {
viewBox="0 0 32 32"
className="fill-current h-40 w-40 text-yellow-300"
/>
<p>{weatherObject?.list[8].weather[0].description}</p>
<p className="text-white">
{weatherObject?.list[8].weather[0].description}
</p>
</div>
<div className="flex-col shadow-lg rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p>{weatherObject?.list[16].dt_txt.slice(0, 10)}</p>
<p className="text-3xl">
<div className="flex-col shadow-lg border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p className="text-white">
{datConvertor(weatherObject?.list[16].dt)}
</p>
<p className="text-3xl text-white">
{" "}
{Math.floor(weatherObject?.list[16].main.temp)}°C
</p>
Expand All @@ -60,10 +85,14 @@ const WeatherForecast = ({ weatherObject }) => {
viewBox="0 0 32 32"
className="fill-current h-40 w-40 text-yellow-300"
/>
<p>{weatherObject?.list[16].weather[0].description}</p>
<p className="text-white">
{weatherObject?.list[16].weather[0].description}
</p>
</div>
<div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p>{weatherObject?.list[24].dt_txt.slice(0, 10)}</p>
<div className="flex-col rounded border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl text-white font-bold mb-4">
<p className="text-white">
{datConvertor(weatherObject?.list[24].dt)}
</p>
<p className="text-3xl">
{" "}
{Math.floor(weatherObject?.list[24].main.temp)}°C
Expand All @@ -73,11 +102,15 @@ const WeatherForecast = ({ weatherObject }) => {
viewBox="0 0 32 32"
className="fill-current h-40 w-40 text-yellow-300"
/>
<p>{weatherObject?.list[24].weather[0].description}</p>
<p className="text-white">
{weatherObject?.list[24].weather[0].description}
</p>
</div>
<div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p>{weatherObject?.list[32].dt_txt.slice(0, 10)}</p>
<p className="text-3xl">
<div className="flex-col rounded border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
<p className="text-white">
{datConvertor(weatherObject?.list[32].dt)}
</p>
<p className="text-3xl text-white">
{" "}
{Math.floor(weatherObject?.list[32].main.temp)}°C
</p>
Expand All @@ -86,7 +119,9 @@ const WeatherForecast = ({ weatherObject }) => {
viewBox="0 0 32 32"
className="fill-current h-40 w-40 text-yellow-300"
/>
<p>{weatherObject?.list[32].weather[0].description}</p>
<p className="text-white">
{weatherObject?.list[32].weather[0].description}
</p>
</div>
</div>
</div>
Expand Down
Loading