Update Fortune Stick mini-app to pass Linters

[gilkeidar]

Task Description: Update the Fortune Stick mini-app to pass HTML, CSS, and JS linting.

Recommended Approach:

• [x] Make a new branch that is an offshoot of dev called fix-linting-fortune-stick
• [x] Work in this branch to resolve any linting errors. Whenever you push a commit, you'll trigger the "CI/CD pull request or general push" workflow - go to the Actions tab to see it. You'll then be able to check whether you're passing linting, and if not, what lines are causing errors.
• [x] Once you're done (i.e., linters are happy with YOUR code - don't expect all of the errors to go away. Likely, other mini-apps or pages will have linting errors, and the linters may still complain. As long as no files in your mini-app are causing errors, you can check this box), make a pull request back into dev.
• [x] Resolve any merge conflicts and merge the pull request into dev.

Tips:

JavaScript linting: The JavaScript linter we use is called Semi-Standard. You can make passing the JS linter easy by downloading the VSCode extension for it here. Make sure to set the "Engine" to "semistandard" in the extension settings.

The linter giving you trouble for something you don't need to fix (e.g., defining a variable in switch case statement)? You can disable particular lines / sections of your code. See how here: https://flaviocopes.com/how-to-disable-eslint-rule/

HTML & CSS: Our HTML and CSS linting is done using Superlinter, which is essentially a collection of linters for many languages. In particular, it uses HTMLHint for HTML linting and Stylelint for CSS linting.

You can download the HTMLHint extension if you're using VSCode here.

I don't think you can disable linting on a line in HTML sadly - but if you find a way, please update this issue!

Update: I didn't find a way to disable linting on a line in HTML, but if you absolutely can't fix something due to a particular rule, you can disable it by listing the rule in the .htmlhintrc config file at the top-level of the repository and setting its value to false. E.g., for the rule tagname-lowercase, the contents of .htmlhintrc can be:

{
    "tagname-lowercase": false,
    // add any other rules to disable here
}

You can download the Stylelint extension if you're using VSCode here.

To disable linting on a line in CSS, see https://stylelint.io/user-guide/ignore-code

[justin-chiang]

finished, waiting for review