Elixir

Inspiration

Elixir is inspired by the typical planner everyone uses. We wanted to design Elixir to create a platform where people can easily plan out their activities while also being able to access other resources that make the scheduling experience a little more fun. The name “Elixir” is inspired by its definition: a magical or medicinal potion. We wanted the user to be able to create their own magical potion that acts as a guide to be more productive and improve their daily life.

What it does

Elixir is a website designed to allow users to input a to-do list with the tasks that they want to complete throughout the day. As the tasks get completed, the activity is moved to a completed section and if the user wants to delete the task, they can simply press the trash icon. However, we wanted to add additional options that elevate the planning experience. After clicking the advice icon, the user will be taken to a page asking about their feelings for the day. The user will then be taken to a page with information about their feelings and gain advice on what to do. In addition, we created a daily challenge option for the users so when the wheel is spun, a random activity will appear on the screen and give the user a goal to accomplish for the day.

How we built it

To create the graphic designs and background on each page, we used Canva and the templates provided to help guide us. Then, we used Figma to determine the layout of each page and connected the pages to one another so that when the user clicks on a certain component of the page, it would take them to the right location. With Figma, we were able to export all of the final designs along with the CSS code to Visual Studio Code (VSC) where we programmed everything together in HTML and javascript. In VSC, we were able to call the CSS code in HTML to access the layout and properties of each component in order to have our website designed the way we liked it. Also, after many attempts to build the to-do list and spinner, we had to resort to using sources found online and will give credit to them under “challenges we ran into”.

Challenges we ran into

It was our first time programming in HTML and CSS and we have never built a website from scratch before so we faced many challenges throughout the learning experience.

Our first challenge was navigating our way through Figma and Visual Studio Code as we watched many tutorials to learn the different tools we could utilize. We could not figure out how to make the images appear on the screen and also how to make buttons so that the pages would be linked to one another. This is a helpful resource to add buttons: https://www.w3schools.com/tags/tag_button.asp Also, these two YouTube videos by Web Dev Simplified were our favorite videos that really helped guide us throughout the process when designing our own website: https://www.youtube.com/watch?v=RZ-Oe4_Ew7g&t=151s and https://www.youtube.com/watch?v=FK4YusHIIj0

Another challenge we faced was figuring out how to get the user input in order to create the to-do list and also figure out how to create a spinner for the daily challenge. We looked up resources to help guide us in the process, but errors continued to appear and it became difficult to design it in a way where it looked aesthetically pleasing. For instance, with the to-do list, we were able to get the user to type in the box by programming in javascript, but we were unable to continue through with the if-statement so when the user pressed the “enter” key the activity would be listed. We ultimately had to resort to following the online tutorial and example code and would like to give them credit for it. Here are the links we used and modified to fit our ideas for Elixir: https://www.youtube.com/watch?v=h7gZY3_3Dqs and https://code.sololearn.com/WD8GprR5hozY/#html

Lastly, we faced the problem of not being able to have the layout of the website to fit the screens of all devices. We researched the problem and looked at the recommendations from other people and tried to implement some into our own program. However, none of it seemed to work and we continued to get errors about the sizing. Although we could not solve the problem during the time of the hackathon, we hope to be able to figure out how to do this for future projects.

Accomplishments that we're proud of

We are proud of learning so much through this project specifically, HTML, CSS, Figma, Visual Studio Code, and the overall process of designing and programming a website from scratch. We are proud that we are able to have a working website to look back on in the future and see the progress that we have made. We are glad that we were able to turn this hackathon experience into a learning experience and create a project using tools we have never used before.

What we learned

We learned how to build a website through HTML, CSS, Figma, and Visual Studio Code. Within that, we were able to learn the ways of connecting pages to one another through the button tool and also write in javascript for the user input.

What's next for Elixir

We originally started creating Elixir hoping to design a better calendar for everyone to use. We tried to use Google Calendar and Google Sign-In so the information would be linked to the user’s Google account. Although we could not complete this during the hackathon, we hope that in the future Elixir will become a platform where people could easily access a calendar and schedule calls for certain times. We also hope that we can program it so the information will be saved somewhere for the user to always access it. It would also be nice to be able to create a page that would generate a daily inspiration quote for the user or any other fun ideas they could implement into their life.

Built With

• canva
• css
• figma
• github
• html
• javascript
• visualstudiocode