Hack-It Bracket

Inspiration

Our inspiration was to create a bracket for all purposes. We also wanted to incorporate the hackathon’s theme of sports. We’ve seen people use brackets for March Madness, robotic competitions, and even books! As a result, we developed a program for people to customize and apply these brackets to all their interests.

Functionality

The Hack-It Bracket allows the user to easily configure text boxes for each individual competitor. As the tournament progresses, the winning competitor of each game can be noted and the games can continue. Our program even has a customization option to change the bracket title to fit the occasion! It also works on different devices and adapts based on the size of the window.

Build Process

After finalizing our idea, we started by drawing brackets in varying colors using Google Drawings. Then, we imported the bracket image and used different mechanisms to resize the image. Following that, we created and positioned all of the text boxes on the bracket. While this may seem like a tedious task, we utilized classes of columns in CSS to eliminate the vertical positioning between text boxes in the same column.

Challenges we ran into

While working on our project, we encountered numerous problems, but through research, and some assistance, we were able to resolve them and grow from them. Initially, we encountered a problem with the sizing of the bracket image creating excess space on both the right and the bottom of the page. To work through this issue, we set the image to become the 'background image' and experimented with numerous placement, positioning, and size methods. After overcoming that problem, we noticed that our text boxes wouldn't maintain the same location with different window sizes, especially between two devices. Through a bit of help and tons of research, we discovered that we needed to use the viewport height/width to set the text boxes' positions, as opposed to a fixed height/width. Our most recent struggle was with implementing the different bracket color themes. Instead of the dropdown menu changing the background image, a new image with a completely different configuration would be drawn on top of it. After lots of research and experimentation, we were still unable to resolve this issue. At the moment, our bracket color customization is a work-in-progress and doesn't work, although it is definitely something that we will work towards. Through our struggles, we researched, experimented, solved problems, and learned new skills to benefit our code in the future.

Accomplishments/Skills Learned

During this project, we experimented with many different mechanisms, especially to resolve some of our challenges. Specifically, we learned about viewport height/width when we were figuring out how to keep the text boxes in the same place between differently-sized windows. Additionally, through research, we learned how to set specific positioning properties to an element by using 'absolute,' 'fixed,' and 'relative.' We also learned how to implement and get rid of page scrolling, position text boxes with coords, set text box placeholders, make text boxes transparent, implement the onclick tool for input methods, and so much more!

What's next for Hack-It Bracket

Even though we were able to create a functioning bracket tool, there are still many features that we could add to make the interface more user-friendly. Some of these ideas include implementing a feature to change the bracket size based on the number of competitors, make the winner a different text color, add icons/pictures, add subheadings for each round, and have the name of each competitor show their record/competition history when clicked.

Built With

• css
• html