Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added weather feature #21

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added weather feature #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15898ce
Added weather feature but still need more styling.
dannytszho Aug 6, 2021
ed3ea68
Styling weather feature with CSS.
dannytszho Aug 11, 2021
c06e5d9
Delete .DS_Store
dannytszho Aug 19, 2021
29725d7
Delete .DS_Store
dannytszho Aug 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/css/.DS_Store
View file
Open in desktop
Binary file not shown.
31 changes: 24 additions & 7 deletions assets/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down Expand Up @@ -81,10 +105,6 @@ a:hover{
webkit-text-decoration-skip: true;
}

.icon{
font-size: 2.5em;
}


/* FORMS */

Expand Down Expand Up @@ -187,7 +207,6 @@ table a{
}



/* SECTIONS */

#header{
Expand Down Expand Up @@ -281,8 +300,6 @@ table a{





/* MODAL */


Expand Down
Binary file added assets/js/.DS_Store
View file
Open in desktop
Binary file not shown.
44 changes: 44 additions & 0 deletions assets/js/weatherApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
let weather = {
"apikey": "375090722ff9b13931a9ed44d6f32f14",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

public apikey will be banned. you need to move it into ENV variable and enable weather feature only if apikey setted


// Fetch data from openweathermap API call.
fetchWeather: function (city) {
fetch(
"http://api.openweathermap.org/data/2.5/weather?q="
+ city
Copy link

@Rpsl Rpsl Dec 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i was use openweathermap forecast in several projects and i recommend use lat & lon coordinates prefer city name. If you use city name this may not work well for people from other countries or small towns because of problems with synonyms.

See By geographic coordinates for example https://openweathermap.org/current

+ "&units=metric&appid="
+ this.apikey
)
.then((response) => response.json())
.then((data) => this.displayWeather(data));
},
// Utilize data from the API call
displayWeather: function(data) {
const { name } = data;
const { icon, description } = data.weather[0];
const { temp, humidity } = data.main;
const { speed } = data.wind;

document.querySelector(".city").innerText = "Weather in " + name;
document.querySelector(".icon").src =
"https://openweathermap.org/img/wn/"+ icon + ".png";
document.querySelector(".description").innerText = description;
document.querySelector(".temp").innerText = temp + "°C";
document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%";
document.querySelector(".wind").innerText = "Wind speed: " + speed + " km/h";

},
search: function (){
this.fetchWeather(document.querySelector(".search-bar").value);
},
};

// Allow users to search with "Enter" button
document.querySelector(".search button").addEventListener("click", function(){
weather.search();
});
document.querySelector(".search-bar").addEventListener("keyup", function (event) {
if (event.key == "Enter") {
weather.search();
}
});
32 changes: 31 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also you need move place for weather forecast into ENV variable


<section id="modal">
<div>
Expand Down Expand Up @@ -74,8 +74,37 @@ <h2>Search options</h2>
<section id="header">
<h2 id="header_date"></h2>
<h1 id="header_greet"></h1>

</section>

<section id="weather">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you need use handelbars-template for rendering data. only if script get correct data from weather api.

<div class="card">
<div class="search">
<input type="text" class="search-bar" placeholder="Enter your City">
<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 loading">
<h3 class="city">Weather in London</h3>
<div class="temp">51°C</div>
<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>
</div>
</div>


</section>



<section id="apps">
<script type="text/handlebars-template" id="apps-template">
<h3>Applications</h3>
Expand Down Expand Up @@ -122,6 +151,7 @@ <h4>{{category}}</h4>
<script src="./assets/js/script.js" type="text/javascript"></script>
<script src="./assets/js/themer.js" type="text/javascript"></script>
<script src="./assets/js/search.js" type="text/javascript"></script>
<script src="./assets/js/weatherApp.js" type="text/javascript" defer></script>

</body>
</html>