Ever since the weekend in NYC where schools were closed and I started a successful petition to establish particular food, shelter, and healthcare support systems for schoolkids in need, I wanted to develop a useful website full of resources to assist those affected by COVID-19.
Everyone has also been quarantined and under stay-at-home orders, an action that has taken all of us out of our comfort zone and changed our lives drastically. From social to economic issues, there needs to be support on all fronts.
Thus, I created the foundations of my dream website, inspired by the LinkTrees I've been seeing on the Instagram bio from all the time I've been spending on social media due to being at home 24/7. This is my first hackathon, and my knowledge of HTML, CSS, and JS has come from just a couple of workshops 3 months ago. Actually, I really just learned javascript over this weekend because previously, all I knew were if statements.
From my barebones knowledge of setting up a html document in Glitch (my code editor of choice), creating paragraphs, and styling colors in CSS, I expanded my knowledge and learned how to incorporate multiple languages using a script source, organize and create multiple files to separate languages, create interactive tabs and ordered/unordered lists (even centering and bolding text), and change background colors. I also incorporated the p5.js language to create the “Create-a-Card” feature where a user can draw on a canvas.
It wasn’t easy at first as I had various initial ideas that were scrapped. My last coding venture involved Python and I wanted to create an interactive quiz that gave suggestions on which tab to go to on the website based on what type of resource they needed most. I couldn’t figure out how to incorporate Python into Glitch. The example I found incorporated an unsupported Python 2.7 so I scrapped this initial idea. Instead, I built the “Resources Site” and added on, going on the building model of “simple first, complex later.” This resulted in five different tabs with an introductory “About” tab and four categories to assist in job search, health information, activities to kill boredom, and support for nonprofits tackling COVID-19.
I still tried to incorporate a question feature in the form of a javascript form, but I couldn’t figure out how to provide a conditional suggestion after submitting the form. The code is still in my project, where if the user input any number greater than or equal to 5, they would receive the suggestion to check out the “Health Information” tab and otherwise be directed to the "Activities" tab. This question was mainly just a way to find out if a user needed health-related help.
My p5.js code also has an issue, where the draw feature is not sticking to the canvas. However, I learned how to center the canvas and create a color picker, so I will certainly work to improve this (+ figure out the form & python quiz features) on my own time because I do want to further develop this website. I want to include more links to make the first page look more like a Linktree and also make everything more visually appealing with images and scroll features, as I focused more on the technical components of this project this weekend.
Log in or sign up for Devpost to join the conversation.