Your Yoga

Inspiration

Your Yoga was inspired when one of our team members got into yoga, and realized that there weren't that many customizable ones based on the length of the program. Thus, this project's inspiration was born.

What it does

Your Yoga allows the users to customize the length of their yoga workout. The site also allows users to take a break in between each exercise to catch their breath and to avoid overexerting their body. Each workout is unique and random, so each user gets a different experience each time they use the site! While yoga benefits both the mind and the body, we hope that our innovative take of providing a different workout each time for any session length helps people to easily stay fit no matter how much time they have.

How we built it

We built this site using HTML, CSS, and JavaScript in VS Code and collaborated over Live Share (on VS Code). We also used Bootstrap to help out with the CSS, and any time were stuck on an issue, we consulted a PickHacks mentor (they were all so helpful!) or good old Google and YouTube. For the amazing graphics on the site, we used Canva to design them.

Going into more depth, the most notable aspect of our project is the "doing yoga" page. The changing background was done with various CSS properties, and the functionality of the yoga sessions was done with JS. Basically, there is an array of objects that hold information about different yoga positions. We figure out times for each part based off of arrays that hold the possible times that could be had for a break and a yoga position. The user inputted time in minutes is passed into the URL, so we take that and randomly add possible times until the yoga sessions reaches the user's inputted time in seconds. From there, each time there is a break, we display that, and each time there is a pose, we display that (from the shuffled yoga poses array). Breaks and yoga poses alternate. We continue until we reach the end of the session.

Challenges we ran into

At first, we wanted to tackle a different project using React, but we knew nothing about React or APIs so we decided to stick to vanilla code. We encountered a lot of challenges with the formatting on the Your Yoga website, especially because we had to set up fancy backgrounds and elements we hadn't worked with before. Another challenge was working with JavaScript - this was the first time working with JS for all of us, and we didn't understand syntax at times, but eventually we made it work!

Accomplishments that we're proud of

We're really proud of how far we've grown as a team while developing this project while overcoming lots of hurdles with each other. We're also proud that we (somewhat) successfully creating a working site while juggling school at the same time! PickHacks is our first or second hackathon (respectively) and really one of our first few experiences with JavaScript. We're also proud of the fact that we're 75% women so we're representing women in STEM! This site is pretty heavily reliant on JavaScript so that's pretty great since we learned something new! All in all, we're super proud of our project and how our friendship has grown! We had a ton of fun at PickHacks, especially when participating in the various games and activities.

What we learned

Doing a hackathon was a pretty new experience for all of us, so the whole thing does feel like a learning experience. When it came to the brainstorming process and coming up with useful ideas, it was a good lesson in trial and error. Some ideas made it to our list but ended up not being as feasible as we thought, which helped us learn the importance of considering the more nuanced constraints of what we could build in the time we had. In terms of actual coding, it was our whole team's first time writing in Java Script. But, by cross applying our knowledge from other languages and learning basic syntaxes, we were able to learn how to build a properly functioning website through a combination of css, javascript, and html. But perhaps most importantly, we learned how to work as a team and work through a lot of the technical problems that were bound to arise when building a website for the first time.

What's next for Your Yoga

Although we are very proud of what he have made in such a short amount of time, there are tons of directions we could go in to expand the use of Your Yoga. For starters, adding to the already existent flexibility could be very helpful. Having options for no equipment workouts and offering a broader range of difficulty levels could enhance our users' experiences even more. Customizability could extend beyond just the workout itself. In order to make the user's visual and auditory experience better, we could allow them to choose music options and possibly even the colors for the animations. Accessibility to a broader group of people is also something that we will definitely strive to achieve!

Built With

• bootstrap
• canva
• css3
• html5
• javascript
• vscode