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>
              <hr />
              <img src="<%= books[i].image %>">
                  <strong><%= books[i].title %></strong>
                      <i><%= books[i].author %></i>
                  <p><%= books[i].description %></p>
                      <%= books[i].price %>
                      <input type="checkbox" data-price="14.95" />
          </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.4 Grand Total!!! 

// 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();

function updateTotal(){
    //This grabs all the <input> tags and spits out an array called 'inputs'
    var inputs = document.getElementsByTagName("input");
    //This creates a variable called 'price' and sets it equal to a value in the array 'inputs' and gets the attribute 'data-price'.
    var price = inputs[0].getAttribute("data-price");
    //This creates a variable called 'total' and sets it equal to zero.
    total = 0;
    //This is your classic 'for' loop
    for(i = 0; i<inputs.length; i++){
        console.log(inputs[i]);
    }
};