Scribd
Upload
31 views

Index HTML

The document describes a weather application with HTML, CSS and JavaScript code. The HTML contains the application interface and links to the CSS and JS files. The CSS styles the interface and components. The JS handles form submission, makes API requests to get weather data and populates the results.

Uploaded by

Subhajit Kundu
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views

Index HTML

The document describes a weather application with HTML, CSS and JavaScript code. The HTML contains the application interface and links to the CSS and JS files. The CSS styles the interface and components. The JS handles form submission, makes API requests to get weather data and populates the results.

Uploaded by

Subhajit Kundu
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<>index.

html

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wethear Application</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="top-banner">
<div class="container">
<h1 class="heading" style="text-align: center;">Weather Application</h1>
<form>
<input type="text" placeholder="Search for the city." autofocus />
<button type="submit">Submit</button>
<br />
<span class="msg"></span>
</form>
</div>
</section>
<section class="ajax-section">
<div class="container">
<ul class="cities"></ul>
</div>
</section>
<script src="weather.js"></script>
</body>
</html>

{}package.json

{
"name": "weather-forecast-website",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "serve"
},
"repository": {
"type": "git",
"url": "git+https://github.com/codesandbox-app/static-template.git"
},
"keywords": [],
"author": "Ives van Hoorne",
"license": "MIT",
"bugs": {
"url": "https://github.com/codesandbox-app/static-template/issues"
},
"homepage": "https://github.com/codesandbox-app/static-template#readme",
"devDependencies": {
"serve": "^11.2.0"
}
}
=======================================================================
{}sandbox.config.json

{
"template": "static"
}
==========================================================================

style.css

{
margin: auto;
padding: 0;
box-sizing: border-box;
font-weight: normal;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
}
button,
input {
border: none;
background-color: white;
outline: none;
color: inherit;
}
img {
display: block;
max-width: 100%;
height: auto;
}
ul {
list-style: none;
}
body {
font: 1rem/1.3;
background: var(--bg_main);
color: var(--text_dark);
padding: 70px;
background-color: #679289;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.top-banner {
color: black;
background-color: #ee2e31;
padding: 50px;
}
.heading {
font-weight: bold;
font-size: 4rem;
letter-spacing: 0.02rem;
padding: 0 0 30px 0;
}
.top-banner form {
position: relative;
display: flex;
align-items: center;
}
.top-banner form input {
font-size: 1.5rem;
height: 40px;
padding: 10px;
border-radius: 1px solid;
}
.top-banner form button {
font-size: 1rem;
font-weight: bold;
padding: 10px 15px;
margin-left: 15px;
border-radius: 5px;
background: white;
transition: background 0.3s ease-in-out;
}

.top-banner form button:hover {


background-color: black;
color: white;
}

.top-banner form .msg {


position: absolute;
bottom: -40px;
left: 0;
max-width: 450px;
min-height: 40px;
}
.ajax-section {
margin: 70px 0 20px;
/* background-color: blueviolet; */
}

.ajax-section .cities {
display: grid;
grid-gap: 32px 20px;
/* background-color: blueviolet; */
grid-template-columns: repeat(4, 1fr);
}

.ajax-section .city {
position: relative;
background-color: #1d7874;
padding: 40px 10%;
border-radius: 20px;
}

.ajax-section .city::after {
content: "";
width: 90%;
height: 50px;
position: absolute;
bottom: -12px;
left: 5%;
z-index: -1;
opacity: 0.3;
border-radius: 20px;
}

.ajax-section figcaption {
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.ajax-section .city-temp {
font-size: 5rem;
font-weight: bold;
margin-top: 10px;
color: var(--text_dark);
}

.ajax-section .city sup {


font-size: 0.5em;
}

.ajax-section .city-name sup {


padding: 0.2em 0.6em;
border-radius: 30px;
color: var(--text_light);
background: var(--orange);
}

.ajax-section .city-icon {
margin-top: 10px;
width: 100px;
height: 100px;
}

@media screen and (max-width: 1000px) {


body {
padding: 30px;
}

.ajax-section .cities {
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (max-width: 700px) {


.heading,
.ajax-section .city-temp {
font-size: 3rem;
}

.ajax-section {
margin-top: 20px;
}
.top-banner form {
flex-direction: column;
align-items: flex-start;
}

.top-banner form input,


.top-banner form button {
width: 100%;
}

.top-banner form button {


margin: 20px 0 0 0;
}

.top-banner form .msg {


position: static;
max-width: none;
min-height: 0;
margin-top: 10px;
}

.ajax-section .cities {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 500px) {


body {
padding: 15px;
}

.ajax-section .cities {
grid-template-columns: repeat(1, 1fr);
}
}
.page-footer {
text-align: right;
font-size: 1rem;
color: var(--text_light);
margin-top: 40px;
}

.page-footer span {
color: var(--red);
}
.api {
background: #fffbbc;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
}

.api a {
text-decoration: underline;
}

.api a:hover {
text-decoration: none;
}

===================================================================================
=====

weather.js

const form = document.querySelector(".top-banner form");


const input = document.querySelector(".top-banner input");
const msg = document.querySelector(".top-banner .msg");
const list = document.querySelector(".ajax-section .cities");
const apiKey = "4d8fb5b93d4af21d66a2948710284366";

form.addEventListener("submit", (e) => {


e.preventDefault();
const listItems = list.querySelectorAll(".ajax-section .city");
const inputVal = input.value;
const url = `https://api.openweathermap.org/data/2.5/weather?q=$
{inputVal}&appid=${apiKey}&units=metric`;

fetch(url)
.then((response) => response.json())
.then((data) => {
const { main, name, sys, weather } = data;
const icon = `https://openweathermap.org/img/wn/${weather[0]
["icon"]}@2x.png`;

const li = document.createElement("li");
li.classList.add("city");
const markup = `
<h2 class="city-name" data-name="${name},${sys.country}">
<span>${name}</span>
<sup>${sys.country}</sup>
</h2>
<div class="city-temp">${Math.round(main.temp)}<sup>°C</sup></div>
<figure>
<img class="city-icon" src=${icon} alt=${weather[0]["main"]}>
<figcaption>${weather[0]["description"]}</figcaption>
</figure>
`;
li.innerHTML = markup;
list.appendChild(li);
})
.catch(() => {
msg.textContent = "Please search for a valid city";
});

msg.textContent = "";
form.reset();
input.focus();
});

You might also like