beenull/sui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Styling weather feature with CSS.

Browse source
This commit is contained in:
dannytszho 2021-08-10 20:58:33 -07:00
parent 15898ce074
commit ed3ea6804a
5 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored
View file

Binary file not shown.

BIN
assets/.DS_Store vendored
View file

Binary file not shown.

31
assets/css/styles.css
View file

@ -20,6 +20,30 @@ body{
width: 100vw;
}
/* Weather */
section#weather {
display: flex;
justify-content: center;
font-family: inherit;
font-size: 130%;
}
.weatherSearch {
margin: 0.5em;
border-radius: 50%;
border: none;
height: 30px;
width: 30px;
outline: none;
}
.temp, .search-icon, .description, .humidity, .wind {
display: flex;
justify-content: center;
}
*,
*:before,
*:after{
@ -81,10 +105,6 @@ a:hover{
webkit-text-decoration-skip: true;
}
.icon{
font-size: 2.5em;
}
/* FORMS */
@ -187,7 +207,6 @@ table a{
}
/* SECTIONS */
#header{
@ -281,8 +300,6 @@ table a{
/* MODAL */

3
assets/js/weatherApp.js
View file

@ -32,6 +32,7 @@ let weather = {
this.fetchWeather(document.querySelector(".search-bar").value);
},
};
// Allow users to search with "Enter" button
document.querySelector(".search button").addEventListener("click", function(){
weather.search();
@ -40,4 +41,4 @@ document.querySelector(".search-bar").addEventListener("keyup", function (event)
if (event.key == "Enter") {
weather.search();
}
});
});

14
index.html
View file

@ -12,7 +12,7 @@
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
</head>
<body onload="loadFunctions()">
<body onload="loadFunctions(); weather.fetchWeather('san diego')">
<section id="modal">
<div>
@ -77,21 +77,23 @@
</section>
<section>
<section id="weather">
<div class="card">
<div class="search">
<input type="text" class="search-bar" placeholder="Enter your City">
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em"
<button class="weatherSearch"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
</path>
</svg></button>
</div>
<div class ="weather">
<h2 class="city">Weather in London</h2>
<div class ="weather loading">
<h3 class="city">Weather in London</h3>
<div class="temp">51°C</div>
<img scr"" alt="" class="icon" />
<div class="search-icon">
<img scr"" alt="" class="icon" />
</div>
<div class="description">Cloudy</div>
<div class="humidity">Humidity: 60%</div>
<div class="wind">Wind speed: 6.2km/h</div>