├── assets
    ├── clear.svg
    ├── clouds.svg
    ├── drizzle.svg
    ├── humid.svg
    ├── mist.svg
    ├── rain.svg
    └── wind.svg
├── index.css
├── index.html
└── index.js


/assets/clear.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <!-- (c) ammap.com | SVG weather icons -->
  3 | <svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  4 |   <defs>
  5 |     <filter id="blur" x="-.34167" y="-.34167" width="1.6833" height="1.85">
  6 |       <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  7 |       <feOffset dx="0" dy="4" result="offsetblur" />
  8 |       <feComponentTransfer>
  9 |         <feFuncA slope="0.05" type="linear" />
 10 |       </feComponentTransfer>
 11 |       <feMerge>
 12 |         <feMergeNode />
 13 |         <feMergeNode in="SourceGraphic" />
 14 |       </feMerge>
 15 |     </filter>
 16 |     <style type="text/css">
 17 |       <![CDATA[
 18 |       /*
 19 | ** SUN
 20 | */
 21 |       @keyframes am-weather-sun {
 22 |         0% {
 23 |           -webkit-transform: rotate(0deg);
 24 |           -moz-transform: rotate(0deg);
 25 |           -ms-transform: rotate(0deg);
 26 |           transform: rotate(0deg);
 27 |         }
 28 | 
 29 |         100% {
 30 |           -webkit-transform: rotate(360deg);
 31 |           -moz-transform: rotate(360deg);
 32 |           -ms-transform: rotate(360deg);
 33 |           transform: rotate(360deg);
 34 |         }
 35 |       }
 36 | 
 37 |       .am-weather-sun {
 38 |         -webkit-animation-name: am-weather-sun;
 39 |         -moz-animation-name: am-weather-sun;
 40 |         -ms-animation-name: am-weather-sun;
 41 |         animation-name: am-weather-sun;
 42 |         -webkit-animation-duration: 9s;
 43 |         -moz-animation-duration: 9s;
 44 |         -ms-animation-duration: 9s;
 45 |         animation-duration: 9s;
 46 |         -webkit-animation-timing-function: linear;
 47 |         -moz-animation-timing-function: linear;
 48 |         -ms-animation-timing-function: linear;
 49 |         animation-timing-function: linear;
 50 |         -webkit-animation-iteration-count: infinite;
 51 |         -moz-animation-iteration-count: infinite;
 52 |         -ms-animation-iteration-count: infinite;
 53 |         animation-iteration-count: infinite;
 54 |       }
 55 | 
 56 |       @keyframes am-weather-sun-shiny {
 57 |         0% {
 58 |           stroke-dasharray: 3px 10px;
 59 |           stroke-dashoffset: 0px;
 60 |         }
 61 | 
 62 |         50% {
 63 |           stroke-dasharray: 0.1px 10px;
 64 |           stroke-dashoffset: -1px;
 65 |         }
 66 | 
 67 |         100% {
 68 |           stroke-dasharray: 3px 10px;
 69 |           stroke-dashoffset: 0px;
 70 |         }
 71 |       }
 72 | 
 73 |       .am-weather-sun-shiny line {
 74 |         -webkit-animation-name: am-weather-sun-shiny;
 75 |         -moz-animation-name: am-weather-sun-shiny;
 76 |         -ms-animation-name: am-weather-sun-shiny;
 77 |         animation-name: am-weather-sun-shiny;
 78 |         -webkit-animation-duration: 2s;
 79 |         -moz-animation-duration: 2s;
 80 |         -ms-animation-duration: 2s;
 81 |         animation-duration: 2s;
 82 |         -webkit-animation-timing-function: linear;
 83 |         -moz-animation-timing-function: linear;
 84 |         -ms-animation-timing-function: linear;
 85 |         animation-timing-function: linear;
 86 |         -webkit-animation-iteration-count: infinite;
 87 |         -moz-animation-iteration-count: infinite;
 88 |         -ms-animation-iteration-count: infinite;
 89 |         animation-iteration-count: infinite;
 90 |       }
 91 |       ]]>
 92 |     </style>
 93 |   </defs>
 94 |   <g transform="translate(16,-2)" filter="url(#blur)">
 95 |     <g transform="translate(0,16)">
 96 |       <g class="am-weather-sun"
 97 |         style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
 98 |         <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
 99 |         <g transform="rotate(45)">
100 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
101 |             stroke-width="2" />
102 |         </g>
103 |         <g transform="rotate(90)">
104 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
105 |             stroke-width="2" />
106 |         </g>
107 |         <g transform="rotate(135)">
108 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
109 |             stroke-width="2" />
110 |         </g>
111 |         <g transform="scale(-1)">
112 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
113 |             stroke-width="2" />
114 |         </g>
115 |         <g transform="rotate(225)">
116 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
117 |             stroke-width="2" />
118 |         </g>
119 |         <g transform="rotate(-90)">
120 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
121 |             stroke-width="2" />
122 |         </g>
123 |         <g transform="rotate(-45)">
124 |           <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
125 |             stroke-width="2" />
126 |         </g>
127 |         <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
128 |       </g>
129 |     </g>
130 |   </g>
131 | </svg>


--------------------------------------------------------------------------------
/assets/clouds.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <!-- (c) ammap.com | SVG weather icons -->
  3 | <svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  4 |   <defs>
  5 |     <filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
  6 |       <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  7 |       <feOffset dx="0" dy="4" result="offsetblur" />
  8 |       <feComponentTransfer>
  9 |         <feFuncA slope="0.05" type="linear" />
 10 |       </feComponentTransfer>
 11 |       <feMerge>
 12 |         <feMergeNode />
 13 |         <feMergeNode in="SourceGraphic" />
 14 |       </feMerge>
 15 |     </filter>
 16 |     <style type="text/css">
 17 |       <![CDATA[
 18 |       /*
 19 | ** CLOUDS
 20 | */
 21 |       @keyframes am-weather-cloud-1 {
 22 |         0% {
 23 |           -webkit-transform: translate(-5px, 0px);
 24 |           -moz-transform: translate(-5px, 0px);
 25 |           -ms-transform: translate(-5px, 0px);
 26 |           transform: translate(-5px, 0px);
 27 |         }
 28 | 
 29 |         50% {
 30 |           -webkit-transform: translate(10px, 0px);
 31 |           -moz-transform: translate(10px, 0px);
 32 |           -ms-transform: translate(10px, 0px);
 33 |           transform: translate(10px, 0px);
 34 |         }
 35 | 
 36 |         100% {
 37 |           -webkit-transform: translate(-5px, 0px);
 38 |           -moz-transform: translate(-5px, 0px);
 39 |           -ms-transform: translate(-5px, 0px);
 40 |           transform: translate(-5px, 0px);
 41 |         }
 42 |       }
 43 | 
 44 |       .am-weather-cloud-1 {
 45 |         -webkit-animation-name: am-weather-cloud-1;
 46 |         -moz-animation-name: am-weather-cloud-1;
 47 |         animation-name: am-weather-cloud-1;
 48 |         -webkit-animation-duration: 7s;
 49 |         -moz-animation-duration: 7s;
 50 |         animation-duration: 7s;
 51 |         -webkit-animation-timing-function: linear;
 52 |         -moz-animation-timing-function: linear;
 53 |         animation-timing-function: linear;
 54 |         -webkit-animation-iteration-count: infinite;
 55 |         -moz-animation-iteration-count: infinite;
 56 |         animation-iteration-count: infinite;
 57 |       }
 58 | 
 59 |       @keyframes am-weather-cloud-2 {
 60 |         0% {
 61 |           -webkit-transform: translate(0px, 0px);
 62 |           -moz-transform: translate(0px, 0px);
 63 |           -ms-transform: translate(0px, 0px);
 64 |           transform: translate(0px, 0px);
 65 |         }
 66 | 
 67 |         50% {
 68 |           -webkit-transform: translate(2px, 0px);
 69 |           -moz-transform: translate(2px, 0px);
 70 |           -ms-transform: translate(2px, 0px);
 71 |           transform: translate(2px, 0px);
 72 |         }
 73 | 
 74 |         100% {
 75 |           -webkit-transform: translate(0px, 0px);
 76 |           -moz-transform: translate(0px, 0px);
 77 |           -ms-transform: translate(0px, 0px);
 78 |           transform: translate(0px, 0px);
 79 |         }
 80 |       }
 81 | 
 82 |       .am-weather-cloud-2 {
 83 |         -webkit-animation-name: am-weather-cloud-2;
 84 |         -moz-animation-name: am-weather-cloud-2;
 85 |         animation-name: am-weather-cloud-2;
 86 |         -webkit-animation-duration: 3s;
 87 |         -moz-animation-duration: 3s;
 88 |         animation-duration: 3s;
 89 |         -webkit-animation-timing-function: linear;
 90 |         -moz-animation-timing-function: linear;
 91 |         animation-timing-function: linear;
 92 |         -webkit-animation-iteration-count: infinite;
 93 |         -moz-animation-iteration-count: infinite;
 94 |         animation-iteration-count: infinite;
 95 |       }
 96 |       ]]>
 97 |     </style>
 98 |   </defs>
 99 |   <g id="cloudy" transform="translate(16,-2)" filter="url(#blur)">
100 |     <g class="am-weather-cloud-1"
101 |       style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
102 |       <path transform="matrix(.6 0 0 .6 -10 -8)"
103 |         d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
104 |         fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
105 |     </g>
106 |     <g class="am-weather-cloud-2"
107 |       style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
108 |       <path transform="translate(-20,-11)"
109 |         d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
110 |         fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
111 |     </g>
112 |   </g>
113 | </svg>


--------------------------------------------------------------------------------
/assets/drizzle.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <!-- (c) ammap.com | SVG weather icons -->
  3 | <svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  4 |   <defs>
  5 |     <filter id="blur" x="-.24684" y="-.24132" width="1.4937" height="1.5878">
  6 |       <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  7 |       <feOffset dx="0" dy="4" result="offsetblur" />
  8 |       <feComponentTransfer>
  9 |         <feFuncA slope="0.05" type="linear" />
 10 |       </feComponentTransfer>
 11 |       <feMerge>
 12 |         <feMergeNode />
 13 |         <feMergeNode in="SourceGraphic" />
 14 |       </feMerge>
 15 |     </filter>
 16 |     <style type="text/css">
 17 |       <![CDATA[
 18 |       /*
 19 | ** CLOUDS
 20 | */
 21 |       @keyframes am-weather-cloud-2 {
 22 |         0% {
 23 |           -webkit-transform: translate(0px, 0px);
 24 |           -moz-transform: translate(0px, 0px);
 25 |           -ms-transform: translate(0px, 0px);
 26 |           transform: translate(0px, 0px);
 27 |         }
 28 | 
 29 |         50% {
 30 |           -webkit-transform: translate(2px, 0px);
 31 |           -moz-transform: translate(2px, 0px);
 32 |           -ms-transform: translate(2px, 0px);
 33 |           transform: translate(2px, 0px);
 34 |         }
 35 | 
 36 |         100% {
 37 |           -webkit-transform: translate(0px, 0px);
 38 |           -moz-transform: translate(0px, 0px);
 39 |           -ms-transform: translate(0px, 0px);
 40 |           transform: translate(0px, 0px);
 41 |         }
 42 |       }
 43 | 
 44 |       .am-weather-cloud-2 {
 45 |         -webkit-animation-name: am-weather-cloud-2;
 46 |         -moz-animation-name: am-weather-cloud-2;
 47 |         animation-name: am-weather-cloud-2;
 48 |         -webkit-animation-duration: 3s;
 49 |         -moz-animation-duration: 3s;
 50 |         animation-duration: 3s;
 51 |         -webkit-animation-timing-function: linear;
 52 |         -moz-animation-timing-function: linear;
 53 |         animation-timing-function: linear;
 54 |         -webkit-animation-iteration-count: infinite;
 55 |         -moz-animation-iteration-count: infinite;
 56 |         animation-iteration-count: infinite;
 57 |       }
 58 | 
 59 |       /*
 60 | ** RAIN
 61 | */
 62 |       @keyframes am-weather-rain {
 63 |         0% {
 64 |           stroke-dashoffset: 0;
 65 |         }
 66 | 
 67 |         100% {
 68 |           stroke-dashoffset: -100;
 69 |         }
 70 |       }
 71 | 
 72 |       .am-weather-rain-1 {
 73 |         -webkit-animation-name: am-weather-rain;
 74 |         -moz-animation-name: am-weather-rain;
 75 |         -ms-animation-name: am-weather-rain;
 76 |         animation-name: am-weather-rain;
 77 |         -webkit-animation-duration: 8s;
 78 |         -moz-animation-duration: 8s;
 79 |         -ms-animation-duration: 8s;
 80 |         animation-duration: 8s;
 81 |         -webkit-animation-timing-function: linear;
 82 |         -moz-animation-timing-function: linear;
 83 |         -ms-animation-timing-function: linear;
 84 |         animation-timing-function: linear;
 85 |         -webkit-animation-iteration-count: infinite;
 86 |         -moz-animation-iteration-count: infinite;
 87 |         -ms-animation-iteration-count: infinite;
 88 |         animation-iteration-count: infinite;
 89 |       }
 90 |       ]]>
 91 |     </style>
 92 |   </defs>
 93 |   <g transform="translate(16,-2)" filter="url(#blur)">
 94 |     <g class="am-weather-cloud-3"
 95 |       style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
 96 |       <path transform="translate(-20,-11)"
 97 |         d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
 98 |         fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
 99 |     </g>
100 |     <g transform="translate(-20,-10) rotate(10,-238.68,233.96)">
101 |       <line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
102 |         stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
103 |         style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
104 |     </g>
105 |   </g>
106 | </svg>


--------------------------------------------------------------------------------
/assets/humid.svg:
--------------------------------------------------------------------------------
 1 | <svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 2 |     <!-- Sun with pulsing animation -->
 3 |     <circle cx="20" cy="20" r="10" fill="yellow">
 4 |       <animate attributeName="r" values="10;12;10" dur="2s" repeatCount="indefinite"/>
 5 |     </circle>
 6 |     <!-- Sun rays -->
 7 |     <line x1="20" y1="2" x2="20" y2="10" stroke="orange" stroke-width="2"/>
 8 |     <line x1="20" y1="30" x2="20" y2="38" stroke="orange" stroke-width="2"/>
 9 |     <line x1="2" y1="20" x2="10" y2="20" stroke="orange" stroke-width="2"/>
10 |     <line x1="30" y1="20" x2="38" y2="20" stroke="orange" stroke-width="2"/>
11 |     <line x1="7" y1="7" x2="13" y2="13" stroke="orange" stroke-width="2"/>
12 |     <line x1="27" y1="27" x2="33" y2="33" stroke="orange" stroke-width="2"/>
13 |     <line x1="7" y1="33" x2="13" y2="27" stroke="orange" stroke-width="2"/>
14 |     <line x1="27" y1="13" x2="33" y2="7" stroke="orange" stroke-width="2"/>
15 |     
16 |     <!-- Cloud -->
17 |     <ellipse cx="60" cy="35" rx="18" ry="10" fill="lightgray"/>
18 |     <ellipse cx="50" cy="40" rx="18" ry="10" fill="lightgray"/>
19 |     <ellipse cx="70" cy="40" rx="18" ry="10" fill="lightgray"/>
20 |   
21 |     <!-- Water droplets with falling animation -->
22 |     <path d="M55 60 C55 50, 50 50, 50 60 C50 65, 55 65, 55 60" fill="deepskyblue">
23 |       <animate attributeName="cy" values="60;80" dur="1s" repeatCount="indefinite"/>
24 |     </path>
25 |     <path d="M70 60 C70 50, 65 50, 65 60 C65 65, 70 65, 70 60" fill="deepskyblue">
26 |       <animate attributeName="cy" values="60;80" dur="1.2s" repeatCount="indefinite"/>
27 |     </path>
28 |     <path d="M85 60 C85 50, 80 50, 80 60 C80 65, 85 65, 85 60" fill="deepskyblue">
29 |       <animate attributeName="cy" values="60;80" dur="1.4s" repeatCount="indefinite"/>
30 |     </path>
31 |   </svg>
32 |   


--------------------------------------------------------------------------------
/assets/mist.svg:
--------------------------------------------------------------------------------
 1 | <svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 2 |     <!-- Background color for foggy atmosphere -->
 3 |     <rect width="100" height="100" fill="#d3d3d3" />
 4 |   
 5 |     <!-- Layer of mist 1 -->
 6 |     <ellipse cx="50" cy="50" rx="60" ry="10" fill="white" opacity="0.6">
 7 |       <animate attributeName="cx" values="40;60;40" dur="5s" repeatCount="indefinite"/>
 8 |     </ellipse>
 9 |     
10 |     <!-- Layer of mist 2 -->
11 |     <ellipse cx="50" cy="60" rx="70" ry="10" fill="white" opacity="0.4">
12 |       <animate attributeName="cx" values="60;40;60" dur="7s" repeatCount="indefinite"/>
13 |     </ellipse>
14 |     
15 |     <!-- Layer of mist 3 -->
16 |     <ellipse cx="50" cy="70" rx="80" ry="12" fill="white" opacity="0.5">
17 |       <animate attributeName="cx" values="50;70;50" dur="6s" repeatCount="indefinite"/>
18 |     </ellipse>
19 |   
20 |     <!-- Layer of mist 4 (close to ground) -->
21 |     <ellipse cx="50" cy="80" rx="90" ry="10" fill="white" opacity="0.3">
22 |       <animate attributeName="cx" values="70;50;70" dur="8s" repeatCount="indefinite"/>
23 |     </ellipse>
24 |   </svg>
25 |   


--------------------------------------------------------------------------------
/assets/rain.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <!-- (c) ammap.com | SVG weather icons -->
  3 | <!-- Mix of Rain and Sleet | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
  4 | <svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  5 |   <defs>
  6 |     <filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
  7 |       <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  8 |       <feOffset dx="0" dy="4" result="offsetblur" />
  9 |       <feComponentTransfer>
 10 |         <feFuncA slope="0.05" type="linear" />
 11 |       </feComponentTransfer>
 12 |       <feMerge>
 13 |         <feMergeNode />
 14 |         <feMergeNode in="SourceGraphic" />
 15 |       </feMerge>
 16 |     </filter>
 17 |     <style type="text/css">
 18 |       <![CDATA[
 19 |       /*
 20 | ** RAIN
 21 | */
 22 |       @keyframes am-weather-rain {
 23 |         0% {
 24 |           stroke-dashoffset: 0;
 25 |         }
 26 | 
 27 |         100% {
 28 |           stroke-dashoffset: -100;
 29 |         }
 30 |       }
 31 | 
 32 |       .am-weather-rain-1 {
 33 |         -webkit-animation-name: am-weather-rain;
 34 |         -moz-animation-name: am-weather-rain;
 35 |         -ms-animation-name: am-weather-rain;
 36 |         animation-name: am-weather-rain;
 37 |         -webkit-animation-duration: 8s;
 38 |         -moz-animation-duration: 8s;
 39 |         -ms-animation-duration: 8s;
 40 |         animation-duration: 8s;
 41 |         -webkit-animation-timing-function: linear;
 42 |         -moz-animation-timing-function: linear;
 43 |         -ms-animation-timing-function: linear;
 44 |         animation-timing-function: linear;
 45 |         -webkit-animation-iteration-count: infinite;
 46 |         -moz-animation-iteration-count: infinite;
 47 |         -ms-animation-iteration-count: infinite;
 48 |         animation-iteration-count: infinite;
 49 |       }
 50 | 
 51 |       .am-weather-rain-2 {
 52 |         -webkit-animation-name: am-weather-rain;
 53 |         -moz-animation-name: am-weather-rain;
 54 |         -ms-animation-name: am-weather-rain;
 55 |         animation-name: am-weather-rain;
 56 |         -webkit-animation-delay: 0.25s;
 57 |         -moz-animation-delay: 0.25s;
 58 |         -ms-animation-delay: 0.25s;
 59 |         animation-delay: 0.25s;
 60 |         -webkit-animation-duration: 8s;
 61 |         -moz-animation-duration: 8s;
 62 |         -ms-animation-duration: 8s;
 63 |         animation-duration: 8s;
 64 |         -webkit-animation-timing-function: linear;
 65 |         -moz-animation-timing-function: linear;
 66 |         -ms-animation-timing-function: linear;
 67 |         animation-timing-function: linear;
 68 |         -webkit-animation-iteration-count: infinite;
 69 |         -moz-animation-iteration-count: infinite;
 70 |         -ms-animation-iteration-count: infinite;
 71 |         animation-iteration-count: infinite;
 72 |       }
 73 | 
 74 |       /*
 75 | ** CLOUDS
 76 | */
 77 |       @keyframes am-weather-cloud-3 {
 78 |         0% {
 79 |           -webkit-transform: translate(0px, 0px);
 80 |           -moz-transform: translate(0px, 0px);
 81 |           -ms-transform: translate(0px, 0px);
 82 |           transform: translate(0px, 0px);
 83 |         }
 84 | 
 85 |         50% {
 86 |           -webkit-transform: translate(2px, 0px);
 87 |           -moz-transform: translate(2px, 0px);
 88 |           -ms-transform: translate(2px, 0px);
 89 |           transform: translate(2px, 0px);
 90 |         }
 91 | 
 92 |         100% {
 93 |           -webkit-transform: translate(0px, 0px);
 94 |           -moz-transform: translate(0px, 0px);
 95 |           -ms-transform: translate(0px, 0px);
 96 |           transform: translate(0px, 0px);
 97 |         }
 98 |       }
 99 | 
100 |       .am-weather-cloud-3 {
101 |         -webkit-animation-name: am-weather-cloud-3;
102 |         -moz-animation-name: am-weather-cloud-3;
103 |         animation-name: am-weather-cloud-3;
104 |         -webkit-animation-duration: 3s;
105 |         -moz-animation-duration: 3s;
106 |         animation-duration: 3s;
107 |         -webkit-animation-timing-function: linear;
108 |         -moz-animation-timing-function: linear;
109 |         animation-timing-function: linear;
110 |         -webkit-animation-iteration-count: infinite;
111 |         -moz-animation-iteration-count: infinite;
112 |         animation-iteration-count: infinite;
113 |       }
114 |       ]]>
115 |     </style>
116 |   </defs>
117 |   <g transform="translate(16,-2)" filter="url(#blur)">
118 |     <g class="am-weather-cloud-3"
119 |       style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-3;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-3;-webkit-animation-timing-function:linear">
120 |       <path transform="translate(-20,-11)"
121 |         d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
122 |         fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
123 |     </g>
124 |     <g class="am-weather-sleet-2" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8"
125 |       stroke-linecap="round">
126 |       <line class="am-weather-rain-1" transform="translate(-5,1)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
127 |         style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
128 |       <line class="am-weather-rain-1" transform="translate(5)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
129 |         style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
130 |     </g>
131 |     <g class="am-weather-rain-3" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
132 |       stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
133 |       <line class="am-weather-rain-1" transform="translate(-13,1)" y2="8"
134 |         style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
135 |       <line class="am-weather-rain-1" transform="translate(-3,2)" y2="8"
136 |         style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
137 |       <line class="am-weather-rain-2" transform="translate(7,-1)" y2="8"
138 |         style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
139 |     </g>
140 |   </g>
141 | </svg>


--------------------------------------------------------------------------------
/assets/wind.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
 3 |   <defs>
 4 |     <filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
 5 |       <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
 6 |       <feOffset dx="0" dy="4" result="offsetblur" />
 7 |       <feComponentTransfer>
 8 |         <feFuncA slope="0.05" type="linear" />
 9 |       </feComponentTransfer>
10 |       <feMerge>
11 |         <feMergeNode />
12 |         <feMergeNode in="SourceGraphic" />
13 |       </feMerge>
14 |     </filter>
15 |   </defs>
16 |   <g transform="translate(16 -2)" filter="url(#blur)">
17 |     <g class="am-weather-wind" transform="translate(-16,10)" fill="none" stroke="#57A0EE" stroke-linecap="round"
18 |       stroke-width="2">
19 |       <path stroke-dasharray="150 10" d="M25.5 5A4 4 0 1 1 29 11H10">
20 |         <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0s" />
21 |       </path>
22 |       <path stroke-dasharray="144 16"
23 |         d="M39.5 11A4 4 0 1 1 43 17H6">
24 |         <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.5s" />
25 |       </path>
26 |       <path stroke-dasharray="150 10"
27 |         d="M28.5 29A4 4 0 1 0 32 23H15">
28 |         <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.25s" />
29 |       </path>
30 |     </g>
31 |   </g>
32 | </svg>


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: 'Times New Roman', Times, serif;
 5 |     box-sizing: border-box;
 6 | }
 7 | 
 8 | .Card{
 9 |     width: 90%;
10 |     max-width: 470px;
11 |     background:linear-gradient(135deg, #00feba, #5b548a);
12 |     color: #fff;
13 |     margin: 100px auto 0;
14 |     border-radius: 20px;
15 |     padding: 40px 35px;
16 |     text-align: center;
17 | 
18 | }
19 | .search{
20 |     width: 100%;
21 |     display: flex;
22 |     align-items: center;
23 |     justify-content: space-between;
24 | }
25 | .search input{
26 |     border: 0;
27 |     outline: 0;
28 |     background: #555;
29 |     padding: 10px 25px;
30 |     height: 60px;
31 |     border-radius: 30px;
32 |     flex: 1;
33 |     margin-right: 16px;
34 |     font-size: 18px;
35 | }
36 | 
37 | .search button{
38 |     border: 0;
39 |     outline: 0;
40 |     background: #ebfffc;
41 |     border-radius: 50%;
42 |     width: 60px;
43 |     height: 60px;
44 |     cursor: pointer;
45 | }
46 | 
47 | .weather-icon {
48 |     width: 170px;
49 |     margin-top: 30px;
50 | }
51 | 
52 | .weather h1 {
53 |     font-size: 80px;
54 |     font-weight: 500;
55 | }
56 | 
57 | .weather h2 {
58 |     font-size: 45px;
59 |     font-weight: 400;
60 |     margin-top: -10px;
61 | }
62 | 
63 | .details {
64 |     display: flex;
65 |     align-items: center;
66 |     justify-content: space-between;
67 |     padding: 0 20px;
68 |     margin-top: 50px;
69 | }
70 | 
71 | .col {
72 |     display: flex;
73 |     align-items: center;
74 |     text-align: left;
75 | }
76 | 
77 | .col img {
78 |     width: 40px;
79 |     margin-right: 10px;
80 | }
81 | 
82 | .humidity, .wind {
83 |     font-size: 28px;
84 |     margin-top: -6px;
85 | }
86 | 
87 | .weather {
88 |     display: none;
89 | }
90 | 
91 | .error {
92 |     text-align: left;
93 |     margin-left: 10px;
94 |     font-size: 14px;
95 |     margin-top: 10px;
96 |     display: none;
97 | }


--------------------------------------------------------------------------------
/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.0">
 6 |     <link rel="stylesheet" href="index.css">
 7 |     <title>Weather App</title>
 8 | </head>
 9 | <body>
10 |     <div class="Card">
11 |         <div class="search">
12 |             <input type="text" placeholder="Enter City Name" spellcheck="false">
13 |             <button><img src="https://cdn-icons-png.flaticon.com/128/54/54481.png" ></button>
14 |         </div>
15 | 
16 |         <div class="error">
17 |             <p>Invalid city name</p>
18 |         </div>
19 |         <div class="weather">
20 |             <img src="assets/clear.svg" class="weather-icon">
21 |             <h1 class="temp">22°C</h1>
22 |             <h2 class="city">New York</h2>
23 |             <div class="details">
24 |                 <div class="col">
25 |                     <img src="assets/humid.svg">
26 |                     <div>
27 |                         <p class="humidity">50%</p>
28 |                         <p>Humidity</p>
29 |                     </div>
30 |                 </div>
31 |                 <div class="col">
32 |                     <img src="assets/wind.svg">
33 |                     <div>
34 |                         <p class="wind">15 km/h</p>
35 |                         <p>Wind Speed</p>
36 |                     </div>
37 |                 </div>
38 |             </div>
39 |         </div>
40 |     </div>
41 |     
42 |     <script src="index.js"></script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const apiKey = ""; // Sign up at https://openweathermap.org to get your free API key
 2 | const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
 3 | 
 4 | const searchBox = document.querySelector(".search input");
 5 | const searchBtn = document.querySelector(".search button");
 6 | 
 7 | async function checkWeather(city) {
 8 |     try {
 9 |         const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
10 |         
11 |         if(response.status == 404) {
12 |             document.querySelector(".error").style.display = "block";
13 |             document.querySelector(".weather").style.display = "none";
14 |         } else {
15 |             const data = await response.json();
16 | 
17 |             document.querySelector(".city").innerHTML = data.name;
18 |             document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
19 |             document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
20 |             document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";
21 | 
22 |             // Update weather icon based on weather condition
23 |             const weatherIcon = document.querySelector(".weather-icon");
24 |             if(weatherIcon) {
25 |                 switch(data.weather[0].main) {
26 |                     case "Clouds":
27 |                         weatherIcon.src = "assets/clouds.svg";
28 |                         break;
29 |                     case "Clear":
30 |                         weatherIcon.src = "assets/clear.svg";
31 |                         break;
32 |                     case "Rain":
33 |                         weatherIcon.src = "assets/rain.svg";
34 |                         break;
35 |                     case "Drizzle":
36 |                         weatherIcon.src = "assets/drizzle.svg";
37 |                         break;
38 |                     case "Mist":
39 |                         weatherIcon.src = "assets/mist.svg";
40 |                         break;
41 |                 }
42 |             }
43 | 
44 |             document.querySelector(".weather").style.display = "block";
45 |             document.querySelector(".error").style.display = "none";
46 |         }
47 | 
48 |     } catch(error) {
49 |         console.error("Error fetching weather data:", error);
50 |     }
51 | }
52 | 
53 | searchBtn.addEventListener("click", () => {
54 |     checkWeather(searchBox.value);
55 | });
56 | 
57 | searchBox.addEventListener("keypress", (event) => {
58 |     if (event.key === "Enter") {
59 |         checkWeather(searchBox.value);
60 |     }
61 | });


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