hugo shortcode numpad

result Link to heading

• A numpad only for numbers is can be built as follow
  
  

markdown Link to heading

• Put following line in a Markdown file

  {{< numpad >}}
  

shortcode Link to heading

• It is save in layouts/shortcode/numpad.html

  {{ $js := resources.Get "js/numpad.js" }}
  {{ $file := $js | resources.Minify  }}
  {{ $url := $file.Permalink | relURL }}
  <script type="text/javascript" src="{{ $url }}"></script>
  <div id="numpad"></div>
  <script>
  numpad();
  </script>
  

javascript Link to heading

• It is saved in assets/js/numpad.js

  /*
    numpad.js
    Create numpad with button and a text area
  
    Sparisoma Viridi | https://github.com/dudung
  
    20230909 Start this simple app as part of Hugo site.
  */
  
  function numpad() {
    var side = 240;
    var margin = 10;
    var outh = 43;
  
    var app = document.getElementById("numpad");
    app.style.border="1px solid";
    app.style.width = side + "px";
    app.style.height = side + "px";
  
    var out = document.createElement("textarea");
    out.style.height = outh + "px";
    out.style.resize = "none";
    out.style.margin = margin + "px";
    out.style.setProperty(
      "width",
      "calc(100% - " + (margin*2) + "px)"
    );
    out.style.padding = "6px 8px";
    out.disabled = true;
    out.style.fontFamily = "Lucida Console";
    out.style.fontSize = "28px";
    out.style.overflowY = "hidden";
  
    var pad = document.createElement("div")
    pad.style.marginLeft = margin + "px";
    pad.style.setProperty(
      "width",
      "calc(100% - " + (margin*2) + "px)"
    );
    padh = side - (margin*4) - outh;
    pad.style.height = padh + "px";
    pad.style.textAlign = "center";
  
    app.append(out);
    app.append(pad);
  
    var btnw = 68;
    var btnh = 36;
    for(var i = 0; i < 10; i++) {
      var btn = document.createElement("button");
      num = (i > 8) ? i - 9 : i + 1;
      btn.innerHTML = num;
      btn.style.border = "0px"
      btn.style.margin = "2px"
      btn.style.width = btnw  + "px";
      btn.style.height = btnh  + "px";
      btn.style.borderRadius = "10px";
  
      btn.addEventListener("click",
        function() { out.value += event.target.innerHTML });
  
      pad.append(btn);
    }
  }