JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<div class="movielist">
    
</div>

<div class="clickCounter"></div>

JavaScript

/*
    Implement the MovieList class:
    
    1) When addMovies() is called, add the given list of movies to the container element (#elMovieList)
    
    2) When a movie title is clicked:
        a) Move it to the top of the list
        b) Print the total number of clicks to the console
*/
var movies = {
    classicMovies : [
    'Dr. Strangelove',
    'King Kong',
    'Casablanca'
    ],
    scifiMovies : [
        '2001: A Space Odyssey',
        'Star Wars',
        'Flash Gordon' 
    ]
}

function MovieList($el){
    var self = this;
    this.$el = $el;
    this.clickCount = 0;
    this.$el.on('click', '.movieItem', function() {
        self.prependAndIncrementCount($(this));
    });
};

MovieList.prototype.addMovies = function(movieArr) {
    movieArr.forEach(function(title) {
        var $movieItem = $("<div/>", {text: title, class: "movieItem"});
        var $el = this.$el;
        this.$el.append($movieItem);
    }.bind(this));
}

MovieList.prototype.prependAndIncrementCount = function($movieItem) {
    $movieItem.prependTo(this.$el);
    this.clickCount++;
    $('.clickCounter').text(this.clickCount);
};

var $elMovieList = $('.movielist');
var movieList = new MovieList($elMovieList);

movieList.addMovies(movies.classicMovies);
movieList.addMovies(movies.scifiMovies);

// your code here