├── styles
    ├── images
    │   ├── 404.png
    │   ├── clear.png
    │   ├── cloud.png
    │   ├── clouds.png
    │   ├── mist.png
    │   ├── rain.png
    │   ├── search.png
    │   ├── snow.png
    │   ├── wind.png
    │   ├── drizzle.png
    │   ├── humidity.png
    │   ├── mist (1).png
    │   ├── rain (1).png
    │   ├── snow (1).png
    │   └── clear (1).png
    └── style.css
├── package.json
├── .gitignore
├── public
    └── vite.svg
├── index.html
└── src
    └── main.js


/styles/images/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/404.png


--------------------------------------------------------------------------------
/styles/images/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/clear.png


--------------------------------------------------------------------------------
/styles/images/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/cloud.png


--------------------------------------------------------------------------------
/styles/images/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/clouds.png


--------------------------------------------------------------------------------
/styles/images/mist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/mist.png


--------------------------------------------------------------------------------
/styles/images/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/rain.png


--------------------------------------------------------------------------------
/styles/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/search.png


--------------------------------------------------------------------------------
/styles/images/snow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/snow.png


--------------------------------------------------------------------------------
/styles/images/wind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/wind.png


--------------------------------------------------------------------------------
/styles/images/drizzle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/drizzle.png


--------------------------------------------------------------------------------
/styles/images/humidity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/humidity.png


--------------------------------------------------------------------------------
/styles/images/mist (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/mist (1).png


--------------------------------------------------------------------------------
/styles/images/rain (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/rain (1).png


--------------------------------------------------------------------------------
/styles/images/snow (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/snow (1).png


--------------------------------------------------------------------------------
/styles/images/clear (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdullahAssi/Weather-App/HEAD/styles/images/clear (1).png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "-latest",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^4.3.9"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="#" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <link
 9 |     href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap"
10 |     rel="stylesheet">
11 |     <title>Weather App By Abdullah</title>
12 |   </head>
13 |   <body>
14 | 
15 |     <div class="container">
16 |       <div class="search-box">
17 |           <i class="fa-solid fa-location-dot"></i>
18 |           <input type="text" placeholder="Enter your location">
19 |           <button class="fa-solid fa-magnifying-glass"></button>
20 |       </div>
21 | 
22 |       <div class="not-found">
23 |           <img src="/styles/images/404.png">
24 |           <p>Oops! Invalid location :/</p>
25 |       </div>
26 | 
27 |       <div class="weather-box">
28 |           <img src="/styles/images/clear (1).png">
29 |           <p class="temperature"></p>
30 |           <p class="description"></p>
31 |       </div>
32 | 
33 |       <div class="weather-details">
34 |           <div class="humidity">
35 |               <i class="fa-solid fa-water"></i>
36 |               <div class="text">
37 |                   <span></span>
38 |                   <p>Humidity</p>
39 |               </div>
40 |           </div>
41 |           <div class="wind">
42 |               <i class="fa-solid fa-wind"></i>
43 |               <div class="text">
44 |                   <span></span>
45 |                   <p>Wind Speed</p>
46 |               </div>
47 |           </div>
48 |       </div>
49 | 
50 |   </div>
51 | 
52 |   
53 |   <script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>
54 |     <script type="module" src="/src/main.js"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import '../styles/style.css'
 2 | 
 3 | const container = document.querySelector('.container');
 4 | const search = document.querySelector('.search-box button');
 5 | const weatherBox = document.querySelector('.weather-box');
 6 | const weatherDetails = document.querySelector('.weather-details');
 7 | const error404 = document.querySelector('.not-found');
 8 | 
 9 | search.addEventListener('click', () => {
10 | 
11 |     const APIKey = '6f6829f788e1c17261cd3a7dbafae166';
12 |     const city = document.querySelector('.search-box input').value;
13 | 
14 |     if (city === '')
15 |         return;
16 | 
17 |     fetch(`https://api.openweathermap.org/data/2.5/weather?q=islamabad&units=metric&appid=6f6829f788e1c17261cd3a7dbafae166`)
18 |         .then(response => response.json())
19 |         .then(json => {
20 | 
21 |             if (json.cod === '404') {
22 |                 container.style.height = '400px';
23 |                 weatherBox.style.display = 'none';
24 |                 weatherDetails.style.display = 'none';
25 |                 error404.style.display = 'block';
26 |                 error404.classList.add('fadeIn');
27 |                 return;
28 |             }
29 | 
30 |             error404.style.display = 'none';
31 |             error404.classList.remove('fadeIn');
32 | 
33 |             const image = document.querySelector('.weather-box img');
34 |             const temperature = document.querySelector('.weather-box .temperature');
35 |             const description = document.querySelector('.weather-box .description');
36 |             const humidity = document.querySelector('.weather-details .humidity span');
37 |             const wind = document.querySelector('.weather-details .wind span');
38 | 
39 |             switch (json.weather[0].main) {
40 |                 case 'Clear':
41 |                     image.src = '/styles/images/clear.png';
42 |                     break;
43 | 
44 |                 case 'Rain':
45 |                     image.src = '/styles/images/rain(1).png';
46 |                     break;
47 | 
48 |                 case 'Snow':
49 |                     image.src = '/styles/images/snow.png';
50 |                     break;
51 | 
52 |                 case 'Clouds':
53 |                     image.src = '/styles/images/cloud.png';
54 |                     break;
55 | 
56 |                 case 'Haze':
57 |                     image.src = '/styles/images/mist.png';
58 |                     break;
59 | 
60 |                 default:
61 |                     image.src = '';
62 |             }
63 | 
64 |             temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;
65 |             description.innerHTML = `${json.weather[0].description}`;
66 |             humidity.innerHTML = `${json.main.humidity}%`;
67 |             wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;
68 | 
69 |             weatherBox.style.display = '';
70 |             weatherDetails.style.display = '';
71 |             weatherBox.classList.add('fadeIn');
72 |             weatherDetails.classList.add('fadeIn');
73 |             container.style.height = '590px';
74 | 
75 | 
76 |         });
77 | 
78 | 
79 | });


--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   border: 0;
  5 |   outline: none;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body{
 10 |   height: 100vh;
 11 |   display: flex;
 12 |   align-items: center;
 13 |   justify-content: center;
 14 |   background: #06283D;
 15 | }
 16 | 
 17 | .container{
 18 |   position: relative;
 19 |   width: 400px;
 20 |   height: 105px;
 21 |   background: #fff;
 22 |   padding: 28px 32px;
 23 |   overflow: hidden;
 24 |   border-radius: 18px;
 25 |   font-family: 'Roboto', sans-serif;
 26 |   transition: 0.6s ease-out;
 27 | }
 28 | 
 29 | .search-box{
 30 |   width: 100%;
 31 |   height: min-content;
 32 |   display: flex;
 33 |   align-items: center;
 34 |   justify-content: space-between;
 35 | }
 36 | 
 37 | .search-box input{
 38 |   color: #06283D;
 39 |   width: 80%;
 40 |   font-size: 24px;
 41 |   font-weight: 500;
 42 |   padding-left: 32px;
 43 | }
 44 | 
 45 | .search-box input::placeholder{
 46 |   font-size: 20px;
 47 |   font-weight: 500;
 48 |   color: #06283D;
 49 |   text-transform: capitalize;
 50 | }
 51 | 
 52 | .search-box button{
 53 |   cursor: pointer;
 54 |   width: 50px;
 55 |   height: 50px;
 56 |   color: #06283D;
 57 |   background: #dff6ff;
 58 |   border-radius: 50%;
 59 |   font-size: 22px;
 60 |   transition: 0.4s ease;
 61 | }
 62 | 
 63 | .search-box button:hover{
 64 |   color: #fff;
 65 |   background: #06283D;
 66 | }
 67 | 
 68 | .search-box i{
 69 |   position: absolute;
 70 |   color: #06283D;
 71 |   font-size: 28px;
 72 | }
 73 | 
 74 | .weather-box{
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .weather-box img{
 79 |   width: 60%;
 80 |   margin-top: 30px;
 81 | }
 82 | 
 83 | .weather-box .temperature{
 84 |   position: relative;
 85 |   color: #06283D;
 86 |   font-size: 4rem;
 87 |   font-weight: 800;
 88 |   margin-top: 30px;
 89 |   margin-left: -16px;
 90 | }
 91 | 
 92 | .weather-box .temperature span{
 93 |   position: absolute;
 94 |   margin-left: 4px;
 95 |   font-size: 1.5rem;
 96 | }
 97 | 
 98 | .weather-box .description{
 99 |   color: #06283D;
100 |   font-size: 22px;
101 |   font-weight: 500;
102 |   text-transform: capitalize;
103 | }
104 | 
105 | .weather-details{
106 |   width: 100%;
107 |   display: flex;
108 |   justify-content: space-between;
109 |   margin-top: 30px;
110 | }
111 | 
112 | .weather-details .humidity, .weather-details .wind{
113 |   display: flex;
114 |   align-items: center;
115 |   width: 50%;
116 |   height: 100px;
117 | }
118 | 
119 | .weather-details .humidity{
120 |   padding-left: 20px;
121 |   justify-content: flex-start;
122 | }
123 | 
124 | .weather-details .wind{
125 |   padding-right: 20px;
126 |   justify-content: flex-end;
127 | }
128 | 
129 | .weather-details i{
130 |   color: #06283D;
131 |   font-size: 26px;
132 |   margin-right: 10px;
133 |   margin-top: 6px;
134 | }
135 | 
136 | .weather-details span{
137 |   color: #06283D;
138 |   font-size: 22px;
139 |   font-weight: 500;
140 | }
141 | 
142 | .weather-details p{
143 |   color: #06283D;
144 |   font-size: 14px;
145 |   font-weight: 500;
146 | }
147 | 
148 | .not-found{
149 |   width: 100%;
150 |   text-align: center;
151 |   margin-top: 50px;
152 |   scale: 0;
153 |   opacity: 0;
154 |   display: none;
155 | }
156 | 
157 | .not-found img{
158 |   width: 70%;
159 | }
160 | 
161 | .not-found p{
162 |   color: #06283D;
163 |   font-size: 22px;
164 |   font-weight: 500;
165 |   margin-top: 12px;
166 | }
167 | 
168 | .weather-box, .weather-details{
169 |   scale: 0;
170 |   opacity: 0;
171 | }
172 | 
173 | .fadeIn{
174 |   animation: 0.5s fadeIn forwards;
175 |   animation-delay: 0.5s;
176 | }
177 | 
178 | @keyframes fadeIn{
179 |   to {
180 |       scale: 1;
181 |       opacity: 1;
182 |   }
183 | }


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