Skip to content

Commit

Permalink
clean html and css, and fix current location btn icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@Egesiapres
Egesiapres committed Oct 19, 2023
1 parent 174588f commit e3764d4
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 58 deletions.
71 changes: 33 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,19 @@
<header class="container col-direction y-center rg-15 p-15">
<form class="container x-center">
<input
class="b-0 br-10 p-10 text-white bg-transparent"
class="b-0 br-10 p-10 bg-transparent text-white"
type="text"
placeholder="Search a city..."
value=""
/>

<button
class="b-0 br-10 p-10 text-black hidden"
id="search-btn"
type="submit"
>
🔎 Search
</button>

<button
class="b-0 br-10 p-10 hidden"
id="current-location-btn"
class="b-0 br-10"
type="button"
>
My location
<img src="img/location.svg" />
<!-- My location -->
</button>
</form>

Expand All @@ -74,27 +68,28 @@
>
<p
id="name-par"
class="medium text-center"
class="text-medium text-center"
>
City
</p>
<p
id="position-details-par"
class="small text-center m-0"
class="m-0 text-small text-center"
>
State, (COUNTRY)
</p>

<div class="container x-center">
<img
id="weather-main-img"
class="m-5"
src="https://egesiapres.github.io/weather-app/img/partly-cloudy-day.svg"
/>
</div>

<p
id="weather-main-par"
class="medium text-center m-0"
class="m-0 text-medium text-center"
>
Weather
</p>
Expand All @@ -116,12 +111,12 @@
<!-- secondary info -->
<div
id="city-secondary-info-div"
class="b-1 bg-transparent br-15 bc-transparent"
class="b-1 br-15 bc-transparent bg-transparent"
>
<div class="container y-center">
<i class="wi wi-thermometer text-transparent m-10"></i>
<i class="wi wi-thermometer m-10 text-transparent"></i>

<p class="label text-transparent m-10">TEMPERATURE</p>
<p class="m-10 label text-transparent">TEMPERATURE</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -130,14 +125,14 @@
<div>
<p
id="perceived-temp-par"
class="container x-center small m-10"
class="container x-center m-10 text-small"
>
Feels like: XX°C
</p>

<p
id="temp-par"
class="big cg-15 m-0"
class="cg-15 m-0 text-big"
>
XX°C
</p>
Expand Down Expand Up @@ -177,18 +172,18 @@

<div
id="temp-scale-div"
class="container col-direction x-center p-10 rg-15"
class="container col-direction x-center rg-15 p-10"
>
<label
for="scale-select"
class="small m-0 my-10"
class="m-0 text-small"
>Select a temperature scale</label
>

<select
name="scales"
id="scale-select"
class="text-black br-5 p-2"
class="br-5 p-2 text-black"
>
<option value="celsius">Celsius (°C)</option>
<option value="fahrenheit">Fahrenheit (°F)</option>
Expand All @@ -205,12 +200,12 @@
>
<div
id="wind-div"
class="container col-direction br-15 bg-transparent medium-box b-1 bc-transparent"
class="container col-direction b-1 br-15 bc-transparent box-medium bg-transparent"
>
<div>
<div class="container y-center">
<i class="wi wi-strong-wind m-10 text-transparent"></i>
<p class="label m-10 text-transparent">WIND</p>
<p class="m-10 label text-transparent">WIND</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -223,7 +218,7 @@
<img
id="wind-bft-icon"
src="https://egesiapres.github.io/weather-app/img/wind.svg"
class="small-icon mr-5"
class="mr-5 icon-small"
/>
<p
id="wind-speed-par"
Expand All @@ -240,7 +235,7 @@
<img
id="gust-bft-icon"
src="https://egesiapres.github.io/weather-app/img/wind.svg"
class="small-icon mr-5"
class="mr-5 icon-small"
/>
<p
id="gust-speed-par"
Expand All @@ -253,7 +248,7 @@
<div class="container y-center">
<img
src="https://egesiapres.github.io/weather-app/img/compass.svg"
class="small-icon mr-5"
class="mr-5 icon-small"
/>

<p
Expand All @@ -269,13 +264,13 @@

<div
id="sys-div"
class="container flex col-direction br-15 bg-transparent medium-box b-1 bc-transparent"
class="container col-direction b-1 br-15 bc-transparent box-medium bg-transparent"
>
<div>
<div class="container y-center">
<i class="wi wi-day-sunny m-10 text-transparent"></i>

<p class="label m-10 text-transparent">SUN</p>
<p class="m-10 label text-transparent">SUN</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -284,7 +279,7 @@
<div class="container y-center">
<img
src="https://egesiapres.github.io/weather-app/img/sunrise.svg"
class="small-icon mr-5"
class="mr-5 icon-small"
/>
<p
id="sunrise-par"
Expand All @@ -297,7 +292,7 @@
<div class="container y-center">
<img
src="https://egesiapres.github.io/weather-app/img/sunset.svg"
class="small-icon mr-5"
class="mr-5 icon-small"
/>

<p
Expand All @@ -319,13 +314,13 @@
>
<div
id="humidity-div"
class="container flex col-direction br-15 bg-transparent small-box b-1 bc-transparent"
class="container col-direction b-1 br-15 bc-transparent box-small bg-transparent"
>
<div>
<div class="container y-center">
<i class="wi wi-humidity m-10 text-transparent"></i>

<p class="label m-10 text-transparent">HUMIDITY</p>
<p class="m-10 label text-transparent">HUMIDITY</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -341,12 +336,12 @@

<div
id="pressure-div"
class="container col-direction br-15 bg-transparent small-box b-1 bc-transparent"
class="container col-direction b-1 br-15 bc-transparent box-small bg-transparent"
>
<div>
<div class="container y-center">
<i class="wi wi-barometer m-10 text-transparent"></i>
<p class="label m-10 text-transparent">PRESSURE</p>
<p class="m-10 label text-transparent">PRESSURE</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -362,13 +357,13 @@

<div
id="visibility-div"
class="container flex col-direction br-15 bg-transparent small-box b-1 bc-transparent"
class="container flex col-direction b-1 br-15 bc-transparent box-small bg-transparent"
>
<div>
<div class="container y-center">
<i class="wi wi-dust m-10 text-transparent"></i>

<p class="label m-10 text-transparent">VISIBILITY</p>
<p class="m-10 label text-transparent">VISIBILITY</p>
</div>

<hr class="m-0 bc-transparent" />
Expand All @@ -388,7 +383,7 @@
<div class="container y-center">
<i class="wi wi-direction-down text-transparent m-10"></i>

<p class="small m-0 text-transparent">Scroll</p>
<p class="m-0 text-small text-transparent">Scroll</p>
</div>
</footer>
</div>
Expand Down
4 changes: 1 addition & 3 deletions js/elements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ export const input = document.querySelector('input');

export const form = document.querySelector('form');

export const searchBtn = document.querySelector('#search-btn');

export const primaryDiv = document.querySelector('#primary-div');

export const secondaryDiv = document.querySelector('#secondary-div');
Expand All @@ -16,7 +14,7 @@ export const positionDetailsPar = document.querySelector(

export const weatherMainPar = document.querySelector('#weather-main-par');

export const weatherMainImg = document.querySelector('img');
export const weatherMainImg = document.querySelector('#weather-main-img');

export const tempPar = document.querySelector('#temp-par');

Expand Down
3 changes: 0 additions & 3 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
input,
form,
// searchBtn,
namePar,
positionDetailsPar,
weatherMainPar,
Expand Down Expand Up @@ -125,6 +124,4 @@ const displayWeatherData = async (location, event) => {

displayWeatherData();

// searchBtn.addEventListener('click', () => displayWeatherData(input.value));

form.addEventListener('submit', e => displayWeatherData(input.value, e));
6 changes: 5 additions & 1 deletion js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const API_KEY = 'd84df6a5359d1ca50cf0749743171b50';

export const formatInputValue = location => {
let formattedLocation;

formattedLocation = location.toLowerCase().trim();
formattedLocation = formattedLocation.split(',' || ', ');
formattedLocation = formattedLocation.map(el => el.trim());
Expand Down Expand Up @@ -114,6 +114,10 @@ export const getCustomIcon = weather => {
icon = `${baseUrl}/img/cloudy.svg`;
break;

case 'Fog':
icon = `${baseUrl}/img/fog.svg`;
break;

case 'Mist':
icon = `${baseUrl}/img/mist.svg`;
break;
Expand Down
34 changes: 21 additions & 13 deletions style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ section {
display: flex;
}

.text-center {
text-align: center;
}

.x-center {
justify-content: center;
}
Expand Down Expand Up @@ -146,29 +142,33 @@ section {
margin-left: 0;
}

.small {
.text-center {
text-align: center;
}

.text-small {
font-size: 14px;
}

.medium {
.text-medium {
font-size: 30px;
font-weight: 300;
}

.big {
.text-big {
font-size: 80px;
font-weight: 400;
}

.small-box {
.box-small {
width: 33%;
}

.medium-box {
.box-medium {
width: 50%;
}

.small-icon {
.icon-small {
height: 35px;
width: auto;
}
Expand Down Expand Up @@ -222,7 +222,15 @@ hr {

img {
width: 120px;
height: auto;
}

#current-location-btn {
background-color: #ffffff64;
}

button img {
width: 25px;
margin-top: 3px;
}

select {
Expand All @@ -248,9 +256,9 @@ select {

/* TODO: clear css **/
/* TODO: animated icons copy */
/* TODO: search bar */
/* TODO: current location */
/* TODO: responsive */

/* data */
/* TODO: pollution */
/* TODO: air pollution */
/* TODO: hour/daily forecast */

0 comments on commit e3764d4

Please sign in to comment.