12 | 
13 |
14 |
15 |
16 | Currently, two official plugins are available:
17 |
18 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
19 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
20 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/InputCard.css:
--------------------------------------------------------------------------------
1 | .InputCard {
2 | width: 350px;
3 | height: 220px;
4 | background-color: white;
5 | border-radius: 10px;
6 | box-shadow: 2px 2px 10px 1px #c9caca;
7 | }
8 |
9 | .InputCard__Header {
10 | width: 100%;
11 | height: 50px;
12 | border-bottom: 2px solid #E7E7E7;
13 | display: flex;
14 | align-items: center;
15 | color: #43AEFC;
16 | }
17 |
18 | .InputCard__Title {
19 | color: #43AEFC;
20 | font-family: cursive;
21 | font-weight: 700;
22 | font-size: 18px;
23 | margin-left: 20px;
24 | margin-top: 22px;
25 | letter-spacing: 0px;
26 | }
27 | .InputCard__Content {
28 | display: grid;
29 | place-items: center;
30 | margin-top: 25px
31 | }
32 | .InputCard__InputDiv {
33 | width: 90%;
34 | border: 2px solid #E7E7E7;
35 | border-radius: 5px;
36 | height: 35px;
37 | display: grid;
38 | place-items: center;
39 | }
40 |
41 | .InputCard__InputField {
42 | outline: none;
43 | border: none;
44 | text-align: center;
45 | color: #43AEFC;
46 | font-family: cursive;
47 | font-size: 15px;
48 | }
49 |
50 | .InputCard__InputField::placeholder {
51 | font-size: 16px;
52 | color: #d6cece;
53 | font-weight: bold;
54 | font-family: cursive;
55 | text-align: center;
56 | }
57 |
58 | .InputCard__OrDiv {
59 | display: flex;
60 | align-items: center;
61 | justify-content: space-between;
62 | width: 90%;
63 | margin-top: 10px;
64 | }
65 |
66 | .InputCard__OrBar {
67 | height: 2px;
68 | width: 45%;
69 | background-color: #E7E7E7;
70 | border-radius: 2px;
71 | }
72 |
73 | .InputCard__Or {
74 | color: #d6cece;
75 | font-size: 15px;
76 | font-family: cursive;
77 | margin-bottom: 5px;
78 | }
79 |
80 | .InputCard__GetLocation {
81 | margin-top: 10px;
82 | background-color: #43AEFC;
83 | color: #fff;
84 | font-family: cursive;
85 | font-size: 15px;
86 | display: grid;
87 | place-items: center;
88 | font-weight: bold;
89 | width: 90%;
90 | height: 45px;
91 | border-radius: 5px;
92 | cursor: pointer;
93 | transition: background-color 0.3s ease;
94 | }
95 |
96 | .InputCard__GetLocation:hover {
97 | background-color: #0593f9;
98 | }
--------------------------------------------------------------------------------
/src/Components/WeatherCard.css:
--------------------------------------------------------------------------------
1 | .WeatherCard {
2 | width: 350px;
3 | height: 420px;
4 | background-color: white;
5 | border-radius: 5px;
6 | box-shadow: 2px 2px 10px 1px #c9caca;
7 | }
8 |
9 | .WeatherCard__Back {
10 | margin-top: 6px;
11 | stroke-width: 1;
12 | margin-left: 20px;
13 | height: 2em;
14 | cursor: pointer;
15 | transition: fill 0.3s ease-in-out;
16 | }
17 |
18 | .WeatherCard__Back:hover {
19 | stroke: #0593f9;
20 | fill: #0593f9;
21 | }
22 |
23 | .WeatherCard__Header {
24 | width: 100%;
25 | height: 50px;
26 | border-bottom: 2px solid #E7E7E7;
27 | display: flex;
28 | align-items: center;
29 | color: #43AEFC;
30 | }
31 |
32 | .WeatherCard__Title {
33 | color: #43AEFC;
34 | font-family: cursive;
35 | font-weight: 700;
36 | font-size: 18px;
37 | margin-top: 22px;
38 | margin-left: 5px;
39 | letter-spacing: 0px;
40 | }
41 |
42 | .WeatherCard__Data {
43 | display: flex;
44 | align-items: center;
45 | flex-direction: column;
46 | height: 75%;
47 | border-bottom: 2px solid #E7E7E7;
48 | }
49 |
50 | .WeatherCard__Image {
51 | height: 100px;
52 | width: auto;
53 | margin-top: 30px;
54 | margin-bottom: -40px;
55 | }
56 |
57 | .WeatherCard__Temp {
58 | font-size: 60px;
59 | font-weight: bold;
60 | color: #43AEFC;
61 | font-family: cursive;
62 | margin-bottom: -15px;
63 | }
64 |
65 | .WeatherCard__Desc {
66 | font-size: 20px;
67 | font-family: cursive;
68 | margin-bottom: 0px;
69 | }
70 |
71 | .WeatherCard__Location {
72 | display: flex;
73 | align-items: center;
74 |
75 | }
76 |
77 | .WeatherCard__LocationIcon {
78 | stroke: #0593f9;
79 | fill: #0593f9;
80 | }
81 |
82 | .WeatherCard__LocationTitle {
83 | font-family: cursive;
84 | font-size: 15px;
85 | margin-left: 7px;
86 | }
87 |
88 | .WeatherCard__OtherData {
89 | display: flex;
90 | justify-content: space-evenly;
91 | }
92 |
93 | .WeatherCard__OtherDataSplit {
94 | background-color: #E7E7E7;
95 | height: 52px;
96 | width: 1.6px;
97 | }
98 |
99 | .WeatherCard__DataIcon {
100 | stroke: #0593f9;
101 | fill: #0593f9;
102 | width: 35px;
103 | height: 35px;
104 | }
105 |
106 | .WeatherCard__Feels {
107 | display: flex;
108 | align-items: center;
109 | }
--------------------------------------------------------------------------------
/src/Components/InputCard.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import './InputCard.css'
3 | import { toast } from 'react-toastify';
4 |
5 | const InputCard = ({setShowInput, setCity, setWeatherData}) => {
6 |
7 | const apiKey = '8590762744d157aa90900e86a6506383';
8 |
9 |
10 | const getDeviceLocation = () => {
11 | if (navigator.geolocation) {
12 | navigator.geolocation.getCurrentPosition(success, error);
13 | } else {
14 | console.log("Geolocation not supported");
15 | }
16 | }
17 |
18 | function success(position) {
19 | const latitude = position.coords.latitude;
20 | const longitude = position.coords.longitude;
21 | console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
22 |
23 | // Make API call to OpenWeatherMap
24 | fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}`)
25 | .then(response => response.json())
26 | .then(data => {
27 | toast.success("Success!")
28 | setWeatherData(data);
29 | setShowInput(false)
30 | console.log(data);
31 | })
32 | .catch(error => console.log(error));
33 | }
34 |
35 | function error() {
36 |
37 | }
38 |
39 | const handleKeyDown = (event) => {
40 | if (event.key === 'Enter') {
41 | const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${event.target.value}&appid=${apiKey}`;
42 | fetch(apiUrl)
43 | .then(response => response.json())
44 | .then(data => {
45 | if(!data.name){
46 | throw new Error('API call failed');
47 | }
48 | else{
49 | toast.success("Success!")
50 | console.log("SUHHH", data)
51 | setCity(event.target.value)
52 | setShowInput(false)
53 | }
54 | })
55 | .catch(error => {
56 | console.error('Error fetching data:', error);
57 | toast.error("Please enter valid city name");
58 | });
59 | }
60 | }
61 |
62 | const [inputValue, setInputValue] = useState();
63 |
64 | return (
65 |