├── .gitignore
├── public
    ├── favicon.ico
    ├── images
    │   ├── clear.jpeg
    │   ├── mist.jpeg
    │   ├── rain.jpeg
    │   ├── snow.jpeg
    │   └── clouds.jpeg
    ├── global.css
    └── index.html
├── src
    ├── main.js
    ├── ErrorBar.svelte
    ├── Loading.svelte
    ├── WeatherContent.svelte
    ├── App.svelte
    └── Sidebar.svelte
├── README.md
├── package.json
├── LICENSE
└── rollup.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 | 
4 | .DS_Store
5 | .env


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/clear.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/images/clear.jpeg


--------------------------------------------------------------------------------
/public/images/mist.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/images/mist.jpeg


--------------------------------------------------------------------------------
/public/images/rain.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/images/rain.jpeg


--------------------------------------------------------------------------------
/public/images/snow.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/images/snow.jpeg


--------------------------------------------------------------------------------
/public/images/clouds.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brdtheo/weatherify/HEAD/public/images/clouds.jpeg


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | 
3 | const app = new App({
4 | 	target: document.body,
5 | });
6 | 
7 | export default app;


--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | :root {
 8 |   --accent-color: rgba(50, 50, 50, .4);
 9 | }
10 | 
11 | body {
12 |   font-family: 'Jost';
13 | }
14 | 
15 | main {
16 |   height: 100%;
17 | }
18 | 
19 | body {
20 |   height: 100vh;
21 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Weatherify
 2 | A realtime weather app built with svelte and some CSS.
 3 | 
 4 | ---
 5 | design by [Arthur K](https://dribbble.com/thearthurk)
 6 | 
 7 | ![app-design-1](https://cdn.dribbble.com/users/2158940/screenshots/7118235/media/1ea59d43e8e99a529220bed091f8eb84.png)
 8 | 
 9 | ![app-design-2](https://cdn.dribbble.com/users/2158940/screenshots/7376567/media/35649246137de1ce1d3f68d4ad1e1ffa.png)
10 | 
11 | ![app-design-3](https://cdn.dribbble.com/users/2158940/screenshots/7767460/media/603dc6ac6bbeab4287c5a16125e087a6.png)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "weatherify",
 3 |   "scripts": {
 4 |     "build": "rollup -c",
 5 |     "dev": "rollup -c -w",
 6 |     "start": "sirv public"
 7 |   },
 8 |   "devDependencies": {
 9 |     "@rollup/plugin-commonjs": "^17.0.0",
10 |     "@rollup/plugin-node-resolve": "^11.0.0",
11 |     "@rollup/plugin-replace": "^2.4.1",
12 |     "rollup": "^2.3.4",
13 |     "rollup-plugin-css-only": "^3.1.0",
14 |     "rollup-plugin-livereload": "^2.0.0",
15 |     "rollup-plugin-svelte": "^7.0.0",
16 |     "rollup-plugin-terser": "^7.0.0",
17 |     "svelte": "^3.49.0"
18 |   },
19 |   "dependencies": {
20 |     "date-fns": "^2.16.1",
21 |     "dotenv": "^8.2.0",
22 |     "sirv-cli": "^1.0.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Théo Billardey
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/ErrorBar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher } from "svelte";
 3 |   const dispatch = createEventDispatcher();
 4 | 
 5 |   function closeErrorBar() {
 6 |     dispatch("setError", false);
 7 |   }
 8 | </script>
 9 | 
10 | <div class="error-bar" on:click={closeErrorBar}>
11 |   <span class="error-message">error: your request could not be resolved</span>
12 |   <div class="progress-bar" />
13 | </div>
14 | 
15 | <style>
16 |   .error-bar {
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: center;
20 |     font-size: 15px;
21 |     color: #fff;
22 |     padding: 6px 10px 8px;
23 |     background: #9d2933;
24 |     position: fixed;
25 |     bottom: 0;
26 |     left: 0;
27 |     width: 100%;
28 |     font-weight: 300;
29 |     letter-spacing: 1px;
30 |     cursor: pointer;
31 |   }
32 | 
33 |   .progress-bar {
34 |     width: 100%;
35 |     height: 3px;
36 |     background: white;
37 |     position: absolute;
38 |     bottom: 0;
39 |     left: 0;
40 |     animation: progress 4s linear;
41 |   }
42 | 
43 |   @keyframes progress {
44 |     from {
45 |       width: 0%;
46 |     }
47 | 
48 |     to {
49 |       width: 100%;
50 |     }
51 |   }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1" />
 6 |     <meta
 7 |       name="description"
 8 |       content="Weatherify is a Svelte app that provides weather info in any city of the world. The infos contains the humidity level, the wind intensity and also a forecast on seven days."
 9 |     />
10 |     <title>Weatherify: Get the weather of any city</title>
11 | 
12 |     <link rel="icon" type="image/png" href="/favicon.ico" />
13 |     <link rel="stylesheet" href="/global.css" />
14 |     <link rel="stylesheet" href="/build/bundle.css" />
15 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
16 |     <link
17 |       href="https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap"
18 |       rel="stylesheet preload"
19 |       as="style"
20 |     />
21 |     <link
22 |       href="https://fonts.googleapis.com/css2?family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap"
23 |       rel="stylesheet preload"
24 |       as="style"
25 |     />
26 | 
27 |     <script defer src="/build/bundle.js"></script>
28 |     <script
29 |       type="module"
30 |       src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"
31 |     ></script>
32 |   </head>
33 | 
34 |   <body></body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/src/Loading.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { fade } from "svelte/transition";
 3 | </script>
 4 | 
 5 | <div class="loading-container" transition:fade={{ delay: 0, duration: 200 }}>
 6 |   <div class="blur-container">
 7 |     <div class="loading-content">
 8 |       <h1>Weatherify</h1>
 9 |       <div class="loading-thumb-container">
10 |         <div class="loading-thumb" />
11 |       </div>
12 |       <p>loading...</p>
13 |     </div>
14 |   </div>
15 | </div>
16 | 
17 | <style>
18 |   .loading-container {
19 |     position: absolute;
20 |     width: 100%;
21 |     height: 100%;
22 |     top: 0;
23 |     left: 0;
24 |     z-index: 5;
25 |   }
26 | 
27 |   .blur-container {
28 |     display: flex;
29 |     justify-content: center;
30 |     align-items: center;
31 |     width: 100%;
32 |     height: 100%;
33 |     backdrop-filter: blur(20px);
34 |     background-color: rgba(255, 255, 255, 0.2);
35 |   }
36 | 
37 |   .loading-container {
38 |     font-family: "Lato", sans-serif;
39 |   }
40 | 
41 |   h1 {
42 |     margin-bottom: 50px;
43 |     font-size: 48px;
44 |     font-weight: 300;
45 |   }
46 | 
47 |   p {
48 |     text-align: center;
49 |     margin: 10px 0 0;
50 |     font-weight: 300;
51 |     font-size: 14px;
52 |   }
53 | 
54 |   .loading-thumb-container {
55 |     background: rgba(40, 40, 40, 0.2);
56 |     width: 100%;
57 |     height: 3px;
58 |     overflow: hidden;
59 |     position: relative;
60 |   }
61 | 
62 |   .loading-thumb {
63 |     position: absolute;
64 |     left: 0;
65 |     top: 0;
66 |     background: var(--accent-color);
67 |     width: 60px;
68 |     height: 100%;
69 |     animation: loading 1200ms infinite;
70 |   }
71 | 
72 |   @keyframes loading {
73 |     0% {
74 |       left: -25%;
75 |     }
76 | 
77 |     100% {
78 |       left: 105%;
79 |     }
80 |   }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import { config as configDotenv } from "dotenv";
 2 | configDotenv();
 3 | import replace from "@rollup/plugin-replace";
 4 | const production = !process.env.ROLLUP_WATCH;
 5 | import svelte from "rollup-plugin-svelte";
 6 | import commonjs from "@rollup/plugin-commonjs";
 7 | import resolve from "@rollup/plugin-node-resolve";
 8 | import livereload from "rollup-plugin-livereload";
 9 | import { terser } from "rollup-plugin-terser";
10 | import css from "rollup-plugin-css-only";
11 | 
12 | function serve() {
13 |   let server;
14 | 
15 |   function toExit() {
16 |     if (server) server.kill(0);
17 |   }
18 | 
19 |   return {
20 |     writeBundle() {
21 |       if (server) return;
22 |       server = require("child_process").spawn(
23 |         "npm",
24 |         ["run", "start", "--", "--dev"],
25 |         {
26 |           stdio: ["ignore", "inherit", "inherit"],
27 |           shell: true,
28 |         }
29 |       );
30 | 
31 |       process.on("SIGTERM", toExit);
32 |       process.on("exit", toExit);
33 |     },
34 |   };
35 | }
36 | 
37 | export default {
38 |   input: "src/main.js",
39 |   output: {
40 |     sourcemap: true,
41 |     format: "iife",
42 |     name: "app",
43 |     file: "public/build/bundle.js",
44 |   },
45 |   plugins: [
46 |     replace({
47 |       __myapp: JSON.stringify({
48 |         env: {
49 |           isProd: production,
50 |           WEATHER_API_KEY: process.env.WEATHER_API_KEY,
51 |         },
52 |       }),
53 |     }),
54 |     svelte({
55 |       compilerOptions: {
56 |         // enable run-time checks when not in production
57 |         dev: !production,
58 |       },
59 |     }),
60 |     // we'll extract any component CSS out into
61 |     // a separate file - better for performance
62 |     css({ output: "bundle.css" }),
63 | 
64 |     // If you have external dependencies installed from
65 |     // npm, you'll most likely need these plugins. In
66 |     // some cases you'll need additional configuration -
67 |     // consult the documentation for details:
68 |     // https://github.com/rollup/plugins/tree/master/packages/commonjs
69 |     resolve({
70 |       browser: true,
71 |       dedupe: ["svelte"],
72 |     }),
73 |     commonjs(),
74 | 
75 |     // In dev mode, call `npm run start` once
76 |     // the bundle has been generated
77 |     !production && serve(),
78 | 
79 |     // Watch the `public` directory and refresh the
80 |     // browser on changes when not in production
81 |     !production && livereload("public"),
82 | 
83 |     // If we're building for production (npm run build
84 |     // instead of npm run dev), minify
85 |     production && terser(),
86 |   ],
87 |   watch: {
88 |     clearScreen: false,
89 |   },
90 | };
91 | 


--------------------------------------------------------------------------------
/src/WeatherContent.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from "svelte";
  3 |   import { format } from "date-fns";
  4 | 
  5 |   export let temperature = 0;
  6 |   export let city = "city";
  7 |   export let state = "state";
  8 |   export let stateIcon;
  9 |   let date = format(new Date(), "hh:mm - cccc, d LLL yy") + "'";
 10 | 
 11 |   onMount(() => {
 12 |     const updateDate = setInterval(() => {
 13 |       date = format(new Date(), "hh:mm - cccc, d LLL yy") + "'";
 14 |     }, 1000);
 15 |   });
 16 | 
 17 |   $: {
 18 |     const a = state.toLowerCase();
 19 | 
 20 |     switch (a) {
 21 |       case "sunny":
 22 |         stateIcon = "sunny-outline";
 23 |         break;
 24 |       case "clear":
 25 |         stateIcon = "sunny-outline";
 26 |         break;
 27 |       case "rain":
 28 |         stateIcon = "rainy-outline";
 29 |         break;
 30 |       case "drizzle":
 31 |         stateIcon = "rainy-outline";
 32 |         break;
 33 |       case "clouds":
 34 |         stateIcon = "cloudy-outline";
 35 |         break;
 36 |       case "overcast":
 37 |         stateIcon = "cloudy-outline";
 38 |         break;
 39 |       case "snow":
 40 |         stateIcon = "snow-outline";
 41 |         break;
 42 |       case "mist":
 43 |         stateIcon = "filter-outline";
 44 |         break;
 45 |       case "haze":
 46 |         stateIcon = "filter-outline";
 47 |         break;
 48 |       default:
 49 |         stateIcon = "alert-circle-outline";
 50 |         break;
 51 |     }
 52 |   }
 53 | </script>
 54 | 
 55 | <div class="weather-content">
 56 |   <div class="weather-website-name">the.weather</div>
 57 |   <div class="bottom-content">
 58 |     <div class="weather-temperature">{temperature}</div>
 59 |     <div class="weather-city-date">
 60 |       <h1 id="current-city">{city}</h1>
 61 |       <span class="weather-date">{date}</span>
 62 |     </div>
 63 |     <div class="weather-state">
 64 |       <span class="state-icon"><ion-icon name={stateIcon} /></span>
 65 |       {state}
 66 |     </div>
 67 |   </div>
 68 | </div>
 69 | 
 70 | <style>
 71 |   .weather-content {
 72 |     width: 100%;
 73 |     display: flex;
 74 |     flex-direction: column;
 75 |     justify-content: space-between;
 76 |     padding: 50px 80px 100px;
 77 |     color: #fff;
 78 |   }
 79 | 
 80 |   .weather-website-name {
 81 |     font-weight: 500;
 82 |     font-size: 15px;
 83 |     font-family: "Lato";
 84 |   }
 85 | 
 86 |   .bottom-content {
 87 |     line-height: 1;
 88 |     display: flex;
 89 |     align-items: flex-end;
 90 |   }
 91 | 
 92 |   .weather-temperature {
 93 |     font-size: 150px;
 94 |   }
 95 | 
 96 |   .weather-temperature::after {
 97 |     content: "°";
 98 |   }
 99 | 
100 |   .weather-city-date {
101 |     padding: 0 40px 0 10px;
102 |   }
103 | 
104 |   .weather-city-date h1 {
105 |     font-weight: 400;
106 |     font-size: 80px;
107 |   }
108 | 
109 |   .weather-state {
110 |     display: flex;
111 |     flex-direction: column;
112 |   }
113 | 
114 |   .weather-city-date,
115 |   .weather-state {
116 |     padding-bottom: 20px;
117 |   }
118 | 
119 |   .state-icon {
120 |     font-size: 50px;
121 |   }
122 | 
123 |   .weather-date,
124 |   .weather-state {
125 |     font-weight: 300;
126 |     font-family: "Lato", sans-serif;
127 |   }
128 | 
129 |   @media screen and (max-width: 1200px) {
130 |     .weather-city-date h1 {
131 |       font-size: 50px;
132 |     }
133 | 
134 |     .state-icon {
135 |       font-size: 30px;
136 |     }
137 | 
138 |     .weather-temperature {
139 |       font-size: 120px;
140 |     }
141 |   }
142 | 
143 |   @media screen and (max-width: 1000px) {
144 |     .weather-content {
145 |       padding: 20px 20px 50px;
146 |     }
147 | 
148 |     .bottom-content {
149 |       margin-top: 10vh;
150 |     }
151 |   }
152 | 
153 |   @media screen and (max-width: 768px) {
154 |     .weather-content {
155 |       padding: 20px;
156 |     }
157 | 
158 |     .weather-city-date h1 {
159 |       font-size: 20px;
160 |     }
161 | 
162 |     .state-icon {
163 |       font-size: 30px;
164 |     }
165 | 
166 |     .weather-temperature {
167 |       font-size: 80px;
168 |     }
169 | 
170 |     .weather-city-date,
171 |     .weather-state {
172 |       padding: 0;
173 |     }
174 | 
175 |     .weather-state {
176 |       margin-top: 30px;
177 |     }
178 | 
179 |     .bottom-content {
180 |       display: grid;
181 |     }
182 |   }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from "svelte";
  3 |   import Loading from "./Loading.svelte";
  4 |   import Sidebar from "./Sidebar.svelte";
  5 |   import WeatherContent from "./WeatherContent.svelte";
  6 |   import ErrorBar from "./ErrorBar.svelte";
  7 | 
  8 |   let loading = true;
  9 |   let backgroundImage;
 10 |   let temperature;
 11 |   let city;
 12 |   let state;
 13 |   let weather = {};
 14 |   let forecastWeather = [];
 15 |   let error = false;
 16 |   $: isBackgroundClouds =
 17 |     backgroundImage === "images/clouds.jpeg" ? true : false;
 18 | 
 19 |   $: {
 20 |     let accentColor = null;
 21 | 
 22 |     switch (state) {
 23 |       case "Clouds":
 24 |         accentColor = "#d66d32";
 25 |         break;
 26 |       case "Rain":
 27 |         accentColor = "#829f9a";
 28 |         break;
 29 |       case "Drizzle":
 30 |         accentColor = "#829f9a";
 31 |         break;
 32 |       case "Clear":
 33 |         accentColor = "#a9cee1";
 34 |         break;
 35 |       case "Sunny":
 36 |         accentColor = "#a9cee1";
 37 |         break;
 38 |       case "Snow":
 39 |         accentColor = "#A6AAAA";
 40 |         break;
 41 |       case "Mist":
 42 |         accentColor = "#92A8B1";
 43 |         break;
 44 |       case "Haze":
 45 |         accentColor = "#92A8B1";
 46 |         break;
 47 |       default:
 48 |         accentColor = null;
 49 |     }
 50 | 
 51 |     if (!accentColor) {
 52 |       new Error("could not define accent color");
 53 |     } else {
 54 |       let root = document.documentElement;
 55 |       root.style.setProperty("--accent-color", accentColor);
 56 |     }
 57 |   }
 58 | 
 59 |   function setError(event) {
 60 |     error = event.detail;
 61 |     setTimeout(() => {
 62 |       error = false;
 63 |     }, 4000);
 64 |   }
 65 | 
 66 |   function updateProps(event) {
 67 |     temperature = event.detail.weather.temperature;
 68 |     city = event.detail.weather.city;
 69 |     state = event.detail.weather.state;
 70 |     setBackground();
 71 |   }
 72 | 
 73 |   function setLoading(event) {
 74 |     loading = event.detail;
 75 |   }
 76 | 
 77 |   function setBackground() {
 78 |     switch (state) {
 79 |       case "Clouds":
 80 |         backgroundImage = "images/clouds.jpeg";
 81 |         break;
 82 |       case "Rain":
 83 |         backgroundImage = "images/rain.jpeg";
 84 |         break;
 85 |       case "Drizzle":
 86 |         backgroundImage = "images/rain.jpeg";
 87 |         break;
 88 |       case "Sunny":
 89 |         backgroundImage = "images/clear.jpeg";
 90 |         break;
 91 |       case "Clear":
 92 |         backgroundImage = "images/clear.jpeg";
 93 |         break;
 94 |       case "Snow":
 95 |         backgroundImage = "images/snow.jpeg";
 96 |         break;
 97 |       case "Mist":
 98 |         backgroundImage = "images/mist.jpeg";
 99 |         break;
100 |       case "Haze":
101 |         backgroundImage = "images/mist.jpeg";
102 |         break;
103 |     }
104 |   }
105 | 
106 |   onMount(async () => {
107 |     const current = await fetch(
108 |       `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${__myapp.env.WEATHER_API_KEY}&units=metric`
109 |     );
110 |     const forecast = await fetch(
111 |       `https://api.openweathermap.org/data/2.5/forecast?q=London&appid=${__myapp.env.WEATHER_API_KEY}&units=metric`
112 |     );
113 | 
114 |     if (current.ok) {
115 |       const currentJSON = await current.json();
116 |       temperature = Math.round(currentJSON.main.temp);
117 |       city = currentJSON.name;
118 |       state = currentJSON.weather[0].main;
119 |       weather.cloudy = currentJSON.clouds.all;
120 |       weather.humidity = currentJSON.main.humidity;
121 |       weather.windSpeed = Math.round(currentJSON.wind.speed);
122 |     }
123 | 
124 |     if (forecast.ok) {
125 |       const forecastJSON = await forecast.json();
126 |       forecastWeather = [];
127 |       for (let i = 0; i < forecastJSON.list.length; i += 8) {
128 |         forecastWeather.push(forecastJSON.list[i]);
129 |       }
130 |     }
131 | 
132 |     if (current.ok && forecast.ok) {
133 |       loading = false;
134 |       setBackground();
135 |     }
136 |   });
137 | </script>
138 | 
139 | <main>
140 |   {#if backgroundImage}
141 |     <div
142 |       class="main-container {isBackgroundClouds ? 'background-top' : ''}"
143 |       style={`background-image: url(${backgroundImage});`}
144 |     >
145 |       <div class="main-container-layout">
146 |         {#if loading}
147 |           <Loading />
148 |         {/if}
149 |         <WeatherContent {city} {temperature} {state} />
150 |         <Sidebar
151 |           on:setLoading={setLoading}
152 |           on:fetchNewData={updateProps}
153 |           on:setError={setError}
154 |           {weather}
155 |           {forecastWeather}
156 |         />
157 |       </div>
158 |     </div>
159 |   {/if}
160 | 
161 |   {#if error}
162 |     <ErrorBar on:setError={setError} />
163 |   {/if}
164 | </main>
165 | 
166 | <style>
167 |   .main-container {
168 |     width: 100%;
169 |     height: 100%;
170 |     background-repeat: no-repeat;
171 |     background-size: cover;
172 |     background-position: center;
173 |     background-color: rgba(10, 10, 10, 0.8);
174 |     transition: background-image ease-in-out 300ms;
175 |   }
176 | 
177 |   .main-container-layout {
178 |     display: grid;
179 |     grid-template-columns: 1fr 480px;
180 |     height: 100%;
181 |   }
182 | 
183 |   .background-top {
184 |     background-position: 0 -150px;
185 |   }
186 | 
187 |   @media screen and (max-width: 1200px) {
188 |     .main-container-layout {
189 |       grid-template-columns: 1fr 350px;
190 |     }
191 |   }
192 | 
193 |   @media screen and (max-width: 1000px) {
194 |     .main-container {
195 |       background-position: inherit;
196 |     }
197 |   }
198 | 
199 |   @media screen and (max-width: 768px) {
200 |     .main-container {
201 |       height: auto;
202 |     }
203 | 
204 |     .main-container-layout {
205 |       grid-template-columns: 1fr;
206 |     }
207 |   }
208 | </style>
209 | 


--------------------------------------------------------------------------------
/src/Sidebar.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { format } from "date-fns";
  3 |   import { createEventDispatcher } from "svelte";
  4 |   const dispatch = createEventDispatcher();
  5 | 
  6 |   export let weather = {};
  7 |   export let forecastWeather = [];
  8 | 
  9 |   $: input = "";
 10 | 
 11 |   function pressEnter(key) {
 12 |     if (key.keyCode === 13) {
 13 |       getWeather();
 14 |     }
 15 |   }
 16 | 
 17 |   function setCity(e) {
 18 |     if (e.type === "click") {
 19 |       input = e.target.innerText;
 20 |       getWeather();
 21 |     }
 22 |   }
 23 | 
 24 |   async function getWeather() {
 25 |     const query = input;
 26 |     const currentCity = document.getElementById("current-city").innerText;
 27 | 
 28 |     if (query) {
 29 |       dispatch("setError", false);
 30 |       if (!(query.toLowerCase() === currentCity.toLowerCase())) {
 31 |         dispatch("setLoading", true);
 32 |         const current = await fetch(
 33 |           `https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${__myapp.env.WEATHER_API_KEY}&units=metric`
 34 |         );
 35 |         const forecast = await fetch(
 36 |           `https://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${__myapp.env.WEATHER_API_KEY}&units=metric`
 37 |         );
 38 | 
 39 |         if (current.ok) {
 40 |           const currentJSON = await current.json();
 41 | 
 42 |           weather.cloudy = currentJSON.clouds.all;
 43 |           weather.humidity = currentJSON.main.humidity;
 44 |           weather.windSpeed = Math.round(currentJSON.wind.speed);
 45 | 
 46 |           dispatch("fetchNewData", {
 47 |             weather: {
 48 |               temperature: Math.round(currentJSON.main.temp),
 49 |               city: currentJSON.name,
 50 |               state: currentJSON.weather[0].main,
 51 |             },
 52 |           });
 53 |           dispatch("setLoading", false);
 54 |         } else if (!current.ok) {
 55 |           dispatch("setLoading", false);
 56 |           dispatch("setError", true);
 57 |         }
 58 | 
 59 |         if (forecast.ok) {
 60 |           const forecastJSON = await forecast.json();
 61 |           forecastWeather = [];
 62 |           for (let i = 0; i < forecastJSON.list.length; i += 8) {
 63 |             forecastWeather.push(forecastJSON.list[i]);
 64 |           }
 65 |         }
 66 |       }
 67 |     }
 68 |   }
 69 | </script>
 70 | 
 71 | <div class="sidebar">
 72 |   <section>
 73 |     <div class="sidebar-search">
 74 |       <input
 75 |         type="text"
 76 |         placeholder="Another location"
 77 |         bind:value={input}
 78 |         on:keyup={pressEnter}
 79 |       />
 80 |       <button
 81 |         class="search-button"
 82 |         type="button"
 83 |         role="button"
 84 |         on:click={getWeather}
 85 |       >
 86 |         <ion-icon name="search-outline" />
 87 |       </button>
 88 |     </div>
 89 |     <div class="sidebar-list">
 90 |       <button type="button" class="sidebar-list-item" on:click={setCity}>
 91 |         Birmingham
 92 |       </button>
 93 |       <button type="button" class="sidebar-list-item" on:click={setCity}>
 94 |         Manchester
 95 |       </button>
 96 |       <button type="button" class="sidebar-list-item" on:click={setCity}>
 97 |         New York
 98 |       </button>
 99 |       <button type="button" class="sidebar-list-item" on:click={setCity}>
100 |         California
101 |       </button>
102 |     </div>
103 |   </section>
104 |   <section>
105 |     <h2>Weather Details</h2>
106 |     <div class="sidebar-list">
107 |       <div class="sidebar-list-item">
108 |         <span>Cloudy</span>
109 |         <span>{weather.cloudy}%</span>
110 |       </div>
111 |       <div class="sidebar-list-item">
112 |         <span>Humidity</span>
113 |         <span>{weather.humidity}%</span>
114 |       </div>
115 |       <div class="sidebar-list-item">
116 |         <span>Wind</span>
117 |         <span>{weather.windSpeed}km/h</span>
118 |       </div>
119 |     </div>
120 |   </section>
121 |   <section>
122 |     <h2>Next Days</h2>
123 |     <div class="sidebar-list">
124 |       {#each forecastWeather as day}
125 |         <div class="sidebar-list-item">
126 |           <span>{format(new Date(day.dt_txt.replace(/-/g, "/")), "MMMM d")}</span>
127 |           <span>{Math.round(day.main.temp)}° - {day.weather[0].main}</span>
128 |         </div>
129 |       {/each}
130 |     </div>
131 |   </section>
132 | </div>
133 | 
134 | <style>
135 |   .sidebar {
136 |     backdrop-filter: blur(18px);
137 |     -webkit-backdrop-filter: blur(18px);
138 |     -moz-backdrop-filter: blur(18px);
139 |     -ms-backdrop-filter: blur(18px);
140 |     background: rgba(50, 50, 50, 0.5);
141 |     width: 100%;
142 |     box-shadow: 0 -5px 16px 10px rgba(0, 0, 0, 0.1);
143 |     font-family: "Lato", sans-serif;
144 |     font-size: 18px;
145 |     font-weight: 300;
146 |     color: rgba(255, 255, 255, 0.9);
147 |     display: flex;
148 |     flex-direction: column;
149 |     overflow-y: scroll;
150 |     -ms-overflow-style: none;
151 |     scrollbar-width: none;
152 |   }
153 | 
154 |   .sidebar::-webkit-scrollbar {
155 |     display: none;
156 |   }
157 | 
158 |   section {
159 |     margin: 0 50px;
160 |     border-top: solid rgba(255, 255, 255, 0.3) 1px;
161 |     color: rgba(255, 255, 255, 0.4);
162 |   }
163 | 
164 |   section h2 {
165 |     margin-top: 55px;
166 |     color: #fff;
167 |     font-size: inherit;
168 |     font-weight: 400;
169 |   }
170 | 
171 |   section:first-of-type {
172 |     margin: 0;
173 |     border-top: none;
174 |     display: flex;
175 |     flex-direction: column;
176 |   }
177 | 
178 |   section:first-of-type .sidebar-list {
179 |     margin: 0 50px;
180 |   }
181 | 
182 |   .sidebar-search {
183 |     display: inline-flex;
184 |     align-items: flex-end;
185 |   }
186 | 
187 |   input {
188 |     display: flex;
189 |     width: 100%;
190 |     margin: 0 50px;
191 |     background: none;
192 |     border: inherit;
193 |     border-bottom: solid rgba(255, 255, 255, 0.4) 1px;
194 |     padding-bottom: 8px;
195 |     border-radius: 0;
196 |     font: inherit;
197 |     color: inherit;
198 |     transition: border-bottom-color ease-in-out 100ms;
199 |   }
200 | 
201 |   input:focus {
202 |     border-bottom-color: var(--accent-color);
203 |     outline: none;
204 |   }
205 | 
206 |   button {
207 |     font-size: inherit;
208 |     background: inherit;
209 |     border: inherit;
210 |     color: inherit;
211 |     font: inherit;
212 |   }
213 | 
214 |   .search-button {
215 |     background: var(--accent-color);
216 |     color: #000;
217 |     border: none;
218 |     min-width: 80px;
219 |     min-height: 80px;
220 |     display: inline-flex;
221 |     justify-content: center;
222 |     align-items: center;
223 |     font-size: 25px;
224 |     transition: background-color ease-in 200ms;
225 |   }
226 | 
227 |   .search-button:focus {
228 |     outline: none;
229 |     border: dotted #fff 2px;
230 |   }
231 | 
232 |   .sidebar-list {
233 |     padding: 55px 0;
234 |   }
235 | 
236 |   .sidebar-list-item {
237 |     display: flex;
238 |     justify-content: space-between;
239 |     width: 100%;
240 |     margin-bottom: 30px;
241 |   }
242 | 
243 |   .sidebar-list-item:last-of-type {
244 |     padding-bottom: 0;
245 |   }
246 | 
247 |   button.sidebar-list-item {
248 |     transition: color ease-in 100ms;
249 |   }
250 | 
251 |   button.sidebar-list-item:focus,
252 |   button.sidebar-list-item:hover {
253 |     color: #fff;
254 |     outline: none;
255 |   }
256 | 
257 |   @media screen and (max-width: 768px) {
258 |     section,
259 |     section:first-of-type .sidebar-list,
260 |     input {
261 |       margin: 0 20px;
262 |     }
263 |   }
264 | </style>
265 | 


--------------------------------------------------------------------------------