Build Your First Mini App

Real-world analogy

What is it?

A mini app is a small, self-contained program that does one useful thing. Today we're building a console app that stores a user's name, checks the time of day, and prints a personalized greeting. It uses variables, string concatenation, if/else logic, and console.log — the essential building blocks of every program ever written.

Real-world relevance

Every massive app started as something tiny. Facebook started as a simple profile page. Google started as a search box. Your mini app is the first step on that same journey. The skills you learn here — variables, strings, conditionals — are used in EVERY programming language and EVERY application.

Key points

• console.log() — Your Voice — console.log() is how your program talks to you. Whatever you put inside the parentheses gets printed to the screen. It's your program's voice — and your best debugging friend. Use it to check values, show messages, and verify your code is working: console.log("It works!").
• Variables — Storing Information — Variables are named containers that hold data. Use let to create one: let myName = "Alex". Now 'myName' holds the text 'Alex' and you can use it anywhere in your code. Use const if the value should never change: const PI = 3.14. Pick descriptive names so your code reads like English!
• String Concatenation — Joining Text — You can join (concatenate) text using the + sign: "Hello, " + "World!" gives you "Hello, World!". You can mix variables and text: "My name is " + myName. Even better, use template literals with backticks: `My name is ${myName}` — this is the modern, cleaner way to combine text and variables.
• Running a Script — Save your code in a .js file (like app.js) and run it by typing node app.js in the terminal. The computer reads your file from top to bottom and executes each line. If there's an error, it tells you which line has the problem. Save, run, check — that's the cycle!
• User Input Concepts — Programs can ask users for information! In the browser, prompt("What is your name?") shows a popup. In Node.js, you can use the readline module to read from the terminal. For now, we'll simulate input by storing values in variables — the concept is the same: your program receives data and responds to it.
• if/else — Making Decisions — Programs can make decisions! 'if' checks a condition — if it's true, run this code. 'else' runs different code when the condition is false. Example: if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); }. This is how programs react differently based on data.
• Putting It All Together — A real program combines all these pieces: store data in variables, join text with concatenation, make decisions with if/else, and show results with console.log. That's what we're building today — a mini app that greets users differently based on their name and time of day!

Code example

// My First Mini App: The Greeter!
// Save this as greeter.js and run: node greeter.js

// Step 1: Store the user's info in variables
const userName = "Alex";
const userAge = 25;
const currentHour = new Date().getHours(); // 0-23

// Step 2: Create a greeting based on time of day
let greeting;

if (currentHour < 12) {
  greeting = "Good morning";
} else if (currentHour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

// Step 3: Build the message using template literals
const message = `${greeting}, ${userName}! You are ${userAge} years old.`;
console.log(message);

// Step 4: Add some fun conditional logic
if (userAge < 13) {
  console.log("Wow, you're starting young! Future coding prodigy!");
} else if (userAge < 18) {
  console.log("Awesome! You're ahead of most adults!");
} else if (userAge < 30) {
  console.log("Perfect time to learn — your career will thank you!");
} else {
  console.log("It's never too late — many great devs started after 30!");
}

// Step 5: A simple counter
console.log("\nLet's count to 5:");
for (let i = 1; i <= 5; i++) {
  console.log(`  ${i}...`);
}
console.log("Blast off! You just wrote a real program!");

Line-by-line walkthrough

1. 1. Comment: The name of our mini app!
2. 2. Comment: How to save and run this file
3. 3.
4. 4. Comment: Step 1 — creating our data
5. 5. Creating a constant variable to store the user's name as text
6. 6. Creating a constant for the user's age as a number
7. 7. Getting the current hour (0-23) from the computer's clock
8. 8.
9. 9. Comment: Step 2 — time-based greeting
10. 10. Declaring 'greeting' with let because we'll change its value below
11. 11.
12. 12. Checking if it's before noon (hour 0-11)
13. 13. If true, set greeting to morning
14. 14. 'else if' checks another condition — is it before 6 PM?
15. 15. If true, set greeting to afternoon
16. 16. 'else' catches everything else — must be evening/night
17. 17. Set greeting to evening
18. 18. Closing the if/else block
19. 19.
20. 20. Comment: Step 3 — building the output message
21. 21. Using template literals (backticks) with ${} to insert variables into text
22. 22. Printing the complete personalized message!
23. 23.
24. 24. Comment: Step 4 — more conditional fun
25. 25. Checking if user is under 13
26. 26. Print an encouraging message for young learners
27. 27. 'else if' for teenagers (13-17)
28. 28. Encouragement for teens
29. 29. 'else if' for young adults (18-29)
30. 30. Career-focused encouragement
31. 31. 'else' for everyone 30 and over
32. 32. Motivation for career changers
33. 33. Closing the if/else block
34. 34.
35. 35. Comment: Step 5 — a simple loop
36. 36. A blank line for visual spacing in output
37. 37. A 'for' loop: start at 1, go while i<=5, add 1 each time
38. 38. Print each number with formatting
39. 39. Closing the loop
40. 40. A celebratory final message — you did it!

Spot the bug

const userName = "Alex"
const greeting = "Hello, " + username;
consol.log(greeting);

if userName === "Alex" {
  console.log("Welcome back!");
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• JavaScript Tutorial for Beginners (Programming with Mosh)
• JavaScript First Steps (MDN Web Docs)
• JavaScript.info — Hello World (JavaScript.info)