Skip to content

Commit 996aca4

Browse files
coderight1coderight1
committed
Initial commit
0 parents  commit 996aca4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1359
-0
lines changed

‎App.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 40vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}

‎App.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import add_circle from "./resources/add_circle.svg";
3+
import Pagination from "./Pagination";
4+
import Toggle from "./Toggle";
5+
import Location from "./Location";
6+
import Temp from "./Temp";
7+
import Picture from "./Picture";
8+
import Hero from "./Hero";
9+
import Graph from "./Graph";
10+
import Humidity from "./Humidity";
11+
import Wind from "./Wind";
12+
import Precipitation from "./Precipitation";
13+
import UV from "./UV";
14+
import FeelsLike from "./Feelslike";
15+
import ChanceOfRain from "./ChanceOfRain";
16+
import Mobile from "./resources/mobile/Mobile";
17+
18+
const App = () => {
19+
const isDesktop = window.matchMedia('(min-width: 768px)').matches;
20+
21+
if (!isDesktop) {
22+
return (
23+
<Mobile/>
24+
);
25+
}
26+
27+
return (
28+
<div className="bg-primary h-screen w-screen flex justify-center items-center overflow-hidden">
29+
<div className="flex justify-end rounded-[38px] bg-ternary h-5/6 w-[90%] overflow-hidden">
30+
<div className="flex flex-col h-6/6 w-2/6">
31+
{/* Top section */}
32+
<div className="flex flex-row flex-wrap justify-between align-middle items-center">
33+
<img src={add_circle} className="h-7 w-7 mt-7 ml-5"></img>
34+
<Pagination totalPages={3} />
35+
<Toggle />
36+
</div>
37+
38+
{/* Location section */}
39+
<div>
40+
<Location />
41+
<Temp />
42+
<Picture />
43+
</div>
44+
</div>
45+
<div className="rounded-[38px] bg-secondary h-6/6 w-4/6">
46+
{/* HERO SECTION */}
47+
<div className="flex flex-col">
48+
<Hero name={"Isabella"} />
49+
<Graph />
50+
</div>
51+
52+
{/* More details */}
53+
54+
<div>
55+
<p className="font-custom text-black font-black ml-12">
56+
More details of today's weather
57+
</p>
58+
<div className="flex flex-row">
59+
<Humidity />
60+
<Wind />
61+
<Precipitation />
62+
</div>
63+
<div className="flex flex-row">
64+
<UV />
65+
<FeelsLike />
66+
<ChanceOfRain />
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
);
73+
};
74+
export default App;

‎App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render, screen } from '@testing-library/react';
2+
import App from './App';
3+
4+
test('renders learn react link', () => {
5+
render(<App />);
6+
const linkElement = screen.getByText(/learn react/i);
7+
expect(linkElement).toBeInTheDocument();
8+
});

‎ChanceOfRain.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useState, useEffect } from "react";
2+
import { useSelector } from "react-redux";
3+
import locations from "./resources/locations.json";
4+
import humidity_img from "./resources/rain_drop.svg";
5+
6+
const ChanceOfRain = () => {
7+
const page = useSelector((state) => state.page);
8+
const location = locations.find((loc) => loc.page === page);
9+
const [chanceOfRain, setChanceOfRain] = useState(0);
10+
11+
useEffect(() => {
12+
if (location) {
13+
setChanceOfRain(location.rain);
14+
}
15+
}, [location]);
16+
17+
18+
return (
19+
<>
20+
<div className="bg-white h-[100px] w-[28%] p-0 ml-[3.5%] mt-[2%] rounded-[16px] justify-between">
21+
<div className="flex flex-row">
22+
<p className="font-custom text-black text-[13px] mt-[7%] ml-[15%] font-bold">
23+
Chance of Rain
24+
</p>
25+
<img
26+
src={humidity_img}
27+
className="h-5 w-5 ml-[22%] mt-[7%]"
28+
alt="Rain Icon"
29+
></img>
30+
</div>
31+
32+
<div className="flex flex-row justify-center mr-[5%]">
33+
<p className="font-custom text-[18px] font-black text-black mt-[3%]">
34+
{chanceOfRain}%
35+
</p>
36+
37+
</div>
38+
39+
<div className="flex flex-row text-[10px]">
40+
<p className=" ml-[10%]">0%</p>
41+
<p className=" ml-[10%]">25%</p>
42+
<p className=" ml-[8%]">50%</p>
43+
<p className=" ml-[8%]">75%</p>
44+
<p className=" ml-[8%]">100%</p>
45+
</div>
46+
47+
<div className="w-[80%] mx-auto">
48+
<div className="relative h-2 bg-gray-300 rounded-full">
49+
<div
50+
className="absolute top-0 left-0 h-full bg-[#5c9ce5] rounded-full"
51+
style={{
52+
width: `${chanceOfRain}%`,
53+
transition: "width 0.5s ease-in-out", // Add transition property
54+
}}
55+
></div>
56+
</div>
57+
</div>
58+
</div>
59+
</>
60+
);
61+
};
62+
63+
export default ChanceOfRain;

‎Feelslike.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, { useState, useEffect } from "react";
2+
import { useSelector } from "react-redux";
3+
import locations from "./resources/locations.json";
4+
import feels_like_img from "./resources/thermometer.svg";
5+
6+
const FeelsLike = () => {
7+
const page = useSelector((state) => state.page);
8+
const location = locations.find((loc) => loc.page === page);
9+
const [feelsLike, setFeelsLike] = useState(0);
10+
11+
useEffect(() => {
12+
if (location) {
13+
setFeelsLike(location.feels_like);
14+
}
15+
}, [location]);
16+
17+
18+
const calculateProgressBarWidth = (feelsLikeValue) => {
19+
return (feelsLikeValue / 50) * 100; // Adjusted for a maximum value of 50
20+
};
21+
22+
return (
23+
<>
24+
<div className="bg-white h-[100px] w-[28%] p-0 ml-[5.2%] mt-[2%] rounded-[16px] justify-between">
25+
<div className="flex flex-row">
26+
<p className="font-custom text-black text-[13px] mt-[7%] ml-[15%] font-bold">
27+
Feels Like
28+
</p>
29+
<img
30+
src={feels_like_img}
31+
className="h-5 w-5 ml-[40%] mt-[7%]"
32+
alt="Feels Like Icon"
33+
></img>
34+
</div>
35+
36+
<div className="flex flex-row justify-center mr-[5%]">
37+
<p className="font-custom text-[18px] font-black text-black mt-[3%]">
38+
{feelsLike}°C
39+
</p>
40+
</div>
41+
42+
<div className="flex flex-row text-[10px]">
43+
<p className="ml-[10%]">0°</p>
44+
<p className="ml-[30%]">25°</p>
45+
<p className="ml-[30%]">50°</p>
46+
</div>
47+
48+
<div className="w-[80%] mx-auto">
49+
<div className="relative h-2 bg-gray-300 rounded-full">
50+
<div
51+
className="absolute top-0 left-0 h-full bg-[#5c9ce5] rounded-full"
52+
style={{
53+
width: `${calculateProgressBarWidth(feelsLike)}%`,
54+
transition: "width 0.5s ease-in-out", // Add transition property
55+
}}
56+
></div>
57+
</div>
58+
</div>
59+
</div>
60+
</>
61+
);
62+
};
63+
64+
export default FeelsLike;

0 commit comments

Comments
 (0)