I go to @namecheap to DNS and add my server's IP as an A/AA record. It was a URL redirect before to the Google spreadsheet, that ends now.
Now I have to wait for an hour for the name servers to update. Meanwhile I've added some styling to the buttons, and made them toggle-able with jQuery.
I'll go over all the filter buttons to find which one are pressed and then do a call to the server to filter airlines!
^ the color of the button I picked from the ✈️ airplane emoji on MacOS. Emojis are a nice way to find colors ^_^
I did some more <style>'ing so now it looks like this. I centered the page by adding a <div class="container"> which wraps around all the elements. It's set to max-width:1000px; and centered with margin:0 auto;
Now for some logic. I want the filters to actually do something. So I define each filter inside the button with 3 data tags:
data-key data-operator data-value
For ex. safe airline should be
"safety_score" greater-than 3
(where 3 is out of 5)
Here's the JS code for it. It collects each filter's data attributes key, operator and value. Puts them in a data array. This array we will then AJAX to the server where PHP receives it, filters, and sends back the airlines.
Yay! It works. JS collects the filters successfully, sends them as AJAX to server and PHP reads the filters accurately.
Meanwhile the DNS has propagated. So now we can get a @letsencrypt https SSL certificate. I use an app called CERTBOT for it. If you type CERTBOT CERTONLY it lets you authorize a server. I had to kill my NGINX server for it (I know I'm noob) when doing it for a 30 secs. But works
On the server, I edit /etc/nginx/sites/airlinelist.co, which is my virtual host config file for NGINX. It lets the server know I want to have a website with http://airlinelist.co and the server should respond with files from /srv/http/airlinelist.co like index.php!
It's not opening here yet BUT it is on the server. So it can show up any time now. DNS can takes hours, sometimes days to update on all people's providers.
While we're waiting for that, I've made the filters work. Every click is an AJAX request with the active filters (see tweets above), and the PHP sends the airlines as <tr><td></td></tr> table rows back! JS then puts that in the <table><tbody>. Very simple.
Okay it seems to be working for some people: try it 👉
This took 6 hours from start to here! Now I'm gonna take a bit of a break and see if I can come up with more stuff. I'd like to: - make the table less ugly - add some kind of sexy header - add favicon - add social media cards
But yay at least we're live!
Can't say I really like this, but it's a start
I made it better! <div class="container"></div> has a white bg now which covers the sky background
Bit stuck now, so I moved the filters to the left. I don't really know how to improve this now, so I'll switch to working on the Flight Search part of Airline List. I want to let people search flights and rate each flight based on my airline data!
Added colors for the scores!
Now for a favicon, I took the plane departing from @Emojipedia and saved it as logo.png, and added it as an icon meta tag
OK so I thought the colors above sucked a bit, so I took the ones from the Google sheet color scale and starting to look better...
There are multiple ways to embed @levelsio's unrolled
1. Direct link
2. Use iframe
Sharing is caring 😍
Like this thread of @levelsio?
it with your friends & followers.
Love Thread Readers? Upgrade to premium to unlock all features
A whole new way to explore your interests. Convert your Thread to PDF,
save and print. Subscribe to interesting authors and be notified when new unroll is
available. Auto publish your threads on Medium and WordPress websites.