🌤️ SkyPulse Weather

Icons via skillicons.dev · Typing line via readme-typing-svg

🔗 Open the live site (GitHub Pages)

👉 https://codetherapistpita-oss.github.io/wetherapp-frontend-/

Click the URL above to open SkyPulse Weather in your browser. Add your API key in weather-config.js for live weather data.

---

👀 Preview

Click a screenshot to open the live app.

Dashboard	Highlights & cards

---

📊 At a glance

pie title Code focus (approx.)
    "JavaScript" : 72
    "CSS" : 18
    "HTML" : 10

pie title App features (concept split)
    "Forecast views" : 35
    "Highlights cards" : 25
    "Search + list" : 22
    "Units + location" : 18

flowchart LR
  subgraph Browser
    A[index.html]
    B[style.css]
    C[script.js]
  end
  subgraph APIs
    D[Visual Crossing]
    E[Geo lookup]
  end
  A --> C
  B --> A
  C --> D
  C --> E

---

✨ Features (quick)

📱	Responsive sidebar + main panel
🔎	City search + bundled autocomplete list
⏰	Today (hourly) / Week toggle
🌡️	°C / °F switch
🧭	Wind direction (° + compass) — not fake “AQI”
🔑	API key in weather-config.js only (no keys in script.js)
⚠️	Banner if key missing or request fails

---

🛠️ Stack

Structure	Variables · flex · grid	fetch · DOM	Timeline weather

---

🚀 Setup

git clone https://github.com/codetherapistpita-oss/wetherapp-frontend-.git
cd wetherapp-frontend-

window.WEATHER_VC_KEY = "YOUR_KEY_HERE";

Free key: visualcrossing.com/weather-api

npx serve .

Settings → Pages → branch main / root → then open the Live demo badge at the top.

---

📁 Files

flowchart LR
  I[index.html] --> J[script.js]
  I --> S[style.css]
  J --> W[weather-config.js]
  R[readme-assets] --- I

---

🙏 Credits

SkyPulse	UI refresh, API safety, docs — Code Therapist
WeatherVista	Original app — wasimtikki120/WeatherVista… · MIT

---

👤 Code Therapist

In-app footer: name only · no links (fork-friendly).

---

🌐 Open live site · ⭐ Star the repo if this helped · PRs welcome · keep API keys out of git