Problem04

function onlineShop(selector) {

2

    let form = `<div id="header">Online Shop Inventory</div>

3

    <div class="block">

4

        <label class="field">Product details:</label>

5

        <br>

6

        <input placeholder="Enter product" class="custom-select">

7

        <input class="input1" id="price" type="number" min="1" max="999999" value="1"><label class="text">BGN</label>

8

        <input class="input1" id="quantity" type="number" min="1" value="1"><label class="text">Qty.</label>

9

        <button id="submit" class="button" disabled>Submit</button>

10

        <br><br>

11

        <label class="field">Inventory:</label>

12

        <br>

13

        <ul class="display">

14

        </ul>

15

        <br>

16

        <label class="field">Capacity:</label><input id="capacity" readonly>

17

        <label class="field">(maximum capacity is 150 items.)</label>

18

        <br>

19

        <label class="field">Price:</label><input id="sum" readonly>

20

        <label class="field">BGN</label>

21

    </div>`;

22

    $(selector).html(form);

23

    let product = $('.custom-select');

24

    let price = $('#price');

25

    let quantity = $('#quantity');

26

    let button = $('#submit');

27

    let capacity = $('#capacity');

28

​

29

    function capacityCheck() {

30

        if (Number(capacity.val()) >= 150) {

31

            button.attr('disabled', true);

32

            product.attr('disabled', true);

33

            price.attr('disabled', true);

34

            quantity.attr('disabled', true);

35

            capacity.val('full');

36

            capacity.addClass('fullCapacity');

37

​

38

​

39

        }

40

    }

41

​

42

    capacityCheck();

43

    product.on('input', function () {

44

​

45

        button.attr('disabled', false);

46

        if (product.val() === '') {

47

            button.attr('disabled', true);

48

        }

49

​

50

    });

51

    button.on('click', function () {

52

        let body = $('.display');

53

        let li = $(`<li>Product: ${product.val()} Price: ${price.val()} Quantity: ${quantity.val()}</li>`)

54

        product.val('');

55

        body.append(li);

56

        button.attr('disabled', true);

57

        let sum = $('#sum');

58

        let adition = Number(sum.val());

59

        adition += Number(price.val()) * Number(quantity.val());

60

        sum.val(adition);

61

        capacity.val(Number(capacity.val()) + Number(quantity.val()));

62

        price.val(1);

63

        quantity.val(1);

64

        capacityCheck();

65

    })

66

}

67