Creating a weather widget with es6 and flexbox
September 18, 2015
Today we are going to create as the title suggest a weather widget with some es6 features and the flexbox model. You can view the demo( currently it loads Argentina weather ) to see what it’s about or see the repository if you only want to read the code
First, we begin creating our index file with a simple structure, and loading the roboto font, and the normalize.css library.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Document</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:900,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://rawgit.com/necolas/normalize.css/master/normalize.css">
</head>
<body>
</body>
</html>
Then we are going to add some svg icons next to the opening body tag. If you dont know about svg icons you can read here.
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-sun" viewBox="0 0 1024 1024">
<title>sun</title>
<path class="path1" d="M512 288c-123.5 0-224 100.5-224 224s100.5 224 224 224 224-100.5 224-224c0-123.5-100.5-224-224-224zM512 672c-88.376 0-160-71.624-160-160s71.624-160 160-160 160 71.624 160 160-71.624 160-160 160zM512 224c17.666 0 32-14.334 32-32v-64c0-17.666-14.334-32-32-32s-32 14.334-32 32v64c0 17.666 14.334 32 32 32zM512 800c-17.666 0-32 14.334-32 32v64c0 17.666 14.334 32 32 32s32-14.334 32-32v-64c0-17.666-14.334-32-32-32zM760.876 308.334l45.25-45.25c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-45.25 45.25c-12.5 12.5-12.5 32.75 0 45.25 12.498 12.5 32.75 12.5 45.25 0zM263.124 715.668l-45.25 45.25c-12.5 12.498-12.5 32.748 0 45.248s32.75 12.5 45.25 0l45.25-45.248c12.5-12.542 12.5-32.752 0-45.25-12.498-12.502-32.75-12.544-45.25 0zM224 512c0-17.666-14.334-32-32-32h-64c-17.666 0-32 14.334-32 32s14.334 32 32 32h64c17.666 0 32-14.334 32-32zM896 480h-64c-17.666 0-32 14.334-32 32s14.334 32 32 32h64c17.666 0 32-14.334 32-32s-14.334-32-32-32zM263.082 308.334c12.502 12.5 32.752 12.5 45.25 0 12.502-12.5 12.502-32.75 0-45.25l-45.25-45.25c-12.5-12.5-32.748-12.5-45.25 0-12.5 12.5-12.5 32.75 0 45.25l45.25 45.25zM760.918 715.624c-12.542-12.5-32.752-12.5-45.25 0-12.502 12.5-12.542 32.75 0 45.25l45.25 45.25c12.498 12.5 32.748 12.5 45.248 0s12.5-32.748 0-45.25l-45.248-45.25z"></path>
</symbol>
<symbol id="icon-cloudy" viewBox="0 0 1024 1024">
<title>cloudy</title>
<path class="path1" d="M416 128c17.666 0 32-14.334 32-32v-64c0-17.666-14.334-32-32-32s-32 14.334-32 32v64c0 17.666 14.334 32 32 32zM664.876 212.334l45.25-45.25c12.498-12.5 12.498-32.75 0-45.25-12.5-12.5-32.75-12.5-45.25 0l-45.25 45.25c-12.5 12.5-12.5 32.75 0 45.25 12.498 12.5 32.75 12.5 45.25 0zM32 448h64c17.666 0 32-14.334 32-32s-14.334-32-32-32h-64c-17.666 0-32 14.334-32 32s14.334 32 32 32zM704 416c0 17.666 14.334 32 32 32h64c17.666 0 32-14.334 32-32s-14.334-32-32-32h-64c-17.666 0-32 14.334-32 32zM167.082 212.334c12.502 12.5 32.752 12.5 45.25 0 12.502-12.5 12.502-32.75 0-45.25l-45.25-45.25c-12.5-12.5-32.748-12.5-45.25 0-12.5 12.5-12.5 32.75 0 45.25l45.25 45.25zM800 512c-10.624 0-21.124 0.75-31.584 2.25-33.542-45.75-78.248-80.666-128.916-103-2.582-121.25-101.624-219.25-223.5-219.25-123.5 0-224 100.5-224 224 0 34.876 8.668 67.5 23 96.876-119.25 4.874-215 102.748-215 223.124 0 123.5 100.5 224 224 224 27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.5 224-224s-100.5-224-224-224zM416 256c79.624 0 145.124 58.334 157.416 134.5-20.042-4-40.498-6.5-61.416-6.5-91.876 0-177 39.624-236.75 106.5-11.874-22.334-19.25-47.416-19.25-74.5 0-88.376 71.624-160 160-160zM800 896c-34.25 0-65.832-11-91.876-29.334-46.956 56.584-116.876 93.334-196.124 93.334-79.25 0-149.168-36.75-196.124-93.334-26 18.334-57.626 29.334-91.876 29.334-88.376 0-160-71.624-160-160s71.624-160 160-160c15.5 0 30.124 2.916 44.25 7.082 5.624 1.584 11.334 2.834 16.624 5.042 8.75-17.124 19.75-32.792 31.958-47.5 46.752-56.248 116.292-92.624 195.168-92.624 20.25 0 39.668 2.916 58.5 7.418 21.124 4.998 41.084 12.582 59.668 22.582 46.582 24.75 84.832 63.084 108.914 110.126 18.794-7.75 39.336-12.126 60.918-12.126 88.376 0 160 71.624 160 160s-71.624 160-160 160z"></path>
</symbol>
<symbol id="icon-cloud2" viewBox="0 0 1024 1024">
<title>cloud2</title>
<path class="path1" d="M800 320c-10.624 0-21.124 0.75-31.584 2.25-59.748-81.416-154.040-130.25-256.416-130.25s-196.624 48.834-256.416 130.25c-10.46-1.5-20.96-2.25-31.584-2.25-123.5 0-224 100.5-224 224s100.5 224 224 224c27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.5 224-224s-100.5-224-224-224zM800 704c-34.25 0-65.832-11-91.876-29.334-46.956 56.582-116.876 93.334-196.124 93.334-79.25 0-149.168-36.752-196.124-93.334-26 18.334-57.626 29.334-91.876 29.334-88.376 0-160-71.624-160-160s71.624-160 160-160c21.624 0 42.124 4.416 60.876 12.166 42.458-82.832 127.706-140.166 227.124-140.166s184.668 57.334 227.082 140.166c18.794-7.75 39.336-12.166 60.918-12.166 88.376 0 160 71.624 160 160s-71.624 160-160 160z"></path>
</symbol>
<symbol id="icon-rainy" viewBox="0 0 1024 1024">
<title>rainy</title>
<path class="path1" d="M800 192c-10.624 0-21.124 0.75-31.584 2.25-59.748-81.416-154.040-130.25-256.416-130.25s-196.624 48.834-256.416 130.25c-10.46-1.5-20.96-2.25-31.584-2.25-123.5 0-224 100.5-224 224s100.5 224 224 224c27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.5 224-224s-100.5-224-224-224zM800 576c-34.25 0-65.832-11-91.876-29.334-46.956 56.584-116.876 93.334-196.124 93.334-79.25 0-149.168-36.75-196.124-93.334-26 18.334-57.626 29.334-91.876 29.334-88.376 0-160-71.624-160-160s71.624-160 160-160c21.624 0 42.124 4.416 60.876 12.166 42.458-82.832 127.706-140.166 227.124-140.166s184.668 57.334 227.082 140.166c18.794-7.75 39.336-12.166 60.918-12.166 88.376 0 160 71.624 160 160s-71.624 160-160 160zM448 896c0 35.376 28.624 64 64 64s64-28.624 64-64-64-128-64-128-64 92.624-64 128z"></path>
</symbol>
<symbol id="icon-rainy2" viewBox="0 0 1024 1024">
<title>rainy2</title>
<path class="path1" d="M800 128c-10.624 0-21.124 0.75-31.584 2.25-59.748-81.416-154.040-130.25-256.416-130.25s-196.624 48.834-256.416 130.25c-10.46-1.5-20.96-2.25-31.584-2.25-123.5 0-224 100.5-224 224s100.5 224 224 224c27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.5 224-224s-100.5-224-224-224zM800 512c-34.25 0-65.832-11-91.876-29.334-46.956 56.584-116.876 93.334-196.124 93.334-79.25 0-149.168-36.75-196.124-93.334-26 18.334-57.626 29.334-91.876 29.334-88.376 0-160-71.624-160-160s71.624-160 160-160c21.624 0 42.124 4.416 60.876 12.166 42.458-82.832 127.706-140.166 227.124-140.166s184.668 57.334 227.082 140.166c18.794-7.75 39.336-12.166 60.918-12.166 88.376 0 160 71.624 160 160s-71.624 160-160 160zM450 960c0 35.376 28.624 64 64 64s64-28.624 64-64-64-128-64-128-64 92.624-64 128zM704 896c0 35.376 28.624 64 64 64s64-28.624 64-64-64-128-64-128-64 92.624-64 128zM192 768c0 35.376 28.624 64 64 64s64-28.624 64-64-64-128-64-128-64 92.624-64 128z"></path>
</symbol>
<symbol id="icon-snowy3" viewBox="0 0 1024 1024">
<title>snowy3</title>
<path class="path1" d="M652.084 887.376l-36-20.752c1.084-6.248 1.916-12.622 1.916-19.248 0-6.624-0.832-13-2-19.25l36.084-20.792c16.834-9.834 22.582-31.458 12.916-48.208-9.752-16.958-31.334-22.75-48.25-13l-36.376 21c-9.752-8.292-20.75-14.792-33-19.208v-41.792c0-19.542-15.876-35.376-35.376-35.376s-35.332 15.834-35.332 35.376v41.75c-12.252 4.376-23.292 10.958-33.042 19.25l-36.292-21c-16.958-9.75-38.584-4-48.334 12.958-9.75 16.834-3.876 38.5 13 48.252l35.918 20.75c-1.168 6.292-1.918 12.668-1.918 19.292 0 6.626 0.75 13 1.918 19.248l-35.916 20.75c-16.918 9.75-22.75 31.5-13 48.376s31.376 22.624 48.25 12.876l36.334-20.876c9.748 8.25 20.792 14.75 33.084 19.124v41.876c0 19.498 15.832 35.248 35.332 35.248s35.376-15.75 35.376-35.248v-41.876c12.25-4.376 23.376-10.876 33.042-19.25l36.334 21c16.916 9.75 38.498 4 48.25-12.876 9.748-16.874 3.998-38.5-12.918-48.374zM512 882.75c-19.5 0-35.376-15.876-35.376-35.376s15.876-35.292 35.376-35.292 35.334 15.792 35.334 35.292-15.834 35.376-35.334 35.376zM948.332 792.5l-24.166-6.416c-0.582-7.666-2.416-14.958-5.792-21.958l17.542-17.542c8.25-8.25 8.208-21.584 0-29.708-8.166-8.208-21.416-8.25-29.666 0l-17.582 17.5c-6.918-3.25-14.292-5.124-21.918-5.75l-6.418-24.124c-2.998-11.166-14.5-17.876-25.748-14.876-11.208 3.042-17.75 14.542-14.834 25.75l6.418 23.792c-3.168 2.168-6.168 4.584-9 7.334-2.75 2.834-5.084 5.832-7.252 8.918l-23.792-6.418c-11.208-2.998-22.792 3.752-25.792 14.876-2.998 11.25 3.752 22.708 14.834 25.75l24 6.458c0.668 7.542 2.584 14.916 5.958 21.918l-17.624 17.624c-8.166 8.208-8.124 21.458 0.084 29.624 8.166 8.166 21.416 8.25 29.584 0.084l17.664-17.666c6.918 3.414 14.336 5.332 22.002 5.914l6.332 24.042c3.084 11.208 14.5 17.876 25.752 14.876 11.166-3 17.914-14.498 14.916-25.834l-6.418-23.792c3-2.124 6.084-4.5 8.918-7.25 2.75-2.792 5.084-5.876 7.248-8.958l23.834 6.418c11.208 3 22.75-3.708 25.708-14.834 3-11.17-3.624-22.668-14.792-25.752zM876.624 805.876c-8.25 8.25-21.542 8.208-29.75 0-8.124-8.124-8.208-21.458 0-29.708 8.208-8.166 21.542-8.166 29.75 0 8.126 8.208 8.126 21.582 0 29.708zM237.876 685l-23.75 6.376c-2.208-3-4.5-6.042-7.292-8.876-2.832-2.75-5.832-5.124-8.958-7.25l6.376-23.876c3-11.208-3.668-22.75-14.75-25.708-11.25-3-22.75 3.668-25.75 14.834l-6.5 24.124c-7.624 0.624-14.916 2.5-21.876 5.792l-17.624-17.542c-8.25-8.25-21.5-8.208-29.668 0-8.208 8.208-8.208 21.5 0 29.708l17.542 17.542c-3.292 7-5.208 14.376-5.792 21.958l-24.084 6.416c-11.25 3.084-17.918 14.5-14.916 25.75 3.042 11.166 14.542 17.75 25.792 14.834l23.75-6.46c2.124 3.208 4.5 6.21 7.376 9.002 2.75 2.75 5.75 5.208 8.876 7.25l-6.376 23.792c-3 11.25 3.668 22.834 14.832 25.834 11.252 3 22.668-3.666 25.668-14.876l6.5-24c7.624-0.624 15-2.542 22-5.876l17.582 17.584c8.168 8.248 21.418 8.082 29.668-0.084 8.124-8.124 8.25-21.416 0-29.624l-17.624-17.624c3.376-6.92 5.376-14.376 5.876-22.002l24.124-6.376c11.124-3.042 17.792-14.5 14.792-25.75-3.002-11.12-14.502-17.788-25.794-14.872zM177.124 741.916c-8.208 8.208-21.5 8.208-29.75 0-8.124-8.166-8.124-21.542 0-29.666 8.25-8.166 21.542-8.166 29.75 0s8.126 21.5 0 29.666zM1024 352c0-123.5-100.5-224-224-224-10.624 0-21.124 0.75-31.584 2.25-59.748-81.416-154.040-130.25-256.416-130.25s-196.624 48.834-256.416 130.25c-10.46-1.5-20.96-2.25-31.584-2.25-123.5 0-224 100.5-224 224s100.5 224 224 224c27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.5 224-224zM708.124 482.666c-46.956 56.584-116.876 93.334-196.124 93.334-79.25 0-149.168-36.75-196.124-93.334-26 18.334-57.626 29.334-91.876 29.334-88.376 0-160-71.624-160-160s71.624-160 160-160c21.624 0 42.124 4.416 60.876 12.166 42.458-82.832 127.706-140.166 227.124-140.166s184.668 57.334 227.082 140.166c18.794-7.75 39.336-12.166 60.918-12.166 88.376 0 160 71.624 160 160s-71.624 160-160 160c-34.25 0-65.832-11-91.876-29.334z"></path>
</symbol>
<symbol id="icon-cloudy2" viewBox="0 0 1024 1024">
<title>cloudy2</title>
<path class="path1" d="M1024 480.002c0-98.334-80-178.292-178.334-178.292-4.792 0-9.542 0.208-14.292 0.582-46.25-57.708-115.958-91.956-191.376-91.956-75.376 0-145.124 34.248-191.376 91.958-4.75-0.376-9.542-0.582-14.376-0.582-98.246-0.002-178.246 79.956-178.246 178.29 0 10.292 1.376 20.208 3 30.084-1.084 1.416-2.376 2.708-3.416 4.166-10.458-1.5-20.958-2.25-31.584-2.25-123.5 0-224 100.498-224 223.998 0 123.502 100.5 224 224 224 27.376 0 54.168-5 79.418-14.666 57.914 50.5 131.582 78.666 208.582 78.666 77.084 0 150.666-28.166 208.582-78.666 25.25 9.666 52.042 14.666 79.418 14.666 123.5 0 224-100.498 224-224 0-51.376-18.084-98.166-47.332-135.998 29.164-31.792 47.332-73.666 47.332-120zM800 896c-34.25 0-65.832-10.998-91.876-29.332-46.958 56.582-116.876 93.332-196.124 93.332-79.25 0-149.168-36.75-196.124-93.332-26 18.334-57.624 29.332-91.876 29.332-88.376 0-160-71.624-160-160s71.624-159.998 160-159.998c21.624 0 42.124 4.376 60.876 12.124 1.124-2.124 2.5-4 3.624-6.042 11.25-20.542 25.124-39.376 41.332-56.084 46.168-47.832 110.334-78 182.168-78 99.418 0 184.668 57.332 227.082 140.124 11.292-4.624 23.336-7.626 35.75-9.624l25.168-2.5c24.668 0 47.75 6.084 68.624 16 22.624 10.832 42.042 26.748 57.292 46.376 21 27.042 34.084 60.708 34.084 97.624 0 88.376-71.624 160-160 160zM931.124 555.25c-36.958-26.916-82-43.248-131.124-43.248-10.624 0-21.124 0.75-31.584 2.25-59.748-81.416-154.042-130.25-256.416-130.25-68.25 0-132.624 22.084-185.876 60.668 14.958-45.708 57.458-78.958 108.124-78.958 15.5 0 30.124 3.124 43.5 8.664 30.376-59.124 91.25-100.040 162.25-100.040s131.916 40.914 162.168 100.040c13.458-5.54 28.166-8.664 43.498-8.664 63.168 0 114.334 51.166 114.334 114.292 0.002 28.956-11.122 55.080-28.874 75.246z"></path>
</symbol>
<symbol id="icon-lightning3" viewBox="0 0 1024 1024">
<title>lightning3</title>
<path class="path1" d="M384 768l64 64-64 192 192-192-64-64 64-128-192 128zM1024 269.666c0-98.292-80-178.248-178.334-178.248-4.792 0-9.542 0.166-14.292 0.54-46.25-57.666-115.956-91.958-191.374-91.958-75.376 0-145.124 34.292-191.376 91.958-4.75-0.374-9.542-0.54-14.376-0.54-98.248 0-178.248 79.958-178.248 178.248 0 10.292 1.376 20.25 3 30.084-1.084 1.416-2.376 2.708-3.416 4.166-10.458-1.5-20.958-2.25-31.584-2.25-123.5 0-224 100.5-224 224 0 123.502 100.5 224 224 224 27.376 0 54.168-4.998 79.418-14.666 2.208 1.918 4.832 3.25 7.082 5.124l56.624-37.75c-18.876-13.376-36.5-28.25-51.25-46-26 18.292-57.624 29.292-91.876 29.292-88.376 0-160-71.582-160-160 0-88.334 71.624-160 160-160 21.624 0 42.124 4.418 60.876 12.166 1.124-2.166 2.5-4 3.624-6.084 11.25-20.542 25.124-39.334 41.332-56.084 46.168-47.792 110.334-78 182.168-78 99.418 0 184.668 57.334 227.082 140.166 11.292-4.666 23.336-7.666 35.75-9.666l25.168-2.5c24.668 0 47.75 6.084 68.624 16 22.624 10.834 42.042 26.75 57.292 46.416 21 27.042 34.084 60.668 34.084 97.584 0 88.418-71.624 160-160 160-34.25 0-65.832-11-91.876-29.292-28 33.75-64.876 59.124-106.292 75.124l-11.958 23.876 36.5 36.5c34.124-13.292 66.042-32.376 94.208-56.876 25.25 9.668 52.042 14.666 79.418 14.666 123.5 0 224-100.498 224-224 0-51.332-18.084-98.166-47.332-136 29.166-31.746 47.334-73.62 47.334-119.996zM931.124 344.916c-36.958-26.876-82-43.25-131.124-43.25-10.624 0-21.124 0.75-31.584 2.25-59.748-81.374-154.040-130.25-256.416-130.25-68.25 0-132.624 22.124-185.876 60.708 14.958-45.706 57.458-78.956 108.124-78.956 15.5 0 30.124 3.124 43.5 8.666 30.376-59.168 91.252-100.084 162.252-100.084s131.916 40.916 162.168 100.084c13.458-5.542 28.166-8.666 43.498-8.666 63.168 0 114.334 51.166 114.334 114.248 0 29-11.124 55.126-28.876 75.25z"></path>
</symbol>
</defs>
</svg>
The next step its to create the basic structure next for our app data next to the icon declaration
<div class="date">
<div class="city">Buenos Aires</div>
<div class="time"></div>
</div>
<svg class="icon"><use></use></svg>
<h1 class="degrees"></h1>
Currently, our app doesnt have any style, so lets flexbox do its magic. Add inside a style tag before the closing head tag.
body {
margin: 0;
background: #22313F;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh;
}
.date, .degrees {
text-transform: uppercase;
color: #fff;
text-align: center;
}
.date {
font-size: 1.3rem;
line-height: 1.2;
}
.city {
color: #aaa;
}
.icon {
display: block;
width: 100vw;
fill: #fff;
}
.degrees {
margin: 0;
font-size: 3em;
}
Lets explain a little what are we doing here. First we set the body margin to 0, add a background to it, change its font family, and make it fill the entire screen. ( if you dont know about vh and vw units you can read more here ) Nothing strange till now. The flexbox magic begins here, first, we set the body as a flexbox item, and its direction to the column, aka as vertical. With align-items we define how we are going to align the items along the cross axis, in this case the “horizontal” one. Justify contents, align the items along the main axis. You can read more about flexbox terminology here
We then define the styles for our .date, .degress, .city and .icon elements, nothing strange here, just font sizes, colors and margins.
Now, if you test it you’ll see that everything is correctly laid, we just need to fetch the data and display it. For this we are going to create a strip tag at the end of the body, with the following.
var Icons = {
'01d' : 'sun',
'01n' : 'sun',
'02d' : 'cloudy',
'02n' : 'cloudy',
'03d' : 'cloud2',
'03n' : 'cloud2',
'04d' : 'cloudy2',
'04n' : 'cloudy2',
'09d' : 'rainy',
'09n' : 'rainy',
'10d' : 'rainy2',
'10n' : 'rainy2',
'11d' : 'lightning3',
'11n' : 'lightning3',
'13d' : 'snowy3',
'13n' : 'snowy3'
};
var Days = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
var Time = new Date(),
WeekDayIndex = Time.getDay(),
WeekDay = Days[ WeekDayIndex ],
MonthDay = Time.getDate();
document.getElementsByClassName('time')[0].innerHTML = `${WeekDay} ${MonthDay}`;
fetch("http://api.openweathermap.org/data/2.5/weather?q=Buenos+Aires,ar&units=metric")
.then(function(response){
return response.json();
})
.then(function( data ){
document.getElementsByClassName('degrees')[0].innerHTML = `${Math.floor(data.main.temp_min)} º / ${Math.ceil(data.main.temp_max)} º`;
document.getElementsByTagName('use')[0].setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#icon-${Icons[data.weather[0].icon]}`);
});
In the first variable Icons we make a map of our api code responses to the correct icon. In Days we map the days names with its index. Then we create a time object and get its week day index ( 0-6 ), its day name, and the month’s day and we show it inside the .time object using the new es6 templates strings
Now we make a request to the openweathermap api ( you can change here your city using the format City,country code ) using the fetch api, after returning its json body, we set inside the .degrees item the min and max temperature, and we show the icon mapping the result code to its icon inside the Icons var
Leave your comment on the github issue, sending me an email or DMing me on twitter