Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Listings 17.05 and 17.06</title>
</head>
<body>
​
  <h1>My Movie Ratings</h1>
  
  <div id="movies"></div>
  
</body>
</html>
​
​
​
<!-- Further Adventures
​
     1) Add a paragraph element to
        the page.
​
     2) Give the paragraph an
        id attribute.
​
     3) Use JavaScript to display a
        message in the paragraph with
        the number of movies.
​
-->
 
/* Get Programming with JavaScript
 * Listings 17.05 and 17.06
 * Building HTML with JavaScript
 */
​
var moviesData = [
    {
        "title" : "Inside Out",
        "summary" : "An emotional adventure inside the head of a young girl."
    },
    {
        "title" : "Tomorrowland",
        "summary" : "Recreating the hope and wonder of previous generations."
    },
    {
        "title" : "The Wizard of Oz",
        "summary" : "Strangers find friendship and strength on a long walk."
    }
];
​
function getMovieHTML (movie) {
  var html = "<h3>" + movie.title + "</h3>";
  html += "<p>" + movie.summary + "</p>";
  return html;
}
​
function getMoviesHTML (movies) {
  var html = "";
  
  movies.forEach(function (movie) {
    html += "<li>" + getMovieHTML(movie) + "</li>";
  });
  
  return "<ul>" + html + "</ul>";
}
​
function render (movies) {
  var moviesDiv = document.getElementById("movies");
  moviesDiv.innerHTML = getMoviesHTML(movies);
}
​
render(moviesData);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jrlarsenpro
0viewers