https://github.com/devradheee/mood-journal-with-weather-integration
Interactive Mood Journal with Weather Integration
https://github.com/devradheee/mood-journal-with-weather-integration
api css html javascript
Last synced: 4 months ago
JSON representation
Interactive Mood Journal with Weather Integration
- Host: GitHub
- URL: https://github.com/devradheee/mood-journal-with-weather-integration
- Owner: devradheee
- Created: 2025-04-22T15:14:48.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-22T15:23:19.000Z (about 1 year ago)
- Last Synced: 2025-06-03T19:55:53.259Z (about 1 year ago)
- Topics: api, css, html, javascript
- Language: JavaScript
- Homepage: https://mood-journal-with-weather-integration.vercel.app/
- Size: 6.84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Moodify - Interactive Mood Journal with Weather Integration
## Overview
Moodify is a web application that allows users to log their daily mood and view it alongside real-time weather data. This project was developed as part of a Frontend Intern/Fresher role assignment to demonstrate skills in building responsive user interfaces, utilizing public APIs, and working with geolocation.
## Features
* **Daily Mood Logging:** Users can select their mood from a range of 5+ options (emojis). [cite: 4]
* **Note Taking:** A text field is available for users to add daily notes. [cite: 4]
* **Real-time Weather:** The app fetches and displays the current weather for the user's location using the OpenWeatherMap API. [cite: 4]
* **Geolocation:** The browser's Geolocation API is used to retrieve the user's location. [cite: 4]
* **Calendar View:** A calendar view allows users to navigate and view past mood entries. [cite: 4]
* **Past Entries:** Mood entries are stored and displayed, allowing users to track their mood history. [cite: 4]
* **Responsive Design:** The application is designed to be responsive and work across various screen sizes (desktop and mobile). [cite: 4]
## Technologies Used
* HTML
* CSS
* JavaScript
* OpenWeatherMap API
## Setup
1. Clone the repository.
2. Open `index.html` in your browser.
3. Ensure you have an API key from OpenWeatherMap and add it to the `script.js` file.
## Important Notes
* This project uses the OpenWeatherMap API to fetch weather data. You will need to obtain your own API key from OpenWeatherMap to use this feature.
* The UI design is inspired by the provided reference, but improvements and creative interpretations were encouraged.
## Author
\[RADHESHYAM KUMAR ]