ASCII Key

2019-05-17

View Demo | View Source Code

I started my ASCII Key project to dust up my old school JavaScript (my favorite: disabling the right click and output a prompt on your website… I digress! [See Footnote 1] See footnotes below).

In this project, I applied what I learned from Wes Bos’s Lesson 1 of JavaScript30 and various resources I used on JavaScript DOM manipulation. I did not focus on the frontend (responsive for mobile), since the objective is improving my understanding and use of DOM manipulation.

There are 2 sections of this project (why 2? [See Footnote 2]):

  • keypress – Enter any key in the browser [See Footnote 3] and it will output the keycode, decimal code and hexcode.
  • form – Enter a key in the input form, click submit, and the keycode, decimal code, and hexcode will output into the table.

Technologies Used

  • vanilla CSS
  • CSS-SASS (partials, variables)
  • HTML (inputs)
  • vanilla JavaScript (DOM manipulation: append, event listeners, select, style)
  • Semantic UI (layout)

What I Learned

  • DOM manipulation is fun when you have a good strategy to approach it. I like Jon Duckett’s book because of all the visuals [See Footnote 4] (See Sources).
  • Sometimes you have to disable the one thing you love about the keyboard in this project, the space bar, because space bars jump to the bottom of the webpage (Ah, you’re revealing my form before user can click on the arrow!).
  • Adopting the slash notation naming convention for git branches – I like the slash notation because it nicely organizes your git refs into folders. Organization is key to being efficient.

Footnotes

  • [1] …because you didn’t want anyone to steal your frontend code. This was before all the design patterns (UI patterns, etc.) we have nowadays so there was not much to take back then.
  • [2] I needed a challenge with inserting rows tables with DOM manipulation, and because I like tables.
  • [3] The unavailable keys are listed on the project site.
  • [4] I’m a visual learner so I like intentionally positioned content.

Sources