Add files via upload

Tofarati262 · Jan 14, 2024 · 0579563 · 0579563
commit 0579563
Show file tree

Hide file tree

Showing 25 changed files with 8,012 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.snowpack
+build
+node_modules
diff --git a/clear.png b/clear.png
diff --git a/cloud gif.gif b/cloud gif.gif
diff --git a/clouds.png b/clouds.png
diff --git a/drizzle.png b/drizzle.png
diff --git a/humidity.png b/humidity.png
diff --git a/index.css b/index.css
@@ -0,0 +1,116 @@
+head {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica", sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  background: linear-gradient(135deg, grey, #5b54);
+}
+
+.header {
+  margin-top: 20px;
+  border-radius: 20px;
+  align-items: center;
+  background-color: white;
+  max-width: 200px;
+  text-align: center;
+  font-family: "Helvetica", sans-serif;
+  color: rgb(49, 46, 46);
+}
+
+.logo-icon {
+  max-width: 150px; /* Adjust the maximum width of your weather icon */
+  height: auto;
+  margin-right: 10px; /* Optional: Adjust the space between the icon and heading */
+}
+
+.card {
+  width: 90%;
+  max-width: 470px;
+  background: linear-gradient(135deg, powderblue, #5b54);
+  color: #fff;
+  margin: 0px auto 0;
+  border-radius: 20px;
+  padding: 40px 35px;
+  text-align: center;
+  padding-top: 10px;
+}
+
+.search {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.search input {
+  border: 0;
+  outline: 0;
+  background-color: #ebfffc;
+  color: white;
+  padding: 10px 25px;
+  height: 60px;
+  border-radius: 30px;
+  flex: 1;
+  margin-right: 16px;
+  font-size: 18px;
+}
+
+.search button {
+  border: 0;
+  outline: 0;
+  background: #ebfffc;
+  border-radius: 50%;
+  color: #555;
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+}
+
+.search button img {
+  width: 16px;
+}
+
+.weather-icon {
+  width: 170px;
+  margin-top: 30px;
+}
+
+.weather h1 {
+  font-size: 80px;
+  font-weight: 500;
+}
+
+.weather h2 {
+  font-size: 45px;
+  font-weight: 400px;
+  margin-top: -10px;
+}
+
+.details {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 50px;
+  margin-top: 50px;
+}
+
+.col {
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.col img {
+  width: 40px;
+  margin-right: 10px;
+}
+
+.humidity,
+.wind {
+  font-size: 28px;
+  margin-top: -6px;
+  font-family: "Helvetica;" sans-serif;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous">
+  </script>
+
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+  tailwind.config = {
+    corePlugins: {
+      preflight: false,
+    }
+  }
+</script>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="index.css">
+  <link rel="icon" href="cloud gif.gif" title="weather symbol">
+  <script src="/dist/index.js" type="module"></script>
+  <title>New Weather</title>
+</head>
+
+
+<body>
+  <div class="header">
+    <img src="cloud gif.gif" class="logo-icon" alt="rain" title="weather symbol">
+    <h1>New Weather</h1>
+  </div>
+  <div class="card">
+    <div class="search">
+      <input type="text" class="search-input" placeholder="Enter City Name" spellcheck="false">
+      <button class="search-button"><img src="search.png" alt="search" title="search"></button>
+    </div>
+    <div class="weather">
+      <img src="rain.png" class="weather-icon" alt="rain" title="weather symbol">
+      <h1 class="temp">_°C</h1>
+      <h2 class="city">_ _ _</h2>
+      <div class="details">
+        <div class="col">
+          <img src="humidity.png" alt="humidity" title="humidity">
+          <div>
+            <p class="humidity">50%</p>
+            <p>Humidity</p>
+          </div>
+        </div>
+        <div class="col">
+          <img src="wind.png" alt="wind" title="wind">
+          <div>
+            <p class="wind">15km/hr</p>
+            <p>Wind Speed</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <audio autoplay muted>
+        <source src="audio/new breakcore.wav">
+        This Browser does not support audio format
+      </audio>
+    </div>
+  </div>
+</body>
+<script>
+  console.log("HEY");
+  const apikey = "1e8233b8bada2fd778c41547c9ced977";
+  const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric";
+  const searchBox = $(".search-input");
+  const searchBtn = $(".search-button");
+  const weatherIcon = $(".weather-icon");
+
+  async function checkweather(city) {
+    const response = await fetch(`${apiUrl}&q=${city}&appid=${apikey}`);
+    var data = await response.json();
+
+    $(".city").text(data.name)
+    $(".temp").text(Math.round(data.main.temp) + "°C")
+    $(".humidity").text(data.main.humidity + "%")
+    $(".wind").text(data.wind.speed + "km/hr")
+
+    console.log(data);
+    if (data.weather[0].main == "Clouds") {
+      weatherIcon.attr("src", "clouds.png")
+    }
+    else if (data.weather[0].main == "Rain") {
+      weatherIcon.attr("src", "rain.png")
+    }
+    else if (data.weather[0].main == "Drizzle") {
+      weatherIcon.attr("src", "drizzle.png")
+    }
+    else if (data.weather[0].main == "Mist") {
+      weatherIcon.attr("src", "mist.png")
+    }
+    else if (data.weather[0].main == "Clear") {
+      weatherIcon.attr("src", "clear.png")
+    }
+  }
+
+  searchBtn.click(() => { checkweather(searchBox.val()) })
+  console.log("HEY");
+</script>
+
+</html>
diff --git a/index.ts b/index.ts
@@ -0,0 +1,53 @@
+import { v4 as uuidv4 } from "uuid";
+
+type Task = {
+  id: string;
+  title: string;
+  completed: boolean;
+  createdAt: Date;
+};
+
+const list = document.querySelector<HTMLUListElement>(
+  "#list"
+) as HTMLUListElement;
+const form = document.querySelector<HTMLFormElement>(
+  "#new-task-form"
+) as HTMLFormElement;
+const input = document.querySelector<HTMLInputElement>(
+  "#new-task-title"
+) as HTMLInputElement; // Corrected selector
+
+const tasks: Task[] = [];
+
+form?.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  if (input?.value == "" || input?.value == null) return;
+
+  const newTask: Task = {
+    id: uuidv4(),
+    title: input.value,
+    completed: false,
+    createdAt: new Date(),
+  };
+  tasks.push(newTask);
+  input.value = " ";
+
+  addListItem(newTask);
+  input.value = "";
+});
+
+function addListItem(task: Task) {
+  const item = document.createElement("li");
+  const label = document.createElement("label");
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.checked = task.completed;
+  checkbox.addEventListener("change", () => {
+    task.completed = checkbox.checked;
+    console.log(tasks);
+  });
+  label.append(checkbox, task.title);
+  item.append(label);
+  list?.append(item);
+}
diff --git a/logo.svg b/logo.svg
diff --git a/mist.png b/mist.png