Git Product home page Git Product logo

wattos-fans-front-end-project's Introduction

Clear Dark Sky

Description

The user can see whether or not they will have good stargazing viewing conditions based on their location, weather, and the state of the moon.

This project was completed by an entirely remote team due to the COVID-19 situation. Team members met virtually using Zoom Meetings to discuss the project and work on code together.

Goal

Using the following APIs:

Name of API Data From API:
IPGeolocation User's Location by Latitude and Longitude
WorldWeatherOnline Moon Data and Weather

We will cross-reference the user's location with the state of the moon and cloud coverage for the user's location and determine whether or not the conditions are right for stargazing.

How it Works

In order to determine viewing conditions, we needed to decide on what factors we would take into account. To keep things simple, we determined the following two factors should be considered:

  • Moon Illumination - needed because light reflecting off the moon will drown out stars
  • Cloud cover - needed to determine how much of the night sky was visible

Using if/else statements, we determine if the current moon illumination and cloud coverage fall into either "excellent", "good", or "bad" viewing conditions. This result is returned to the user on the website along with an image of the sky that matches their result.

Design Elements

Clear Dark Sky uses primarily Bootstrap and Flexbox styling. The landing page consists of a "jumbotron", a navigation bar, and a main div that holds the results containers. The jumbotron randomly generates one of five space images for the background.

The background of the main div is initially an image of the earth. Once the user generates their stargazing forecast, the background will change to match their result: a clear night sky (excellent), a partly cloudy night sky (good), or a cloudy sky with a full moon (bad).

There is an About Us page that explains and links to the APIs used. The user can also access the Team page to learn a little more about the team that built the site. The Team page uses Bootstrap elements to display each team member in a card with their name and what type of work they performed on the project.

Problems

Getting Appropriate Moon Data:

  • We realized the IPGeolocation API did not give us enough info to easily determine the moon's state/phase. We need this info in order to determine if the moon is too bright for good stargazing conditions.

Solution:

  • We found a new API (WorldWeatherOnline) that gives us both weather and moon data, including the current moon phase and moon illumination percent. We had previously been using Weatherbit.io's API to provide our weather data.

Forecasting Weather :

  • We realized by pulling current weather, it may not be an accurate representation if the user is checking during the day and the weather is different at night.

Solution:

  • The weather API returns forecasted data as well. Initially, we were pulling the data under "current weather." We changed our variables to pull the data from the hourly forecast instead for 9:00 PM to provide a more accurate representation of tonight's weather.

wattos-fans-front-end-project's People

Contributors

c-champagne avatar turnermillsaps avatar stall84 avatar seidoo avatar cryslebron avatar seidoo99 avatar

Stargazers

 avatar Ron D Cagle avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

seidoo99

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.