<center>![image.png](https://ipfs.busy.org/ipfs/QmXKoZ5sFW11TY2YDNhMPqs4qftomdTrmqnLCWVx5G2eqf)
https://www.conor.icu/meteor-hack
</center>

 

## Meteor App

### Concept
The theme of this hackathon was space. This leads us to many websites, including the NASA data website. Here, we found many different data sources. After a good half hour or so of brainstorming and data gathering, going through many ideas such as:

- SpaceBook *Become a planet* - Too Unoriginal
- 3D Modelling / VR Space etc. - Too Time-Consuming


Then it hit us (not a meteor xD). One of the people in my group has worked with *Leaflet*, a 2D Map, which allows adding various sized points to a map. We decided to map meteors close to your location (because we thought it'd be too heavy to load all the meteors at once).

### Software
We used the following libraries:

###### Mapping:
- [Leaflet](https://leafletjs.com/) <strike>Google Maps</strike>
- [CartoDB BaseMaps](https://github.com/cartodb/cartodb-basemaps)

###### Locations:
- [Open Notify ISS](http://open-notify.org/Open-Notify-API/ISS-Location-Now/)
- [Earthquakes](https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson)
- [Meteor Landings](https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh)

###### AJAX & JS:
- [jQuery](https://jquery.com/)

###### Styling:
- [W3 CSS](https://www.w3schools.com/w3css/)

###### IDEs (Development Environments):
- PHPStorm
- Atom
- Good Ol' Notepad (For code re-shuffling)

### Languages:
- HTML
- CSS
- JavaScript

### The Process:

All good projects start with a Version Control System, in this case, Git via Github Private. The first step was to lay out the initial project files, a homepage, `index.html`, a base CSS sheet `meteor.css`. This moved to `styles/meteor.css` for neatness. We used a JavaScript file to load the maps page through AJAX. This failed as it didn't even like COMPLETELY VALID HTML!
In the end, this AJAX functionality was so bad we decided to scrap it and be like anyone else and use a hyperlink!

Our code management got messy as we were all using different editors. Some of them rather incapable of using GIT. This lead to creating two more branches then me sitting there and working out what the hell I was to merge.

In the last 20 Minutes, GIT decided that no more commits were going into master. which lead to another branch, which I rushed to push into the master branch so that it would show up on our site.

In the end, we ended up creating 2 Javascript folders, `/scripts/` and `/js/`. Midway through the file changed names, adding an accidental capital in one of our files. This broke the site at one point, it was looking for `/js/map.js` but the file was `/js/map.Js`. It took us quite a while to spot this problem. We used many libraries to make this possible and a big thanks to my team for being awesome (and the event hosts). My team were all from the host university, but I was from a nearby College. They made me feel welcome and I did my part!

They also got a sponsor and gave us all lunch (sandwiches .etc.) and dinner (Takeaway Pizza) so food was good.

At one point I tried one of their challenges, called !Light (NoLight). In this we had 10 Minutes to recreate the google homepage, WITHOUT being able to test our code. I tied winning with someone else! My Google page had a good header and footer, but the google text was down the side of the page as I used block elements. That was unfortunate, I also didn't manage to put in the search bar or buttons, but it was still good. One entry said `I don't know` and one said `Sorry Google I Tried`. 

All in all, it was a good laugh!

### Check it out
https://www.conor.icu/meteor-hack


*PSST... YOU! Yeah, YOU! Did you know that you can upvote me by hitting that upvote button below? Upvoting posts makes you happier and boosts your IQ* *
<br/>
<br/>
*Jokes, but you could still upvote me :)