Skip to content
This repository was archived by the owner on Dec 12, 2024. It is now read-only.

Commit 45f5e1c

Browse files
Ankitv003Ankitv003
authored
🔨[refractor][made changes for tests] (#409)
* 🔨[refractor][made changes for tests] * 🔨[refractor][changed npm to pnpm in config] * 🔨[refractor][installed pnpm locally] * 🔨[refractor][added condition for page to be stable]
1 parent da7b44e commit 45f5e1c

19 files changed

+2190
-204
lines changed

‎javascript/dwa-starter-vanillajs-vite/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>DWA Starter</title>
77
<link rel="stylesheet" href="style.css" />
8+
<link rel="icon" href="/favicon.ico" sizes="48x48" />
9+
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
10+
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
11+
<link rel="manifest" href="/manifest.json" />
812
</head>
913
<body>
1014
<nav>

‎javascript/dwa-starter-vanillajs-vite/main.js

+129-68
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,162 @@
11
// Function to create and render the toggle button
22
function createThemeToggleButton() {
3-
console.log('Creating theme toggle button');
4-
const nav = document.querySelector('nav');
5-
const button = document.createElement('button');
6-
button.id = 'theme-toggle';
7-
button.textContent = 'Toggle Theme';
8-
button.setAttribute('aria-label', 'Toggle Dark Mode');
9-
button.classList.add('theme-toggle-btn');
10-
nav.appendChild(button);
11-
button.addEventListener('click', toggleTheme);
12-
console.log('Theme toggle button created and added to nav');
3+
console.log("Creating theme toggle button");
4+
const nav = document.querySelector("nav");
5+
const button = document.createElement("button");
6+
button.id = "theme-toggle";
7+
button.textContent = "Toggle Theme";
8+
button.setAttribute("aria-label", "Toggle Dark Mode");
9+
button.classList.add("theme-toggle-btn");
10+
nav.appendChild(button);
11+
button.addEventListener("click", toggleTheme);
12+
console.log("Theme toggle button created and added to nav");
1313
}
1414

1515
function toggleTheme() {
16-
console.log('Toggle theme function called');
17-
const body = document.body;
18-
const isDarkMode = body.classList.contains('dark-mode');
19-
console.log('Current mode is dark:', isDarkMode);
20-
21-
if (isDarkMode) {
22-
body.classList.remove('dark-mode');
23-
body.classList.add('light-mode');
24-
console.log('Switched to light mode:', body.classList); // Log class list
25-
} else {
26-
body.classList.remove('light-mode');
27-
body.classList.add('dark-mode');
28-
console.log('Switched to dark mode:', body.classList); // Log class list
29-
}
30-
localStorage.setItem('theme', isDarkMode ? 'light' : 'dark');
31-
}
16+
console.log("Toggle theme function called");
17+
const body = document.body;
18+
const isDarkMode = body.classList.contains("dark-mode");
19+
console.log("Current mode is dark:", isDarkMode);
3220

21+
if (isDarkMode) {
22+
body.classList.remove("dark-mode");
23+
body.classList.add("light-mode");
24+
console.log("Switched to light mode:", body.classList); // Log class list
25+
} else {
26+
body.classList.remove("light-mode");
27+
body.classList.add("dark-mode");
28+
console.log("Switched to dark mode:", body.classList); // Log class list
29+
}
30+
localStorage.setItem("theme", isDarkMode ? "light" : "dark");
31+
}
3332

3433
// Apply stored theme preference or system preference on load
3534
function applyStoredTheme() {
36-
console.log('Applying stored theme');
37-
const storedTheme = localStorage.getItem('theme');
38-
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
39-
const body = document.body;
40-
41-
console.log('Stored theme:', storedTheme);
42-
console.log('System prefers dark scheme:', prefersDarkScheme.matches);
43-
44-
if (storedTheme === 'dark' || (storedTheme === null && prefersDarkScheme.matches)) {
45-
body.classList.add('dark-mode');
46-
console.log('Applied dark mode');
47-
} else {
48-
body.classList.add('light-mode');
49-
console.log('Applied light mode');
50-
}
35+
console.log("Applying stored theme");
36+
const storedTheme = localStorage.getItem("theme");
37+
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
38+
const body = document.body;
39+
40+
console.log("Stored theme:", storedTheme);
41+
console.log("System prefers dark scheme:", prefersDarkScheme.matches);
42+
43+
if (
44+
storedTheme === "dark" ||
45+
(storedTheme === null && prefersDarkScheme.matches)
46+
) {
47+
body.classList.add("dark-mode");
48+
console.log("Applied dark mode");
49+
} else {
50+
body.classList.add("light-mode");
51+
console.log("Applied light mode");
52+
}
5153
}
5254

5355
// Initial setup on DOM content loaded
54-
document.addEventListener('DOMContentLoaded', () => {
55-
console.log('DOM content loaded');
56-
applyStoredTheme(); // Apply the stored theme or system preference
57-
createThemeToggleButton(); // Create the theme toggle button and attach to nav
58-
// Initial routing setup (if using navigation in your app)
59-
router();
60-
console.log('Initial setup completed');
56+
document.addEventListener("DOMContentLoaded", () => {
57+
console.log("DOM content loaded");
58+
applyStoredTheme(); // Apply the stored theme or system preference
59+
createThemeToggleButton(); // Create the theme toggle button and attach to nav
60+
// Initial routing setup (if using navigation in your app)
61+
router();
62+
console.log("Initial setup completed");
6163
});
6264

6365
// Import your components for routing (if necessary)
64-
import { Home, About, Settings, NotFound } from './components.js';
66+
import { Home, About, Settings, NotFound } from "./components.js";
6567

6668
// Define routes and their corresponding components (if necessary)
6769
const routes = {
68-
'/': Home,
69-
'/about': About,
70-
'/settings': Settings,
70+
"/": Home,
71+
"/about": About,
72+
"/settings": Settings,
7173
};
7274

7375
// Function to handle navigation (if necessary)
7476
function navigateTo(url) {
75-
console.log('Navigating to:', url);
76-
history.pushState(null, null, url);
77-
router();
77+
console.log("Navigating to:", url);
78+
history.pushState(null, null, url);
79+
router();
7880
}
7981

8082
// Router function to render components based on the current URL
8183
function router() {
82-
console.log('Router function called');
83-
const path = window.location.pathname;
84-
console.log('Current path:', path);
85-
const route = routes[path] || NotFound;
86-
route();
84+
console.log("Router function called");
85+
const path = window.location.pathname;
86+
console.log("Current path:", path);
87+
const route = routes[path] || NotFound;
88+
route();
8789
}
8890

8991
// Event delegation for link clicks (if necessary)
90-
document.addEventListener('click', (e) => {
91-
if (e.target.matches('[data-link]')) {
92-
console.log('Link clicked:', e.target.href);
93-
e.preventDefault();
94-
navigateTo(e.target.href);
95-
}
92+
document.addEventListener("click", (e) => {
93+
if (e.target.matches("[data-link]")) {
94+
console.log("Link clicked:", e.target.href);
95+
e.preventDefault();
96+
navigateTo(e.target.href);
97+
}
9698
});
9799

98100
// Listen to popstate event (back/forward navigation) (if necessary)
99-
window.addEventListener('popstate', router);
101+
window.addEventListener("popstate", router);
102+
103+
console.log("Script loaded");
104+
105+
// Service worker registration
106+
if ("serviceWorker" in navigator) {
107+
window.addEventListener("load", () => {
108+
navigator.serviceWorker
109+
.register("sw.js")
110+
.then((reg) => {
111+
console.log("Service Worker: Registered");
112+
113+
// Check if a new SW is waiting to activate
114+
reg.onupdatefound = () => {
115+
const newWorker = reg.installing;
116+
newWorker.onstatechange = () => {
117+
if (
118+
newWorker.state === "installed" &&
119+
navigator.serviceWorker.controller
120+
) {
121+
// Notify user about new version availability
122+
if (
123+
confirm(
124+
"A new version of the app is available. Would you like to update?"
125+
)
126+
) {
127+
newWorker.postMessage({ action: "skipWaiting" });
128+
}
129+
}
130+
};
131+
};
132+
})
133+
.catch((err) => console.log(`Service Worker Error: ${err}`));
100134

101-
console.log('Script loaded');
135+
// Listen for `controllerchange` to reload the page when the new SW takes control
136+
navigator.serviceWorker.addEventListener("controllerchange", () => {
137+
window.location.reload();
138+
});
139+
});
140+
}
141+
142+
let deferredPrompt;
143+
144+
window.addEventListener("beforeinstallprompt", (e) => {
145+
e.preventDefault();
146+
deferredPrompt = e;
147+
148+
// Show custom install button or UI (ensure an element with id="install-button" exists in your HTML)
149+
const addToHomeScreen = document.querySelector("#install-button");
150+
addToHomeScreen.style.display = "block";
151+
152+
addToHomeScreen.addEventListener("click", () => {
153+
// Show the install prompt
154+
deferredPrompt.prompt();
155+
deferredPrompt.userChoice.then((choiceResult) => {
156+
if (choiceResult.outcome === "accepted") {
157+
console.log("User accepted the install prompt");
158+
}
159+
deferredPrompt = null;
160+
});
161+
});
162+
});

‎javascript/dwa-starter-vanillajs-vite/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "dwa-starter-vanillajs-vite",
3+
"display": "standalone",
4+
"scope": "/",
5+
"start_url": "/index.html",
6+
"theme_color": "#ffffff",
7+
"background_color": "#ffffff",
8+
"icons": [
9+
{
10+
"purpose": "maskable",
11+
"sizes": "512x512",
12+
"src": "./public/maskable-icon-512x512.png",
13+
"type": "image/png"
14+
},
15+
{
16+
"purpose": "any",
17+
"sizes": "512x512",
18+
"src": "./public/pwa-512x512.png",
19+
"type": "image/png"
20+
}
21+
],
22+
"orientation": "any",
23+
"dir": "auto",
24+
"lang": "en-US"
25+
}

0 commit comments

Comments
 (0)