Real-Time Keystroke Visualizer
Live demonstration for Circle K International—Sac State
Spring 2024
Problem and Solution
- Problem: Needing to demonstrate keyboard navigation shortcuts to a live audience without the ability to install software on the computer
- Solution: A webpage that shows what keys the user is pressing in real-time
Skills Demonstrated
- Technical skills: CSS, Javascript, debugging, Javascript keycodes and key events
- Soft skills: Creative problem-solving, resourcefulness, time management
- Note: the HTML code for constructing the keyboard display was borrowed from a similar website
Results
- The live demonstration was concise, clear, rehearsed, and visually intuitive
- The demo was appreciated by CKI members for its clarity, usefulness, and practical applications
Description
A website that displays the user’s keystrokes in real time while typing in a textbox. I used it to give a live demonstration of keyboard navigation shortcuts on a computer which I wasn’t allowed to install software on. At first, I looked for websites that could visualize keystrokes while allowing the user to type in a textbox. When I failed to find a website that met my requirements, I took an afternoon to make one instead, utilizing code from a website that was similar to what I needed.