From 413cfb615c9984f968be4c05cff7a45230830a9f Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 25 Oct 2024 18:45:41 +0530 Subject: [PATCH] Added Weather outfit finder --- index.html | 12 ++++ projects/weather outfit finder/index.html | 37 ++++++++++ projects/weather outfit finder/script.js | 23 ++++++ projects/weather outfit finder/styles.css | 86 +++++++++++++++++++++++ 4 files changed, 158 insertions(+) create mode 100644 projects/weather outfit finder/index.html create mode 100644 projects/weather outfit finder/script.js create mode 100644 projects/weather outfit finder/styles.css diff --git a/index.html b/index.html index 3026984c..cdc1ec3f 100644 --- a/index.html +++ b/index.html @@ -980,6 +980,18 @@

Image Generator

+ +
+ Weather outfit +
+
+

Weather outfit finder

+

+ finds the outfit that suits for the weather +

+
+ +
Storybook diff --git a/projects/weather outfit finder/index.html b/projects/weather outfit finder/index.html new file mode 100644 index 00000000..d216a4ab --- /dev/null +++ b/projects/weather outfit finder/index.html @@ -0,0 +1,37 @@ + + + + + + Weather & Outfit Recommender + + + +
+

Weather & Outfit Recommender

+
+ +
+ + + + +
+
+
Select a weather option above to get started.
+
+ + + diff --git a/projects/weather outfit finder/script.js b/projects/weather outfit finder/script.js new file mode 100644 index 00000000..b89230e4 --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/projects/weather outfit finder/styles.css b/projects/weather outfit finder/styles.css new file mode 100644 index 00000000..98ad8074 --- /dev/null +++ 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 + } \ No newline at end of file