Product Submitter

Task Url: https://confluence.ontrq.com/display/KB/Medium+level+-+native+JS/#Mediumlevel-nativeJS-#2:Adminfunctionality:addproducttostore

by fullyslick

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="app-solution.js" defer></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Product Submitter</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Product List</h2>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#SKU</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                    <th>Is available</th>
                </tr>
                </thead>
                <tbody id="products-list">
                <tr>
                    <th scope="row">D33H1</th>
                    <td>Macbook pro 13 inch</td>
                    <td>1500$</td>
                    <td>13-inch MacBook Pro with Retina display</td>
                    <td>In-stock</td>
                </tr>
                </tbody>
            </table>

            <h2>Add new Product</h2>
            <form action="#" id="add-product-form" name="addproductform">
                <div class="form-group">
                    <label for="pTitle">Product title</label>
                    <input type="text" name="pTitle" class="form-control" id="pTitle">
                </div>
                <div class="row">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label for="pSKU">Product SKU</label>
                            <div class="input-group">
                                <div class="input-group-addon">#</div>
                                <input type="text" name="pSKU" class="form-control" id="pSKU">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div...

JavaScript

// Task Url: https://confluence.ontrq.com/display/KB/Medium+level+-+native+JS/#Mediumlevel-nativeJS-#2:Adminfunctionality:addproducttostore

var ProductSubmitter = (function() {

    var productList = document.getElementById('products-list'),
        productTitle = document.getElementById('pTitle'),
        productSKU = document.getElementById('pSKU'),
        productPrice = document.getElementById('pPrice'),
        productDescription = document.getElementById('pDesc'),
        productAvailability = document.querySelector('[type=checkbox]'),
        addToCartButton = document.getElementById('addToCart'),
        product = {},
        requiredInputs = [productTitle, productSKU, productPrice],
        isValidPrice = false;

    function init() {
        _clickOnAddProduct();
    }

    function _clickOnAddProduct() {

        addToCartButton.addEventListener('click', function(event) {
            
            // prevent displaying input values in url
            event.preventDefault();

            if (_validateForm()) {
                _addProduct();
                _clearInputs();
            }
        });
    }

    function _validateForm() {

        var invalidInputs = 0;

        for (var i = 0; i < requiredInputs.length; i++) {
            // Validate empty inputs even if empty spaces are inserted
            if (!requiredInputs[i].value.replace(/\s+/, '').length) {

                invalidInputs += 1;

                requiredInputs[i].parentElement.classList.add('has-error');

            } else {

                requiredInputs[i].parentElement.classList.remove('has-error');

                // If there is input in the price field check if it is valid
                if (requiredInputs[i] === productPrice) {
                    _checkValidPrice();
                }
            }
        }

        return invalidInputs === 0 && isValidPrice;
    }

    function _checkValidPrice() {
        if (!isNaN(productPrice.value) && _checkValidDecimal()) {
        ...