CSS Reduces The Need For Images — Part 5, Modal Driven Help

In this final part of the series I’ll document the help system. It too shows how little we need images with things like webfonts and CSS 3 on the table. Look at the above image where those keys and buttons are styled entirely by CSS with no images. The forward/back/up links at the bottom use webfonts for their icons. There are no images on that page other than that canvas background showing through the modal frame’s opacity.

As with the calc.app.js I’m going to summarizy by sections, if you want to browse the whole script go ahead and grab it here:
https://cutcodedown.com/for_others/medium_articles/htmlCSSCalcScripted/scripts/sources/help.modals.js

And remember there’s a .rar of the whole app available here:
https://cutcodedown.com/for_others/medium_articles/htmlCSSCalcScripted/htmlCSSCalcScripted.rar

/*
  help.modals.js
  Jason M. Knight
  January 2023
  
  REQUIRES
    dom.lib.js
  POLLUTES
    nothing
  EVENTS
    none
  
  Generates the help pages for our calculator
*/

As with the other files, list what is needed or could influence other scripts.

{
  
  const
  
    buttonDocs = {

Open up a scope block, create a buttonDocs constant. “buttonDocs” will contain…