{"id":19390916,"url":"https://github.com/aminebajjidev/weatherbird--app","last_synced_at":"2026-04-12T18:57:12.991Z","repository":{"id":251997599,"uuid":"808125607","full_name":"AminebajjiDEV/WeatherBird--APP","owner":"AminebajjiDEV","description":"Weather web-app using openweathermap API with express, axios, and nodejs","archived":false,"fork":false,"pushed_at":"2024-12-06T18:07:43.000Z","size":27302,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-07T09:46:25.190Z","etag":null,"topics":["api","axios","expessjs","javascript","learning-by-doing","nodejs","openweathermap-api"],"latest_commit_sha":null,"homepage":"https://weatherbird.onrender.com/","language":"EJS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AminebajjiDEV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-30T12:40:25.000Z","updated_at":"2024-12-06T18:07:41.000Z","dependencies_parsed_at":"2024-08-07T03:10:51.799Z","dependency_job_id":"c2c789ef-d353-4872-8dd1-2e7c54d6e2bd","html_url":"https://github.com/AminebajjiDEV/WeatherBird--APP","commit_stats":null,"previous_names":["aminebajjidev/weatherbird--app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AminebajjiDEV%2FWeatherBird--APP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AminebajjiDEV%2FWeatherBird--APP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AminebajjiDEV%2FWeatherBird--APP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AminebajjiDEV%2FWeatherBird--APP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AminebajjiDEV","download_url":"https://codeload.github.com/AminebajjiDEV/WeatherBird--APP/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240557487,"owners_count":19820359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","axios","expessjs","javascript","learning-by-doing","nodejs","openweathermap-api"],"created_at":"2024-11-10T10:23:58.172Z","updated_at":"2025-11-03T14:05:14.023Z","avatar_url":"https://github.com/AminebajjiDEV.png","language":"EJS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WeatherBird Forecast Application\n\nThis capstone project for my web development bootcamp involves building a website using the Express/Node.js platform and the Axios HTTP client. The website integrates a chosen public API from the Public API Lists, allowing interaction with the API to retrieve data and present it in a user-friendly manner.\n\n### The app is Hosted Live for free on Render.com Please note that the app can be slow due to me using the free plan on Render.com!\n\n## Objectives\n    - Develop an understanding of how to integrate public APIs into web projects.    \n    - Gain practical experience using Express/Node.js for server-side programming.    \n    - Enhance understanding of client-server communication using Axios.\n    - Demonstrate the ability to manipulate, present, and work with data retrieved from APIs.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API Endpoints](#api-endpoints)\n- [Technologies Used](#technologies-used)\n- [Scripts](#scripts)\n- [License](#license)\n\n## Features\n\n- Fetch current weather data, hourly forecast, and daily forecast from OpenWeather API.\n- Display weather information with dynamic icons.\n- Live clock display on the homepage.\n- Personalized greeting message based on the time of day.\n\n## Installation\n\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/AminebajjiDEV/WeatherBird--APP.git\n   cd weatherbird-APP \n   \n2. Install the dependencies:\n   ```sh\n   npm install\n\n3. Create a .env file in the root directory and add your OpenWeather API key: (This step is crucial as i didn't upload my personal key)\n   ```sh\n    API_KEY=your_api_key_here\n\n## Usage\n   #### Start the Server\n    npm start \n    or\n    nodemon index.js (if you have nodemon installed)\n    Open your browser and navigate to http://localhost:3000.\n\n## Screenshots\n- Home page (With results)\n  \n![App Screenshot](https://github.com/AminebajjiDEV/WeatherBird--APP/blob/main/public/images/Screenshot%202024-08-06%20at%2022-00-11%20WeatherBird.png)\n\n- Home page (Before Results)\n\n![App Screenshot](https://github.com/AminebajjiDEV/WeatherBird--APP/blob/main/public/images/Screenshot%202024-08-07%20at%2000-09-37%20WeatherBird.png)   \n\n- Home page (If there is an Error)\n  \n![App Screenshot](https://github.com/AminebajjiDEV/WeatherBird--APP/blob/main/public/images/Screenshot%202024-08-07%20at%2000-00-42%20WeatherBird.png)\n\n- Mobile Responsiveness\n  \n ![App Screenshot](https://github.com/AminebajjiDEV/WeatherBird--APP/blob/main/public/images/Screenshot%202024-08-06%20at%2022-02-21%20WeatherBird.png) \n\n### Check the images forlder for more pictures!\n\n\n## API Endpoints\n\n    POST /search: Fetch weather data for a specific location using the city name.\n\n## Technologies Used\n\n- Backend: Node.js, Express\n- HTTP Client: Axios\n- Templating: EJS\n- Frontend: HTML, CSS, JavaScript\n\n## Scripts\n\n1.Greeting Message:\n\nA JavaScript script that displays a greeting message based on the current time.\n```\njavascript\n\nconst greetingContainer = document.querySelector(\".greet\"); // to target the div directly\n\nconst timeNow = new Date().getHours();\nconsole.log(timeNow) // for debugging\n\nconst greeting = \ntimeNow \u003e= 5 \u0026\u0026 timeNow \u003c 12 \n? \"Good Morning\"\n: timeNow \u003e= 12 \u0026\u0026 timeNow \u003c 18\n? \"Good Afternoon\"\n: \"Good Evening\"\nconsole.log(greeting); // for debugging\n\ngreetingContainer.innerHTML = `\u003ch1\u003e${greeting}\u003c/h1\u003e`  // to display the greeting message in the DOM\n```\n\n2.Live Clock:\n\nA JavaScript script that displays a live clock on the webpage.\n```\njavascript\n\n const timeElement = document.querySelector(\".clock_time\");\n    const dateElement = document.querySelector(\".clock_date\");    \n    /** \n    * @param {Date} date\n    */\n    function formatTime(date) {\n        const hours12 = date.getHours() % 12 || 12;\n        const minutes = date.getMinutes();\n        const isAm = date.getHours() \u003c 12;\n        return `${hours12.toString().padStart(2, \"0\")}:${minutes.toString().padStart(2, \"0\")} ${isAm ? \"AM\" : \"PM\"}`;\n    }\n    function formatDate(date) {\n        const MONTHS = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n        return `${date.getDate()} ${MONTHS[date.getMonth()]}, ${date.getFullYear()}`;\n    }\n    setInterval(() =\u003e { // to update time using an intervale \n        const now = new Date();\n        timeElement.textContent = formatTime(now);\n        dateElement.textContent = formatDate(now);\n    }, 200);\n\n\n    setInterval();\n```\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n   \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminebajjidev%2Fweatherbird--app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faminebajjidev%2Fweatherbird--app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminebajjidev%2Fweatherbird--app/lists"}