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.
Imogen is a writer and content producer who loves writing about technology and education. Her background is in journalism, writing for newspapers and news websites. She grew up in England, Dubai and New Zealand, and now lives in Brooklyn, NY.