(This was originally posted on my blog on 1/4/2021)
Project Link: HERE
div, I was able to make a basic documentation page while using less page space.
For the dark colors, I used the same color hex shades of grey that Spotify uses, which I picked up from this fantastic article (which also includes other color hex combinations used by other applications and companies. I used CSS flex boxes to create a two-column layout for the buttons on the left, and the explanations on the right. The buttons were used for version 1.0 since I already knew how to attached a JS function to a button using the
onclick attribute inside the
button tag. One upgrade I want to use soon is making it a link on a page that lights up instead of a physical button you click, since animated links seem to be currently the popular theme (like the left-hand options on the Twitter web browser app).
Here, myPop is a variable that contains the function itself. I created a
div with the class “definition” and saved the access in the function inside the variable “place.” Each function initially resets the
div to an empty string to make sure the
div is cleared of any information. Then it adds the title of the function using a
h3 tag, then below is the definition wrapped in a
p tag, and lastly I use the newly learned
code tag to wrap an example of using the function. In short, this function accesses the “definition”
div and places in the correct information on the function. Each version of this function clears out old information and puts in new information.