Skip to content

Rod-Freedom/C6-Eye_in_the_Sky

Repository files navigation

Eye in the Sky

Keep an eye on the skies as if you were the god of meteorology.

License



ABOUT THE PROJECT

Overview

Observe the skies and keep the weather in check.

Eye in the Sky is an intuitive weather app that allows you to plan your day and trips. You'll love the city autocomplete feature, which will allow you to find any city in the world. The design will give you a feeling of peace while you check all the info about the weather.

Find the repo here.
Watch our tutorial here!
Go to the site here!



Table of Contents


(Back to the Top)

Resources

  • For the HTML:
    • Added Tailwind framework.
    • Favicon.
    • Forced dark mode.
    • Google fonts.
    • Meta description.
    • defer attribute.
    • type="module" scripts.
  • For the CSS:
    • Tailwind.
    • Tailwindcss @apply.
    • Intuitive classes.
    • ::after and ::before art.
    • Calc() sizes for responsiveness.
    • Transitions.
    • aspect-ratio media queries.
    • max-width media queries.
  • For JavaScript
    • ES6 modules.
    • Promises.
    • Extensive object and array destructuring.
    • Polymorphism for methods.
    • Classes and constructors.
    • Extended classes.
    • static methods.
    • AbortSignal.abort() to remove event listeners.
    • Event listeners.
    • Day() object.
    • Day() object methods.
    • Extensive UNIX manipulation with timezone adaptations.
    • throw new Error to stop faulty executions.
    • setTimeout executions for UX and UI features.
    • async and await executions.

(Back to the Top)

Get Started

Watch our tutorial here!

No installation is required, just go to the site here and explore Eye in the Sky!


(Back to the Top)

Usage

Watch our tutorial here!

Eye in the Sky is easy and intuitive to use. You can search any location; a pretty sweet autocomplete feature will help you find any city worldwide!

Search for cities


You may also use your location to get the weather and a 24-hour forecast from your area!

Select curren location


Depending on your connection, the weather loading could take a few seconds.

Loading


Once loaded, your location will show a green light indicating it's your live location.

Live location


You can scroll to explore the 24-hour forecast.

24-hour forecast


You'll also find other data, such as the pressure, wind speed and direction, and the minimum and maximum temperatures expected for that day.

Weather specs


Your recent searches will appear to the left of the screen. You can always go back to your current location.

Recents


Finally, don't forget to play with the Eye in the Sky! It will follow your mouse movement at all times!

Recents


(Back to the Top)

License

GitHub
See the license for more details.


(Back to the Top)

Contribute

If you have suggestions or want to help with some improvements, you can write me by email.


(Back to the Top)

Credits

All the code was created from scratch by Rod's Freedom.


(Back to the Top)

Releases

No releases published

Packages

No packages published