- Worked in public investment banking for 3.5 years
- Took up coding as a hobby and enjoyed it
- Was ready for a new challenge in her career
- Chose Turing School for its reputation and had always wanted to live in Denver
Ellen’s Final Project: Not Here to Make Friends
What is it?
A fantasy league platform for the Bachelor and Bachelorette TV shows.
Why did she build it?
Her friends had been using a spreadsheet to predict the outcomes of The Bachelor, but it was difficult to maintain.
Functionality in the Application
- Users join a league, draft contestants from the show, and earn points each week for their team based on the success of the contestants.
Draft Room: users can drag and drop draft picks until they’re happy with the team (and can see a summary of Draft Picks and a team roster).
League Overview: shows who is in each league, statistics, graphs, and chat.
This Week: shows a basic summary of each week’s show. See which contestants earned points and view the scoring system.
Individual Player Page: shows basic info and bio about each player, with statistics for the season. Also shows personality analysis and social media feed.
What technologies were used to build it?
- Bootstrap - front end design
- Custom CSS - front end design
- Ruby on Rails - backend and framework
- JQuery - frontend enhancements including drag and drop functionality
- Ajax - managing data
- Watson API and Twitter API to analyze each contestant’s social media posts for their Personality Analysis
The biggest challenge in this project was implementing the drag-and-drop functionality. Ellen had to do a lot of research and teach herself a number of concepts in order to create this functionality. Here she walks us through the technology behind dragging and dropping items in a list to change their order. Watch the video for the full tutorial, or read over the (abridged) summary.
- When users are drafting players for a team, they can go to the Draft Room and drag and drop players to rank them in the order they want:
- Ellen used a JQuery plugin called HTML5 Sortable, which is a JQuery library that provides the drag and drop functionality, so that she doesn’t have to write a ton of code.
- Ellen used an event listener called sortstop which comes with the JQuery plugin.
- It listens for when a user takes a certain action, which in this case is dragging and dropping a card, then executes the below highlighted code.
- Every contestant has a draft card they have the classes of draft-card and card.
- JQuery is grabbing all of those cards – there are 30 of them in this case for 30 contestants in this season.
- The next step was to use Ajax to send this data to a different part of the application that will ultimately be responsible for updating the database with the new draft picks.
- Use a URL to specify where in application to send the data.
- When you start a team, you automatically have some default draft picks, much like fantasy football. When you draft, you’re updating that default order. So the picks are already in the database.
- The AJAX request sends in the id of the team to the database and then receives back the updated order of the list.
- If moving Adam from 3 to 1, the position and the rank will be updated.
Read more Turing reviews on Course Report and be sure to check out the Turing website!