Compilation of my personal projects
Project 1 - Info Card Generator Project 2 - Tip Calculator
Project 1 - Info Card Generator Project 2 - Basics Tip Calculator
Goal: Take user input (or hardcoded values first) and compute/display info.
What it should do: Store name, age, height, favorite number Do simple operations: age in 5 years height converted (cm → m or vice versa) favorite number multiplied/divided
What you learn: Variables Arithmetic operators Basic thinking in “data → transformation → output”
Don’t: Use functions yet Don’t touch DOM yet (stay console-based first)
Input: bill amount + tip percentage Output: total amount
What you learn: Operator precedence Working with percentages
Input: age Output: child / teen / adult / senior
What you learn: if / else if / else Comparison operators
Edge thinking: Ask yourself: What happens if input is negative? What if input is not a number?
Hardcoded values: username password
User input: username + password attempt
Output: success / fail message
What you learn: Logical operators (&&, ||) Condition chaining
Don’t: Build UI yet Don’t overcomplicate security (this is logic practice only)
intentionally break things: wrong variable names missing values NaN outputs
Then fix them using: console.log() browser dev tools
What you learn: Reading errors Stack traces Debugging mindset
Search terms: “Chrome DevTools console debugging basics” “JavaScript NaN why it happens”
Break operations into functions: add() subtract() multiply() divide()
What you learn: Functions as reusable logic blocks Parameters vs return values
Key mindset shift: Stop repeating logic. Start abstracting.
Input: name + time of day Output: “Good morning, RA”
What you learn: Function inputs/outputs String building logic
Secret number (hardcoded) User guesses (simulate input for now)
Output: too high / too low / correct
What you learn: Breaking problems into steps Thinking before coding
Don’t: Jump to UI Focus on logic flow only
Project 9: “Error Hunt Challenge” You deliberately: remove variables misspell functions break expressions
Then write: what error happened what line caused it why it happened
What you learn: Not fear errors reading stack traces
Search: “ReferenceError vs TypeError JavaScript”
Project 10: “Messy to Clean Refactor” Take any earlier project and: rename variables properly split logic into functions remove repetition
What you learn: Readability Maintainability Code structure discipline
Don’t: Add new features Only improve structure
Project 11: “Shopping List (console version)” Add items to array Print list Loop through items
What you learn: arrays push() for loops
Project 12: “Score Average Calculator” Array of scores Calculate average
What you learn: looping + math logic together
Project 13: “Counter App” Buttons: +1 -1 reset
What you learn: DOM selection event listeners updating UI
Search: “MDN addEventListener click”
Project 14: “Color Changer” Button changes background color randomly
What you learn: DOM + randomness + events
Project 15: “To-Do List (basic UI)” Add task Show list
What you learn: arrays + DOM together
Project 16: “Student Profile Object” name, age, grades method: calculate average
What you learn: object properties methods
Project 17: “Book Object Library (mini)” array of book objects display titles
What you learn: objects inside arrays