https://vs-marvel-t3.onrender.com/rotation_watcher.js

1window.onload = () => {
2    const rotateDeviceMessageContent = `
3        <div id="rotate-device-message" class="hidden">
4            <img src="./rotation_watcher_assets/logo.png" alt="logo" />
5            <h3>Virtual Store</h3>
6            <h1>
7                Please rotate your device to portrait mode to continue
8            </h1>
9            <img id="rotation_logo" src="./rotation_watcher_assets/rotate.png" alt="rotate" />
10        </div>
11    `;
12
13    const body = document.querySelector("body");
14    if (!body) return;
15
16    body.insertAdjacentHTML("beforeend", rotateDeviceMessageContent);
17
18    const link = document.createElement("link");
19    link.rel = "stylesheet";
20    link.href = "./rotation_watcher_styles.css";
21    document.head.appendChild(link);
22
23    const rotateDeviceMessage = document.querySelector(
24        "#rotate-device-message"
25    );
26
27    const isLandscape = () => window.innerHeight < window.innerWidth;
28
29    const showRotateDeviceMessage = () => {
30        rotateDeviceMessage?.classList.remove("hidden");
31    };
32
33    const hideRotateDeviceMessage = () => {
34        rotateDeviceMessage?.classList.add("hidden");
35    };
36
37    const showCorrectOrientationMessageIfLandscape = () => {
38        if (isLandscape()) {
39            hideRotateDeviceMessage();
40        } else {
41            showRotateDeviceMessage();
42        }
43    };
44
45    showCorrectOrientationMessageIfLandscape();
46    window.addEventListener(
47        "orientationchange",
48        showCorrectOrientationMessageIfLandscape
49    );
50    window.addEventListener("resize", showCorrectOrientationMessageIfLandscape);
51};