Skip to content

Commit bbff8e5

Browse files
venisha-kalolavenisha-kalola
committed
feat(projects): add 5 new vanilla JS project starters and list them on dashboard\n\n- Add projects: calculator, stopwatch, countdown-timer, unit-converter, drawing-canvas\n- Create index.html, styles.css, main.js with TODOs for each\n- Update data/projects.json to include new entries\n- Include incidental package updates and test file
1 parent 642de84 commit bbff8e5

File tree

19 files changed

+419
-0
lines changed

19 files changed

+419
-0
lines changed

‎data/projects.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,4 +263,45 @@
263263
"categoryKey": "games",
264264
"difficulty": "haed"
265265
}
266+
,
267+
{
268+
"title": "Calculator",
269+
"slug": "calculator",
270+
"description": "Basic four-function calculator with keyboard support and clear UI.",
271+
"category": "Mini Data",
272+
"categoryKey": "data",
273+
"difficulty": "easy"
274+
},
275+
{
276+
"title": "Stopwatch",
277+
"slug": "stopwatch",
278+
"description": "Start, pause, reset, and lap tracking using high-precision timing.",
279+
"category": "Productivity",
280+
"categoryKey": "productivity",
281+
"difficulty": "easy"
282+
},
283+
{
284+
"title": "Countdown Timer",
285+
"slug": "countdown-timer",
286+
"description": "Countdown with start/pause/reset and a finish alert.",
287+
"category": "Productivity",
288+
"categoryKey": "productivity",
289+
"difficulty": "easy"
290+
},
291+
{
292+
"title": "Unit Converter",
293+
"slug": "unit-converter",
294+
"description": "Convert between length, temperature, and weight units instantly.",
295+
"category": "Mini Data",
296+
"categoryKey": "data",
297+
"difficulty": "easy"
298+
},
299+
{
300+
"title": "Drawing Canvas",
301+
"slug": "drawing-canvas",
302+
"description": "Draw on a canvas with brush size/colors, clear, and save.",
303+
"category": "Fun UI / Visual",
304+
"categoryKey": "visual",
305+
"difficulty": "easy"
306+
}
266307
]

‎package-lock.json‎

Lines changed: 96 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,11 @@
2020
"homepage": "https://github.com/mohit-22/vanilla-verse#readme",
2121
"devDependencies": {
2222
"live-server": "^1.2.2"
23+
},
24+
"dependencies": {
25+
"safe-validate-json-schema": "^0.1.0"
26+
},
27+
"directories": {
28+
"test": "test"
2329
}
2430
}

‎projects/calculator/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Calculator | Vanilla Verse</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<header><h1>Calculator</h1></header>
11+
<main id="app">
12+
<!-- TODO: Implement basic calculator UI (display + buttons 0-9, ., +, -, ×, ÷, =, C, ±, %) -->
13+
<!-- TODO: Wire up interactions and keyboard support -->
14+
<!-- TODO: Handle edge cases (divide by zero, multiple decimals, operator chaining) -->
15+
</main>
16+
<script defer src="main.js"></script>
17+
</body>
18+
</html>

‎projects/calculator/main.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* TODO: Calculator logic
3+
* - Render/display current input and result
4+
* - Support operations: +, -, *, /, %, ±, decimal
5+
* - Keyboard support (numbers, operators, Enter for =, Backspace)
6+
* - Prevent invalid inputs (multiple decimals, divide by zero)
7+
* Optional:
8+
* - Expression history
9+
* - Theme toggle
10+
*/
11+
12+
document.addEventListener('DOMContentLoaded', () => {
13+
console.log('Calculator app ready');
14+
// TODO: Build UI or select existing DOM nodes and attach event listeners
15+
});

‎projects/calculator/styles.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* TODO: Style the Calculator UI (grid of buttons, responsive layout, accessible focus states) */
2+
:root {
3+
--bg: #0f172a;
4+
--fg: #e2e8f0;
5+
--accent: #22d3ee;
6+
--panel: #111827;
7+
}
8+
* { box-sizing: border-box; }
9+
body {
10+
margin: 0;
11+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
12+
background: var(--bg);
13+
color: var(--fg);
14+
min-height: 100vh;
15+
display: grid;
16+
place-items: center;
17+
}
18+
#app { width: min(92vw, 420px); }

‎projects/countdown-timer/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Countdown Timer | Vanilla Verse</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<header><h1>Countdown Timer</h1></header>
11+
<main id="app">
12+
<!-- TODO: Inputs for hours, minutes, seconds -->
13+
<!-- TODO: Controls: Start, Pause/Resume, Reset -->
14+
<!-- TODO: Visual progress ring/bar and alert sound on completion -->
15+
</main>
16+
<script defer src="main.js"></script>
17+
</body>
18+
</html>

‎projects/countdown-timer/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* TODO: Countdown timer logic
3+
* - Parse input time; validate non-negative
4+
* - Tick down every 1000ms (or with performance.now for accuracy)
5+
* - Pause/Resume; Reset
6+
* - Trigger completion callback: sound, alert, or visual flash
7+
* Optional: Save last used time to localStorage
8+
*/
9+
10+
document.addEventListener('DOMContentLoaded', () => {
11+
console.log('Countdown timer ready');
12+
// TODO: Implement timer mechanics and UI bindings
13+
});

‎projects/countdown-timer/styles.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* TODO: Style countdown timer inputs, controls, and progress indicator */
2+
:root {
3+
--bg: #0b1020;
4+
--fg: #f1f5f9;
5+
--accent: #f59e0b;
6+
}
7+
* { box-sizing: border-box; }
8+
body {
9+
margin: 0;
10+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
11+
background: var(--bg);
12+
color: var(--fg);
13+
min-height: 100vh;
14+
display: grid;
15+
place-items: center;
16+
}
17+
#app { width: min(92vw, 600px); }

‎projects/drawing-canvas/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Drawing Canvas | Vanilla Verse</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<header><h1>Drawing Canvas</h1></header>
11+
<main id="app">
12+
<!-- TODO: <canvas> area with drawing via mouse/touch -->
13+
<!-- TODO: Controls: color picker, brush size, clear, save as PNG -->
14+
<!-- TODO: Optional: eraser mode, background grid, undo/redo -->
15+
</main>
16+
<script defer src="main.js"></script>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)