🧮 Calculator – Full Tutorial

📝 Step-by‑Step

1. HTML structure: Create a div with class calculator containing a display area and a div.buttons with all 20 buttons. Each button calls a JavaScript function via onclick.
2. CSS Grid layout: Use display:grid; grid-template-columns: repeat(4, 1fr) to arrange buttons in a 4‑column grid. Style the display with a dark background and monospace font.
3. JavaScript logic: Keep the current input in a string variable. The appendValue() function adds characters. clearDisplay() resets to '0'. deleteLast() removes the last character.
4. Calculation: In calculate(), replace the display symbols (×, ÷, −) with real operators (*, /, -) and use eval() to compute the result. Wrap in a try/catch to handle errors like division by zero.

💡 Pro Tips

• Always reset currentInput to '0' when the user clicks an operator after a calculation.
• Use parseFloat().toString() to remove trailing zeros after computation.

📝 To‑Do List – Full Tutorial

📝 Step‑by‑Step

1. Data model: Store tasks as an array of objects: { text: "Buy milk", completed: false }.
2. LocalStorage: Use JSON.stringify() and JSON.parse() to save/load the array.
3. Rendering: Write a render() function that clears the <ul> and rebuilds it from the array. Attach click listeners to check and delete buttons using addEventListener (event delegation is cleaner).
4. Toggle & Delete: toggle(i) flips the completed boolean; del(i) uses splice(i,1) to remove the task. Always call save() and render() after changes.
5. Add new task: On button click (or Enter key), push a new object and update the UI.

💡 Pro Tips

• Wrap your code in an IIFE (function(){…})() to avoid polluting the global scope.
• Always trim the input to prevent empty tasks.

🎮 Tic‑Tac‑Toe – Full Tutorial

📝 Step‑by‑Step

1. Board representation: Use a 9‑element array (board) where each index corresponds to a cell. Initially all empty strings.
2. Win combinations: Store the 8 possible winning index triplets in an array of arrays.
3. Click handling: Attach a single listener to each cell. Use data-index to know which cell was clicked. If the cell is empty and the game is active, place the current player's mark.
4. Win check: After every move, use wins.some() and c.every(i => board[i] === currentPlayer) to test for a winner.
5. Highlight: If a win is found, add a .win class to the winning cells for a pop animation.

💡 Pro Tips

• Use board.every(c => c !== '') to detect a draw.
• Disable further clicks by toggling gameActive.

🐍 Snake Game – Full Tutorial

📝 Step‑by‑Step

1. Canvas setup: Create a <canvas> element (400×400) and get its 2D context.
2. Snake data: Use an array of {x, y} objects. The head is at index 0. Move by adding a new head (unshift) and removing the tail (pop) unless food is eaten.
3. Food: Generate random grid‑aligned coordinates. Make sure it doesn't overlap the snake.
4. Game loop: Use setInterval(move, 100) to advance the snake every 100ms. Inside move(), check for wall or self‑collision.
5. Direction: Listen for arrow keys and change direction only if the new direction is not opposite to the current one.

💡 Pro Tips

• Clear the canvas each frame with clearRect() (or by redrawing the background).
• Use grid variable (10px) to keep movement aligned.