JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<ul id="movielist">
</ul>

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 classicMovies = [
    'Dr. Strangelove',
    'King Kong',
    'Casablanca'
];
var scifiMovies = [
    '2001: A Space Odyssey',
    'Star Wars',
    'Flash Gordon' 
];
 

function MovieList(movieListElement){
     this.movieList = movieListElement;
}

MovieList.prototype.addMovies = function(moviesToAdd) {
    console.log(this);
    
    moviesToAdd.forEach(function(m){        
        var aMovie = document.createElement('li');
        aMovie.appendChild(document.createTextNode(m));
        
        this.movieList.appendChild(aMovie);
        alert(this.movieList.outerHTML);
        
    });
}

var elMovieList = document.getElementById('movielist');
var movieList = new MovieList (elMovieList);
movieList.addMovies(classicMovies);
movieList.addMovies(scifiMovies);
 
// your code here