I simulated a web shopping basket for a store with a single product, for two reasons:to learn to use browser events for a user to manipulate data in a pageso that, in the future, I can build it into an Ethereum demoA user can only do two things: fill a basket, and submit an order. The onlypart of order processing that I simulated is stock control, which I didentirely in the browser.To run, all you need is a browser: there is no server-side code.It works, there are no bugs that I know of, and I fixed all the issuesthat jslint and html-tidy raised.The UX is terrible: for example there are no spinners or textboxes. However, somewhat artificially, I am happy tostick with 3 buttons and concentrate on the code style.I am here to improve my JavaScript, jQuery and HTML style, so allcomments welcome. I'd particularly welcome improvements tomaintainability.function addHandler () {  console.log('Adding a widget to basket');  widgetsInBasket += 1;  updateWidgetBasket();  tidyView();}function removeHandler () {  if (widgetsInBasket >= 1) {    console.log('Removing a widget from basket');    widgetsInBasket -= 1;    updateWidgetBasket();  }  if (widgetsInBasket < 1) {    console.log('Widget basket is empty');  }  tidyView();}function emptyWidgetBasket () {  widgetsInBasket = 0;  $('#widget_basket').text(widgetsInBasket);}function buyHandler () {  var widgetOrderQuantity;  if (widgetsInBasket > 0 && widgetsInBasket <= widgetStock) {    // assume delivery and payment details already registered    widgetOrderQuantity = widgetsInBasket;    console.log('Here I should submit an order for ' + widgetOrderQuantity + ' widgets');    widgetStock -= widgetOrderQuantity;    updateWidgetStock();    $('#order_feedback').text('Processing your order for ' + widgetOrderQuantity + ' widgets');    emptyWidgetBasket();  }  else {    console.log('Unable to order widgets');    // TODO: identify specific errors to user    $('#order_feedback').text('Sorry, you cannot order ' + widgetsInBasket + ' widgets at this time');  }}function updateWidgetBasket () {  $('#widget_basket').text(widgetsInBasket);}function updateWidgetStock () {  $('#widget_stock').text(widgetStock);}function tidyView () {  $('#order_feedback').text('');}// main //var widgetsInBasket = 0;var widgetStock = 5;$('#add_widget').click(addHandler);$('#remove_widget').click(removeHandler);$('#submit_order').click(buyHandler);updateWidgetStock();$('#widget_basket').text(widgetsInBasket);<!DOCTYPE html><html>    <head>        <title>Widget Store</title>        <script language=javascript type=text/javascript                src=https://code.jquery.com/jquery-1.12.4.js>        </script>    </head>    <body>        <h2>Widgets in stock</h2>        <p><span id=widget_stock>Loading</span> widgets</p>        <h2>Your basket</h2>        <p><span id=widget_basket>0</span> widgets</p>        <p>            <button id=add_widget>Add to basket</button>            <button id=remove_widget>Remove from basket</button>        </p>        <p>            <button id=submit_order>Submit order</button> <span id=order_feedback />        </p>        <script language=javascript type=text/javascript                src=store.js></script>    </body></html>The only feature that I definitely want to add is payment information,in particular an Ethereum wallet address, so naturally I will try thisand perhaps even post my own answer with my findings.However, the main aim of code style is to help maintainers. So you could bear in mind these other possible future needs:better UX, such as a text input box, and diagnostic messaging to theuser (We don't have that many widgets in stock, Your basket isempty)multiple productsasynchronous order processingserver-side stock controlsupport more browsers, keyboards and touch devicesunit testsinclude in a more complex or interesting web pageI am not asking how to build those things, but I'd like maintainers (or my future self) to be able to add those things without cursing me.It only needs to run in my own browser, Chrome 60.I chose jQuery 1.12 because it came with Ubuntu, and because it seemedeasier to learn than the DOM API. I am open to recommedations of otherframeworks, or even none. I don't mind using ES5 or ES6 features, oreven ES2017: I only omitted a pre-processor because I don't need oneyet.I have a couple of global variables, because they are global in thedocument. However, if you think I should encapsulate them now (perhapsin objects or in closures) please tell me.I didn't add data structure(s) to support multiple products, becauseYAGNI, and my opinion that it makes the code clearer and easier for meto concentrate on what I want to learn and simulate.My simulation is similar in spirit to this question. It intentionally has fewer featuresthan this question in Angular.JS, this one in React, andthis closed question.
Simulate a simple shopping basket
javascript;beginner;jquery;html;e commerce