From a6161f64de7e5ce58edc3289c0404bfc68606aec Mon Sep 17 00:00:00 2001 From: TechSenseiX Date: Mon, 1 Jul 2024 21:58:47 +0530 Subject: [PATCH] Add files via upload --- index.html | 21 ++++++++++++++++ index.js | 22 +++++++++++++++++ style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..6765a0f --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + Weather + + + + + + +
+

Canada, America

+
Localtime
+
Temp:13
+ +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..e24d706 --- /dev/null +++ b/index.js @@ -0,0 +1,22 @@ +const button = document.getElementById("search-button"); +const input= document.getElementById("city-input"); +async function getData(cityName){ + const promise = await fetch(`http://api.weatherapi.com/v1/current.json?key=a507436a08a14933a0e141612241303&q=${cityName}&aqi=yes`); + return await promise.json() +} +const cityName= document.getElementById("cityName"); +const cityTime = document.getElementById("cityTime"); +const cityTemp= document.getElementById("cityTemp"); + +button.addEventListener('click', async() =>{ +//console.log(input.value); +const value = input.value; +const result = await getData(value); +console.log(result); +cityName.innerText=`${result.location.name}, +${result.location.region} - ${result.location.country}`; +cityTime.innerText = result.location.localtime; +cityTemp.innerText = result.current.temp_c; +}); + +//http://api.weatherapi.com/v1/current.json?key=a507436a08a14933a0e141612241303&q=London&aqi=yes \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..35d1362 --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +/* styles.css */ + +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 300px; +} +#example { + margin-top: 20px; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 300px; + text-align: center; +} +#city-input { + width: 30%; /* Adjusted for button width and padding */ + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + margin-bottom: 10px; +} + +#search-button { + width: 80px; /* Fixed width for the button */ + padding: 10px; + font-size: 16px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#search-button:hover { + background-color: #0056b3; +} + +.weather-info { + margin-top: 20px; + text-align: left; +} + +#cityName { + font-size: 24px; + margin-bottom: 5px; + color: #333; +} + +#cityTime, #cityTemp { + font-size: 16px; + margin-bottom: 10px; + color: #555; +}