Inspiration

Our inspiration for this project was from the sample ideas, especially the idea where a virtual robot could be created to keep self-quarantine-rs company. We wanted to modify it so people used their their time to entertain themselves, while doing something relevant to the pandemic. We also remembered that during the quarantine, Instagram and TikTok challenges became super popular, so we wanted to create a challenge where it helps the person who's doing it, their community, and positively influences others, as opposed to just tagging others or circulating a hashtag. That's where 14 Day Quarantine was born!

What it does

14 Day Quarantine is a website which has a challenge for each day of your self-quarantine. By clicking on the day of your quarantine, you get a challenge. Each challenge has a link for you to read and complete! Some challenges involve learning more about COVID-19 from the official CDC website and taking a quiz to test your knowledge, while other challenges are more fun and involve putting together care packages or making cards to send to COVID patients! Creating your own mask and supporting local businesses are also part of the challenges :) We didn't create an Instagram page or any social media for the challenge, but the challenge is designed to be very social -- virtually. You can share your progress as you complete the challenge using hashtags, and the 14 Day Quarantine social media is supposed to share participants' photos on their account and help promote social distancing and wearing masks!

How we built it

Originally, we created a prototype on Figma, so that we knew how exactly we wanted our website to be like. We coded it through HTML/CSS, and Visual Studio Code as our text editor. 1) We created modals, so that the challenges would pop up, however we didn't know how to combine the modals into the code. 2) Another challenge that we ran into while making the challenges (get the joke?) was collaborating together on the website. Our internet kept going out, so we had to switch to local, and therefore could not do things on the same files. This created complications later, as we were unable to merge all the files together since the CSS that was used by my brother's files were interfering with the CSS used by my files, and creating a mess. 3) The third and final problem we ran into was in our animations. We originally wanted to make animations, except we had no experience with Javascript, and we had no time to learn either. We experimented for a bit, but then we decided that after the hackathon, we'd learn in ease.

Accomplishments that we're proud of

Some accomplishments that we're proud of include: 1) Our graphics. We think that our website looks really aesthetically pleasing to the eye, which is really good for challenges. When the word challenge comes to mind, some people already start groaning! With a good looking website, sometimes your motivation goes up, which is the case for me :) Good aesthetics definitely improve the interest factor for many people! The sliding little viruses are also super cute! 2) Our content. We're proud of the challenges we were able to create, and how official they look. We're proud of the quizzes we have created, and how our website turned out overall! 4) Our fake Instagram page. I photoshopped it all :)

What we learned

We learned so much from the hackathon! 1) This was our second hackathon! This was our first time coding anything, and we learnt a lot throughout the way! 2) We learned a lot more on how to use HTML/CSS, and how to make function and responsive websites!

What's next for 14 Day Quarantine

Some additional features we wanted to implement were: 1) A user login that keeps track of your progress, and gives you badges, etc. to keep you motivated! 2) A challenge count which keeps track of how many people have challenged themselves to date 3) A certificate to be given out after completing the challenge 4)Additional links for people who wanted to do/know more Once we are satisfied with the end result, we might release it to the public via social media so that people can actually take part in the challenge! Our user base is designed to be broad and applicable to everyone, so anyone can take part!!

Built With

Share this project:

Updates