Project Spotlight: Ellen Cooper of Turing School

Table of Contents

• Ellen’s Background
• Ellen’s Final Project: Not Here to Make Friends
• How Ellen Created the Drag and Drop Functionality Using JavaScript

As an avid fan of The Bachelor and The Bachelorette, Turing School student Ellen Cooper and her friends used spreadsheets to predict the outcomes of each season. When she started learning to code, she used her new skills to build a custom fantasy-football-style league application for her friends to play. At Turing, Ellen has created a functional and beautifully designed app called “Not Here to Make Friends” where users can draft teams and earn points throughout the season. We asked Ellen to demo her project and show us how she used JavaScript to add seamless functionality! Watch the videos or read the brief summaries.

Ellen’s Background

• 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
• JavaScript
• 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
   

How Ellen Created the Drag and Drop Functionality Using JavaScript

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:

• This is the Draft Picks JavaScript file:

• 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.
  • For each card we are creating a JavaScript object with 2 attributes - the id attribute and the position.

• 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!