Mislead Your Disease

Meet the Team

Alan is a beginner from California and a first-time hacker. Lydia is a beginner from New York and a first-time hacker. Teresa is a relatively new coder from Ontario and a second-time hacker.

Inspiration

Given the comedic nature of our team members, we decided to collaborate to make a simple website with the goal of making users laugh. Also, we thought it was important to highlight how easy it is for people to spread fake news online. Therefore, this site is supposed to be a satire and a message to people to NOT TRUST EVERYTHING YOU READ ONLINE! We also wanted us to stretch ourselves as much as possible while not being overambitious by biting off more than we could chew. We were also inspired by Vercel's HTML workshop!!

What it does

The website has 3 pages: Welcome, Symptoms checklist, and Results. The Welcome page welcomes users and prompts them to enter the Symptoms checklist page where they can check which "symptoms" they have. Most of these elements are humorous and hopefully the user will get a kick out of reading through them. After the user clicks the button at the bottom of the page, they will be taken to the Results page where a random generator spits out their diagnosis, along with a picture and a short description. NONE of these "diseases" are real—they're not meant to be taken seriously!

How we built it

We used codesandbox.io to create HTML, CSS and JavaScript files. To edit the photographs, we used Ripoff Adobe PhotoShop (PhotoPea) . We tried to utilize as many tools as we could to showcase all our skills, and most of us had to learn these coding languages along the way. The photographs were taken from Neel Redkar, and he consented to their use.

Challenges we ran into

There were certainly a lot of things that we found difficult. For one, since none of us were really familiar with much code at all, we had no idea how to get started. After designing on figma, we ran into some problems. The code needed to be tweaked in order to be formatted correctly. We reached out to Sarthak Mohanty, one of the Organizers, to help us, and he was able to explain some of the intricacies of the CSS coding. After lots of trial and error, we were finally able to make the site look the way it does.

The next challenge was integrating JavaScript with the HTML code. None of us had experience with JavaScript either (some of us knew some Python and Java, which was helpful), so we asked Neel Rekar, another Organizer, to show us the ropes. We were able to create arrays that matched up a "disease," a description, and an image.

Accomplishments that we're proud of

We're quite proud of everything that we made. Most of us walked in with very minimal knowledge of how to create a website from scratch, but now we have a functioning and nicely-designed website! The content itself is silly, but it came with the idea to entertain. Hopefully visitors of the website have never seen anything like it before.

What we learned

At least half of the group learned everything from this project: How to use HTML, CSS, and a little bit of JavaScript. We will certainly be taking these skills with us in our future coding endeavors. Throughout the journey, we also had a lot of fun!! Although we stayed up way past our bedtimes on Saturday night, we thoroughly enjoyed the experience!

What's next for Mislead Your Disease

Mislead Your Disease is a novelty site designed to make people laugh. In the future, we would like to expand the website to include other themes. For example a website designed in the same style that generates a non-traditional future career path, or a suggestion for which obscure place the user should go. Features we would add in the website would be more UX design and styling to make it more appealing, and specific diseases related to the symptoms will be outputted, for e.g. runny nose leads to congestive heart failure. We were also inspired by the DeepAI workshop so we can incorporate Zendo in so it can show a disease based on features on one’s face in the future after beta.

Built With

• css
• figma
• html
• javascript
• photopea
• vercel
• wevideo