BlueSky is a weather website built with HTML, Tailwind CSS, JavaScript, and Sass. It provides real-time weather updates for any location, utilizing an API to fetch weather data and display it in an intuitive and user-friendly interface.
You can check out the live version of the website here.
- Real-time weather updates for any location.
- Weather details including temperature, humidity, wind speed, and weather description.
- User-friendly interface built using modern web technologies.
- Responsive design, optimized for both desktop and mobile devices.
- HTML for the basic structure of the webpage.
- Tailwind CSS for utility-first CSS, making styling quick and efficient.
- Sass for more flexible and organized CSS with features like variables, nesting, and mixins.
- JavaScript for fetching and displaying weather data dynamically.
The following colors were used throughout the website:
- Primary Color:
#1E3A8A(Dark Blue) — Used for the header and main buttons. - Secondary Color:
#3B82F6(Sky Blue) — Used for highlights and active elements. - Background Color:
#F0F4FF(Light Blue) — Used as the background color to give a clean and fresh look. - Text Color:
#111827(Dark Gray) — Used for text to ensure readability on the light background. - Accent Color:
#10B981(Green) — Used for indicating positive weather conditions or actions like buttons.
To get started with BlueSky on your local machine, follow these steps:
-
Clone the repository:
git clone https://github.com/aliyara290/BlueSky.git
-
Navigate to the project directory:
cd BlueSky -
Open the
index.htmlfile in your browser to view the website.
Simply input any city name in the search bar, and the website will display the current weather conditions, including temperature, humidity, wind speed, and weather description.
This project is licensed under the MIT License - see the LICENSE file for details.
Feel free to modify or extend the project to suit your needs. Happy coding!