JSFiddle - React, Tailwind, and code Playground

by John Brown

HTML

<header>
    <div>
         <h1>The Vermont Maple Syrup market</h1>

    </div>
    <nav>
        <ul>
            <li><a href="/main.html">Home</a>

            </li>
            <li><a href="/about.html">About</a>

            </li>
            <li><a href="/buy.html">Buy</a>

            </li>
        </ul>
    </nav>
</header>
<div class="container">
    <div>
         <h3>Please enter your contact information</h3>

        <label for="fname">First Name:</label>
        <input type="text" id="fname"/>
            <br/>
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName"/>
            <br/>
        <label for="address">Address:</label>
        <input type="text" id="address"/>
            <br/>
        <label for="email">Email:</label>
        <input type="text" id="email"/>
            <br/>
        <input type="button" id="btn-Enter" value="enter your info"/>
    </div>
            </div>
<div class="cart" id="cart-syrup">
    <div class="item">
         <h2>Grade A Fancy</h2>

        <p>Light and Sweet!</p>
        <div class="info"> <span>Price: 65$ ea.</span>

            <div class="order">
                <label for="grade-A-Fancy">Quantity Desired</label>
                <input type="text" id="grade-A-Fancy" size="3" placeholder="0"/>
            </div>
        </div>
    </div>
    <div class="item">
         <h2>Grade A Dark</h2>

        <p>Light and Rich!</p>
        <div class="info"> <span>Price: 55$ ea.</span>

            <div class="order">
                <label for="grade-A-Dark">Quantity Desired</label>
                <input type="text" id="grade-A-Dark" size="3" placeholder="0"/>
            </div>
        </div>
    </div>
    <div class="item">
         <h2>Grade B Dark</h2>

        <p>Dark and Rich!</p>
        <div class="info"> <span>Price: 65$ ea.</span>

            <div class="order">
                <label for="grade-b-Fancy">Quantity Desired</label>
                <input type="text"...

JavaScript

/**
 * Created by johnbrown on 4/29/15.
 */

    "use strict";
var Customer = function () {
    var firstName = document.getElementById('fName').value,
        lastName = document.getElementById('lName').value,
        address = document.getElementById('address').value,
        email = document.getElementById('email').value;
    total = document.getElementById('results').value;
    this.firstname = firstName;
    this.lastName = lastName;
    this.address = address;
    this.email = email;
    this.buy = function (total) {
        alert("purchase details:");
    };
};

var customer;
var onCustomerCreate = function () {
    customer = new Customer();
    console.log(customer);
};

var buySyrup = function () {
    customer.buy();
};

    function estimateTotal(event) {
        event.preventDefault();
        if (document.getElementById('s-state').value === '') {
            alert("pleasse enter a state");
            document.getElementById('s-state').focus();
        }

        var aFancy = parseInt(document.getElementById('grade-A-Fancy').value, 10 || 0);
        var bFancy = parseInt(document.getElementById('grade-b-Fancy').value, 10 || 0);
        var aDark = parseInt(document.getElementById('grade-A-Dark').value, 10 || 0);
        var bDark = parseInt(document.getElementById('grade-b-Dark').value, 10 || 0);
        var state = document.getElementById('s-state').value;
        var methods = document.getElementById('cart-syrup').r - method,
            shippingMethod

        for (var i = 0; i < methods.length; i++) {
            if (methods[i].checked == true) {
                shippingMethod = methods[i].value
            }
            var estimateTotal = (aFancy * 65) + (bFancy * 65) + (aDark * 55) + (bDark * 55);
            document.getelementById('txt-Estimate').value = estimate;
        };

        document.getElementById("btn-Estimate").onclick = function () {
            estimateTotal();
            return false;
        };
       ...