From d6a6dad5528abdabb06f7a8949d57f0510d1635c Mon Sep 17 00:00:00 2001
From: Md Moushuf Alam <149342172+MoushufAlam@users.noreply.github.com>
Date: Thu, 18 Dec 2025 14:21:07 +0530
Subject: [PATCH 1/2] refactor: replace jQuery with DOM utils in caps lock
 warning (@MoushufAlam) (#7265)

### Description

Replaces jQuery usage with DOM utils for the caps lock warning.
Scope intentionally kept small per contributing guidelines.

### Checks

- [x] Adding/modifying Typescript code?
  - [x] I have used `qs`, `qsa` or `qsr` instead of JQuery selectors.
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->
Related to #7186
<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---
 frontend/src/ts/test/caps-warning.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ts/test/caps-warning.ts b/frontend/src/ts/test/caps-warning.ts
index cb78f72fbd7a..87a7ed847ac7 100644
--- a/frontend/src/ts/test/caps-warning.ts
+++ b/frontend/src/ts/test/caps-warning.ts
@@ -1,7 +1,8 @@
 import Config from "../config";
 import * as Misc from "../utils/misc";
+import { qsr } from "../utils/dom";
 
-const el = document.querySelector("#capsWarning") as HTMLElement;
+const el = qsr("#capsWarning");
 
 export let capsState = false;
 
@@ -9,23 +10,23 @@ let visible = false;
 
 function show(): void {
   if (!visible) {
-    el?.classList.remove("hidden");
+    el.removeClass("hidden");
     visible = true;
   }
 }
 
 function hide(): void {
   if (visible) {
-    el?.classList.add("hidden");
+    el.addClass("hidden");
     visible = false;
   }
 }
 
-function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
-  if (event?.originalEvent?.key === "CapsLock" && capsState !== null) {
+function update(event: KeyboardEvent): void {
+  if (event.key === "CapsLock" && capsState !== null) {
     capsState = !capsState;
   } else {
-    const modState = event?.originalEvent?.getModifierState?.("CapsLock");
+    const modState = event.getModifierState?.("CapsLock");
     if (modState !== undefined) {
       capsState = modState;
     }
@@ -40,8 +41,8 @@ function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
   } catch {}
 }
 
-$(document).on("keyup", update);
+document.addEventListener("keyup", update);
 
-$(document).on("keydown", (event) => {
+document.addEventListener("keydown", (event) => {
   if (Misc.isMac()) update(event);
 });

From 9e93af465f38641a4ac61b7e3552a91e457a48c2 Mon Sep 17 00:00:00 2001
From: Md Moushuf Alam <149342172+MoushufAlam@users.noreply.github.com>
Date: Thu, 18 Dec 2025 16:13:47 +0530
Subject: [PATCH 2/2] refactor: replace jQuery with DOM utils for alt and shift
 key trackers (@MoushufAlam) (#7266)

### Description
Replaces jQuery usage with DOM utils for alt and shift key trackers.
Scope intentionally kept small per contributing guidelines.


### Checks

- [x] Adding/modifying Typescript code?
  - [x] I have used `qs`, `qsa` or `qsr` instead of JQuery selectors.
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Related to #7186

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---
 frontend/src/ts/test/alt-tracker.ts   | 4 ++--
 frontend/src/ts/test/shift-tracker.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/alt-tracker.ts b/frontend/src/ts/test/alt-tracker.ts
index edf80e459f48..fa13933921e8 100644
--- a/frontend/src/ts/test/alt-tracker.ts
+++ b/frontend/src/ts/test/alt-tracker.ts
@@ -1,7 +1,7 @@
 export let leftState = false;
 export let rightState = false;
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e: KeyboardEvent) => {
   if (e.code === "AltLeft") {
     leftState = true;
   } else if (e.code === "AltRight") {
@@ -9,7 +9,7 @@ $(document).on("keydown", (e) => {
   }
 });
 
-$(document).on("keyup", (e) => {
+document.addEventListener("keyup", (e: KeyboardEvent) => {
   if (e.code === "AltLeft") {
     leftState = false;
   } else if (e.code === "AltRight") {
diff --git a/frontend/src/ts/test/shift-tracker.ts b/frontend/src/ts/test/shift-tracker.ts
index d60dad90a55e..90a7feea29a5 100644
--- a/frontend/src/ts/test/shift-tracker.ts
+++ b/frontend/src/ts/test/shift-tracker.ts
@@ -4,7 +4,7 @@ import * as KeyConverter from "../utils/key-converter";
 export let leftState = false;
 export let rightState = false;
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e: KeyboardEvent) => {
   if (e.code === "ShiftLeft") {
     leftState = true;
     rightState = false;
@@ -14,7 +14,7 @@ $(document).on("keydown", (e) => {
   }
 });
 
-$(document).on("keyup", (e) => {
+document.addEventListener("keyup", (e: KeyboardEvent) => {
   if (e.code === "ShiftLeft" || e.code === "ShiftRight") {
     leftState = false;
     rightState = false;