Skip to content

Commit

Permalink
feat: set icon image according to temperature
Browse files Browse the repository at this point in the history
  • Loading branch information
@anndcodes
anndcodes committed Oct 19, 2023
1 parent 76600e4 commit 311ac5d
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 84 deletions.
148 changes: 64 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather App</title>
<!-- bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- axios -->
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="weather-app-wrapper">
<div class="weather-app px-5 rounded-4 shadow-lg">
<form class="search-form">
<div class="row justify-content-end">
<div class="col-5">
<input
type="search"
id="search"
placeholder="Enter a city"
autofocus="on"
autocomplete="off"
class="form-control shadow"
/>
</div>
<div class="col-2 justify-content-around">
<input
type="submit"
value="Search"
class="form-control btn shadow"
id="search-btn"
/>
</div>
<div class="col-2">
<input
type="submit"
value="Current"
class="form-control btn shadow"
id="current-btn"
/>
</div>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather App</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<!-- axios -->
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="container">
<div class="weather-app-wrapper">
<div class="weather-app px-5 rounded-4 shadow-lg">
<form class="search-form">
<div class="row justify-content-end">
<div class="col-5">
<input type="search" id="search" placeholder="Enter a city" autofocus="on" autocomplete="off"
class="form-control shadow" />
</div>
<div class="col-2 justify-content-around">
<input type="submit" value="Search" class="form-control btn shadow" id="search-btn" />
</div>
<div class="col-2">
<input type="submit" value="Current" class="form-control btn shadow" id="current-btn" />
</div>
</form>
<div class="overview">
<h1 id="city"></h1>
<ul>
<li id="date"></li>
</ul>
</div>
<div class="row">
<div class="col-3 d-flex justify-content-start weather-temperature">
<div
class="weather-status d-flex flex-column align-items-center row-gap-3"
>
<img src="clear.svg" alt="" />
<p id="description"></p>
</div>
</form>
<div class="overview">
<h1 id="city"></h1>
<ul>
<li id="date"></li>
</ul>
</div>
<div class="row">
<div class="col-3 d-flex justify-content-start weather-temperature">
<div class="weather-status d-flex flex-column align-items-center row-gap-3">
<div class="weather-img"></div>
<p id="description"></p>
</div>
<div class="weather col-5">
<div class="d-flex">
<h2 id="temperature"></h2>
<div>
<span class="units">
<a id="celsius" class="active">°C</a> |
<a id="fahrenheit" href="">°F</a>
</span>

<p>
<small class="weather-data"
>💧 <span class="humidity"></span> 🌬️
<span class="wind"></span
></small>
</p>
</div>

</div>
<div class="d-flex justify-content-end align-items-start">
</div>
<div class="weather col-5">
<div class="d-flex">
<h2 id="temperature"></h2>
<div>
<span class="units">
<a id="celsius" class="active">°C</a> |
<a id="fahrenheit" href="">°F</a>
</span>

<p>
<small class="weather-data">💧 <span class="humidity"></span> 🌬️
<span class="wind"></span></small>
</p>
</div>

</div>
<div class="d-flex justify-content-end align-items-start">
</div>
</div>
</div>
<footer>open-source code by <span>Annd</span> on <a href="https://github.com/anndcodes/weather-app" target="_blank">Github</a></footer>
</div>
<footer>open-source code by <span>Annd</span> on <a href="https://github.com/anndcodes/weather-app"
target="_blank">Github</a></footer>
</div>
<script src="script.js"></script>
</body>
</html>
</div>
<script src="script.js"></script>
</body>

</html>
12 changes: 12 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ function formatDate(timestamp) {
return `${day} ${hour}:${minutes}`;
}

// create img element to use with temperature icon
let weatherIcon = document.createElement("img");
weatherIcon.classList.add("weather-icon");

// get temperature by searching for a city
function showTemp(response) {
celsiusTemp = response.data.main.temp;
Expand All @@ -39,6 +43,14 @@ function showTemp(response) {
response.data.wind.speed
)} km/h`);
let date = document.querySelector("#date").innerHTML = formatDate(response.data.dt * 1000);

// append img element and set icon image
let weatherImg = document.querySelector(".weather-img").append(weatherIcon);

weatherIcon.setAttribute(
"src",
`https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`);
weatherIcon.setAttribute("alt", response.data.weather[0].description);
}

function search(city) {
Expand Down

0 comments on commit 311ac5d

Please sign in to comment.