Add files via upload

TechSenseiX · Jul 1, 2024 · a6161f6 · a6161f6
1 parent f8286f0
commit a6161f6
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <input id="city-input" type="text" placeholder="Enter City Name">
+    <button id="search-button">Search</button>
+
+    <div id="example">
+        <h3 id="cityName">Canada, America</h3>
+        <h5 id="cityTime">Localtime</h5>
+        <h5 id="cityTemp">Temp:13</h5>
+
+    </div>
+</body>
+<script src="index.js"></script>
+</html>
diff --git a/index.js 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
diff --git a/style.css 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;
+}