Added Weather outfit finder

iamrahulmahato · Oct 25, 2024 · 413cfb6 · 413cfb6
1 parent 5628e84
commit 413cfb6
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 0 deletions.
diff --git a/index.html b/index.html
diff --git a/projects/weather outfit finder/index.html b/projects/weather outfit finder/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weather & Outfit Recommender</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Weather & Outfit Recommender</h1>
+    <div class="weather-selector">
+      <label for="weather">Choose the Weather:</label>
+      <div class="icons">
+        <button class="weather-option" onclick="getOutfit('sunny')" id="sunny">
+          <img src="https://img.icons8.com/color/48/000000/sun.png" alt="Sunny Icon">
+          <span>Sunny</span>
+        </button>
+        <button class="weather-option" onclick="getOutfit('rainy')" id="rainy">
+          <img src="https://img.icons8.com/color/48/000000/rain.png" alt="Rainy Icon">
+          <span>Rainy</span>
+        </button>
+        <button class="weather-option" onclick="getOutfit('cold')" id="cold">
+          <img src="https://img.icons8.com/color/48/000000/snow.png" alt="Cold Icon">
+          <span>Cold</span>
+        </button>
+        <button class="weather-option" onclick="getOutfit('snowy')" id="snowy">
+          <img src="https://img.icons8.com/color/48/000000/snowflake.png" alt="Snowy Icon">
+          <span>Snowy</span>
+        </button>
+      </div>
+    </div>
+    <div class="result" id="result">Select a weather option above to get started.</div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/weather outfit finder/script.js b/projects/weather outfit finder/script.js
@@ -0,0 +1,23 @@
+function getOutfit(weather) {
+    let outfitRecommendation;
+
+    switch (weather) {
+      case "sunny":
+        outfitRecommendation = "Wear a light t-shirt, shorts, and sunglasses. 🌞";
+        break;
+      case "rainy":
+        outfitRecommendation = "Wear a waterproof jacket, boots, and carry an umbrella. 🌧️";
+        break;
+      case "cold":
+        outfitRecommendation = "Wear a warm coat, scarf, and gloves. 🧣";
+        break;
+      case "snowy":
+        outfitRecommendation = "Wear a heavy jacket, snow boots, and a beanie. ❄️";
+        break;
+      default:
+        outfitRecommendation = "Select a weather condition.";
+    }
+
+    document.getElementById("result").innerText = outfitRecommendation;
+  }
+
diff --git a/projects/weather outfit finder/styles.css b/projects/weather outfit finder/styles.css
@@ -0,0 +1,86 @@
+/* Reset and Basic Styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #4facfe, #00f2fe);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #333;
+  }
+
+  .container {
+    background: #fff;
+    width: 350px;
+    text-align: center;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease;
+  }
+
+  .container:hover {
+    transform: translateY(-5px);
+  }
+
+  h1 {
+    color: #333;
+    font-size: 1.8em;
+    margin-bottom: 20px;
+  }
+
+  /* Weather Selector Section */
+  .weather-selector {
+    margin-bottom: 20px;
+  }
+
+  label {
+    font-size: 1.1em;
+    color: #555;
+    margin-bottom: 10px;
+    display: block;
+  }
+
+  .icons {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .weather-option {
+    background-color: #f0f8ff;
+    border: none;
+    border-radius: 10px;
+    padding: 10px;
+    width: 80px;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+
+  .weather-option img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .weather-option span {
+    display: block;
+    margin-top: 5px;
+    font-size: 0.9em;
+    color: #333;
+  }
+
+  .weather-option:hover {
+    background-color: #d1ecf1;
+  }
+
+  .result {
+    margin-top: 20px;
+    font-size: 1.2
+  }