JSFiddle - React, Tailwind, and code Playground

by fullyslick

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mini Cart</title>
</head>
<body>
<h1>Insert Product</h1>
<form action="" method="post" class="js-product-form">
    <label for="product-name">Product Name</label>
    <br>
    <input type="text" id="product-name" class="js-product-form-product-name" required>
    <br>
    <br>
    <label for="product-price">Price</label>
    <br>
    <input type="number" id="product-price" class="js-product-form-product-price" min="0.01" step="0.01" required>
    <br>
    <br>
    <input type="submit" value="Add Product">
</form>
<h2>Mini Cart</h2>
<span>Total: $</span><span class="js-minicart-total">0</span>
<div class="js-minicart-filter">
    <button class="js-minicart-filter-most-expensive" type="button">show most expensive</button>
    <button class="js-minicart-filter-cheapest" type="button">show the cheapest</button>
</div>
<p class="js-minicart-display"></p>
<script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * Lesson 5: Functions
 * Task 2
 * URL: https://confluence.ontrq.com/pages/viewpage.action?spaceKey=KB&title=_DRAFT_Basic+level#id-_DRAFT_Basiclevel-Lesson5(Objects)
 *
 * JS Fiddle URL:
 *
 * Create an object with information about products (mini cart):
 * Ask a user to enter a data about a product (Name, Price).
 * Add this product to a basket.
 * Create methods which will print:
 * The cheapest product;
 * The most expensive product;
 * The total sum.
 */

document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    var form = document.querySelector('.js-product-form'),
        inputProductName = document.querySelector('.js-product-form-product-name'),
        inputProductPrice = document.querySelector('.js-product-form-product-price'),
        formInputs = document.querySelectorAll('input'),
        minicartTotal = document.querySelector('.js-minicart-total'),
        minicartFilter = document.querySelector('.js-minicart-filter'),
        minicartDisplay = document.querySelector('.js-minicart-display'),
        basket = {};

    function Product(name, price) {
        this.name = name;
        this.price = price;
    }

    basket = {
        products: [],
        prices: [],
        sumPrices: function() {
            return this.prices.reduce(function(a, b) {
                return a + b;
            }, 0);
        },
        showExpensive: function() {

            var self = this;

            return this.products.filter(function(product) {
                return product.price === Math.max.apply(Math, self.prices);
            });
        },
        showCheapest: function() {

            var self = this;

            return this.products.filter(function(product) {
                return product.price === Math.min.apply(Math, self.prices);
            });
        }
    };

    form.addEventListener('submit', function(event) {

        var productName = inputProductName.value,
            productPrice =...