Blurred images added top movie year to all sections

src/static/css/custom.css

@@ -46,7 +46,12 @@ pre {
 }
 
 
-
+img.blur {
+    width:367;
+    height:459px;
+    -webkit-filter: blur(10px);
+    filter: blur(10px);
+}
 
 /*@keyframes fadein{
     0% { opacity:0; }

src/static/js/enthusiast.js

@@ -87,7 +87,7 @@ var data = {
         $('#year').html(year)
         $('#score').html(score)
         $('#gross').html(gross)
-        $('#top-movies-year').html(' for ' + year)
+        $('.top-movies-year').html(' for ' + year)
         if ((performance.now() - window.last_update)>update_freq)
         {
             window.last_update = performance.now()
@@ -287,7 +287,7 @@ function update_top_movies(start_year, end_year)
             window.promises = promises
         for (i in promises){
             console.log()
-            $('#poster-' + i).html('<img src=' + promises[i].responseJSON['Poster'] + ' width=75%>')
+            $('#poster-' + i).html('<img class=blur src=' + promises[i].responseJSON['Poster'] + ' width=75%>')
             $('#title-' + i).html(promises[i].responseJSON['Title'])
 
         }

src/templates/enthusiast.html

@@ -64,7 +64,7 @@
         <div class="row" min-height:150px>
             <div class='col-sm-6'>
                 <div id='sentiment-chart-title' class='sentiment-chart-title'>
-                <h2>Sentiment</h2>
+                <h2>Sentiment <div class='top-movies-year'></div></h2>
                 The following chart shows polarity/subjectivity of the plot keywords scaled to match the dataset.  Polarity defines how positive or negative the plot is, while subjectivity shows how objective or subjective the plot is.  Action movies tend to contain more negativity with words like Murder, Terrorist, and assassin, while romance movies tend to show more positivity with words like Love, Wedding, and Friend.
                 </div>
                 <div id='sentiment-chart' class='sentiment-chart centered'></div>
@@ -72,7 +72,7 @@
 
             <div class='col-sm-6'>
                 <div id='word-cloud-title'>
-                <h2>Plot Keywords</h2>
+                <h2>Plot Keywords <div class='top-movies-year'></div></h2>
                 This word cloud shows the most common plot keywords by their frequency.  The size of the font dictates how each word ranks to other words.  Word clouds typically do not convey data very well since longer words tend to carry more weight, and their position is random.  It is fitting to use here for a fun way to see the keywords.
                 </div>
                 <div id='word_cloud' class='centered'></div>
@@ -88,7 +88,7 @@
         <div class='row' padding:50px>
             <div class='col-sm-3'></div>
             <div class='col-sm-6' style='text-align:center; margin:auto'>
-            <h2>Top Movies <div id='top-movies-year'></div></h2>
+            <h2>Top Movies <div class='top-movies-year'></div></h2>
                 <div id='note' class='note'>
                 <em>
                 by gross $

src/templates/layout.html

@@ -52,7 +52,7 @@
               {% endfor %}
 
           <li class="dropdown">
-          <a href='/slides' class='active dropdown-toggle navbar-inverse' data-toggle="dropdown">Slides<b class="caret"></b></a>
+          <a href='/slides' class='dropdown-toggle navbar-inverse' data-toggle="dropdown">Slides<b class="caret"></b></a>
           <ul class='dropdown-menu'>
             <li>
             <a href='/slides'>dark</a>