Mini Projects

small apps, one idea each. Steal the pattern, not the CSS.

20 programs · open one, then the next

Start with Todo List

01Todo ListBeginnerCreate a todo list applicationOpen example →jsclass TodoList { constructor() { this.todos = []; }
02CalculatorBeginnerBuild a calculatorOpen example →jsclass Calculator { add(a, b) { return a + b; } subtract(a, b) { return a - b; } multiply(a, b) { return a * b; }
03StopwatchBeginnerCreate a stopwatchOpen example →jsclass Stopwatch { constructor() { this.startTime = null; this.elapsed = 0; } start() { this.startTime = Date.now() - this.elapsed; } stop() { if(this.startTime) this.elapsed = Date.now() - this.startTime; }
04Countdown TimerIntermediateBuild a countdown timerOpen example →jsclass Countdown { constructor(target) { this.target = target; } start(callback) { const interval = setInterval(() => {
05Quiz AppIntermediateCreate a quiz applicationOpen example →jsclass Quiz { constructor(questions) { this.questions = questions; this.score = 0; this.current = 0; } answer(answer) { if(answer === this.questions[this.current].correct) this.score++; this.current++; } isComplete() { return this.current >= this.questions.length; }
06Weather AppIntermediateBuild a weather applicationOpen example →jsasync function getWeather(city) { const response = await fetch(`https://api.weather.com/${city}`); const data = await response.json(); return { temp: data.temp, condition: data.condition };
07Image CarouselBeginnerCreate an image carouselOpen example →jsclass Carousel { constructor(images) { this.images = images; this.current = 0; } next() { this.current = (this.current + 1) % this.images.length; } prev() { this.current = (this.current - 1 + this.images.length) % this.images.length; }
08Modal/LightboxBeginnerBuild a modal/lightbox componentOpen example →jsclass Modal { constructor(content) { this.content = content; this.isOpen = false; } open() { this.isOpen = true; } close() { this.isOpen = false; }
09Tabs/AccordionBeginnerCreate tabs and accordion componentsOpen example →jsclass Tabs { constructor() { this.active = 0; } setActive(index) { this.active = index; } getActive() { return this.active; }
10Autocomplete SearchIntermediateBuild autocomplete searchOpen example →jsclass Autocomplete { constructor(items) { this.items = items; } search(query) { return this.items.filter(item => item.toLowerCase().includes(query.toLowerCase())); } }
11Shopping CartIntermediateCreate a shopping cartOpen example →jsclass ShoppingCart { constructor() { this.items = []; } add(item) { this.items.push(item); } remove(id) { this.items = this.items.filter(i => i.id !== id); }
12Tic-Tac-ToeIntermediateBuild a tic-tac-toe gameOpen example →jsclass TicTacToe { constructor() { this.board = Array(9).fill(null); this.currentPlayer = 'X'; } makeMove(index) { if(!this.board[index]) { this.board[index] = this.currentPlayer; this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X'; } } checkWinner() { /* Check win conditions */ return null; }
13Snake GameAdvancedCreate a snake gameOpen example →jsclass Snake { constructor() { this.body = [{x: 10, y: 10}]; this.direction = 'right'; } move() { /* Move snake */ } grow() { /* Grow snake */ }
14Memory GameIntermediateBuild a memory card gameOpen example →jsclass MemoryGame { constructor(cards) { this.cards = cards; this.flipped = []; } flip(index) { this.flipped.push(index); } checkMatch() { /* Check if flipped cards match */ return false; }
15Drag and Drop ListIntermediateCreate a sortable drag and drop listOpen example →jsclass DragDropList { constructor(items) { this.items = items; } dragStart(index) { this.draggedIndex = index; } dragOver(index) { /* Handle drag over */ }
16Form BuilderAdvancedBuild a dynamic form builderOpen example →jsclass FormBuilder { constructor() { this.fields = []; } addField(type, label) { this.fields.push({type, label}); } removeField(index) { this.fields.splice(index, 1); }
17Chat ApplicationAdvancedCreate a chat applicationOpen example →jsclass Chat { constructor() { this.messages = []; } send(message) { this.messages.push({text: message, time: Date.now()}); } getMessages() { return this.messages; }
18Data Table with Sort/FilterIntermediateBuild a sortable and filterable data tableOpen example →jsclass DataTable { constructor(data) { this.data = data; this.sortedBy = null; this.filter = ''; } sort(column) { this.sortedBy = column; this.data.sort((a, b) => a[column] - b[column]); } filterData(query) { this.filter = query; return this.data.filter(row => Object.values(row).some(v => String(v).includes(query))); }
19Progress BarBeginnerCreate a progress bar componentOpen example →jsclass ProgressBar { constructor(max) { this.value = 0; this.max = max; } setValue(value) { this.value = Math.min(value, this.max); } getPercentage() { return (this.value / this.max) * 100; }
20Infinite ScrollIntermediateImplement infinite scrollOpen example →jsclass InfiniteScroll { constructor(loadMore) { this.loadMore = loadMore; this.page = 1; } init() { window.addEventListener('scroll', () => { if(window.innerHeight + window.scrollY >= document.body.offsetHeight) { this.loadMore(this.page++); } }); } }