JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/css/styles.css">
<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/css/book_store.css">
<script src="http://tapmodo.github.io/jsintro/js/underscore.js"></script>
<script src="http://tapmodo.github.io/jsintro/activity/book_list.js"></script>
      <div class="container book_store">
        <h1>Book Store</h1>
    
        <div id="content">
          <!-- TEMPLATE OUTPUT SHOULD SHOW HERE (by script above)-->
        </div>
      </div>
    
    
    <!--
    
      Embedded "micro-template" ... if you give a script a type value
      other than "text/javascript", it won't execute.
    
      This can be used in combination with an id, to create a container
      for our template. Notice that the template includes a mixture of
      HTML and Javascript code, inserted between <% %>
      Use <%= variablename %> to print a value.
    
    -->
    <script type="text/template" id="booksTemplate">
      <ul class="book_list">
        <% for(var i=0; i < books.length; i++) { %>
          <li>  
            <%= books[i].title %>
          </li>
        <% } %>
      </ul>
    </script>
    
    
    <!-- WE'LL USE THIS IN ACTIVITY 8.4 -->
    <div class="cart_total">
    
      <h3>Cart Total</h3>
    
      <div id="cart_items" class="items"></div>
    
      <button onclick="updateTotal();">Total</button>
    
      <b>$<span id="total">0.00</span></b>
    
    </div>

JavaScript

//Act 8.2 Simple Template!!! 

// RUNS ON PAGE LOAD (see body tag onload="")
function pageInit(){
    // Provided code for getting template and data...
    var tmpl = document.getElementById('booksTemplate').innerHTML;
    var data = { books: book_list };

    // First, create the output
    var theOutput = _.template(tmpl, data);
    // Second, write the output into #content
    var grabContent = document.getElementById("content");
    grabContent.innerHTML = theOutput;
}

//Right here I'm calling the function so that it actually runs. Duh..
pageInit();
/*
//Creating a variable that contains a message with Underscore code
var tmpl = "<p> This paragraph was <%= message %> </p>";
///creating an object that has the message to be substituded in for the Underscore code
var data = { message: "created using a template" };

//Creating a variable that contains the Underscore function that takes in the above two variables as parameters
var output = _.template( tmpl, data );

//Creating a variable that grabs the HTML element
var target = document.getElementById("content");
//Using the innerHTML property on the 'target' variable and setting it equal to the 'output' variable we created earlier.
target.innerHTML = output;
*/