WasteWise

In this commit, I integrated the tally form. With the form, I wanted three things:

1. Unlimited responses - I didn’t want the website to just randomly close and the quiz to not work just because the max submissions was reached
2. Nice UI/UX - I don’t want it to look like a basic google forms since that is honestly quite boring nobody likes that
3. No big logo banner - I don’t want the jotform thing where there is this big banner on the bottom
4. Backend - I don’t want to be like formsubmit.io where it just sends an email - I want it to actually show a table of responses
5. Answers - I want the users to see the answers after finished.

At first there was literally no good options and I was literally thinking selfhosting this - but there is not much point. So, at the end, I found a workaround with Tally where it can send the answers in the query parameters to the answers page (yes it is a real workaround but the users don’t notice anything)

I wrote 2 JS files during this 1 1/2 hours.

1. I wrote the photon-autocomplete.js where it will automatically find relevant places as you search, e.g. in Google Maps when you type ‘Hack Cl’, it suggests ‘Hack Club Falls Road, Shelburne, VT, USA’ as the result. This is free using photon.komoot.io, so that I don’t have to get a Google API key.
2. I also added the javascript for the map to actually work and show the location - well, I didn’t change anything, I just copypasted it into a separate JS file so there’s probably a lot of copypaste in hackatime (pls dont ban me im refactoring)
   I also make few misc changes
   idk how much to write

I worked on the basic app in Astro and the CSS (this took so long honestly) and now i have a liquid galss style app which looks nice and good, The header is pill shaped and inspired by craft.do’s landing page with the big image in the center and the liquid glass topbar. I liked to small it compact rather than the full width of my screen, so that even if I forget to put padding on headings you could still see them, and also it just looks better in my opinion.

For privacy reasons I am using Fontsource, OpenStreetMap Nomatim and Photon(coming soon) for maps instead of Google Maps and Fonts

I was also going to write the photon autocomplete js but then remembered that maybe I should devlog before doing that. honestly i am really fatigued by the css but i rlly want to finish the photon autocomplete since photon.komoot.io seems like a really nice free tool to use for maps instead of Google Maps which is less private and also paid. like… do i really want to pay for a google maps api key when there is a free private faster (since its not loading trackers) and subjectively better version…?

i hope this is enough detail to justify the 3h+ of work that I did (sorry flavortown review if it isnt pls js tell me and i can write more idk this is my first project)