The homepage before adding your birthday
The page after adding your birthday
Use NASA API to get mars rover pictures
The planets are buttons!
When the planets are clicked, a popup will appear and show you information about the horoscope sign that relates to that planet

Solar Sign

Hello there. We are Ramneet Brar, Mahek Khan, Danielle Nix, and Alex Hoang. Welcome to our Hackamdemia project. Our website will take your birthday to show you what your horoscope is as well as some other fun features.

Wireframe:

https://drive.google.com/file/d/1qEnfIEf_yAH1OLN6PaY4CgS3yOMBWJj2/view?usp=sharing

Features

Calculate your horoscope and show your horoscope information
Show you two mars rover pictures side-by-side: one was taken on your birthday last year, the other is taken today (or latest) using a NASA public API
Show information of other horoscopes when you click on their corresponding planet buttons

Technical features that we learned / executed

Make a fullscreen popup to show information (for planet buttons)
Make animation (for the button glow)
Fetch things from an API endpoint
Make a scrollup button to immediately go to the top of the page
Make use of flex display to make responsive content (for the mars photos)

Built With

Submitted to

Hackademia: Web Dev

Created by

I did most of the CSS/layout work as well as the birthday inputs and horoscope calculation

Alex Hoang
I worked on the image mapping of the solar system to make it a clickable image so that the popup will appear.

Mahek Khan
I worked on the content for each sign, as well as the Mars photos comparing the image taken by the rover on your birthday last year with this year.

Ramneet Brar
I worked on displaying the information for each sign and using the NASA API to display photos of mars.

Danielle Nix

Updates

Alex Hoang started this project — Jul 13, 2020 06:54 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.