Git - Guided Practice

Git workflow: The Very Serious Banana App 🍌

In this exercise, you will practice the basic Git workflow:

Initializing a repository
Making commits
Creating a branch
Making changes
Merging back into main

We will do all of this while building the most important app of our time:
A webpage about bananas.

🧰 Step 1: Create the Project

Create a new folder called:
```
banana-app
```
Open the folder in VS Code.
Inside the folder, create a file called:
```
index.html
```
Add the following basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Banana App</title>
</head>
<body>
  <h1>🍌 Welcome to the Banana App</h1>
  <p>Bananas are serious business.</p>
</body>
</html>

🧱 Step 2: Initialize the Git Repository

Open the Terminal in VS Code.
Run:

git init

Check the status:

git status

💾 Step 3: First Commit (Main Banana Timeline)

git add .
git commit -m "Initial banana app"

🌱 Step 4: Create a New Branch

git checkout -b banana-facts

✏️ Step 5: Make Changes on the Branch

Add the following below the paragraph in index.html:

<h2>🍌 Banana Facts</h2>
<ul>
  <li>Bananas are berries.</li>
  <li>They are radioactive (but chill).</li>
  <li>Minions approve.</li>
</ul>

💾 Step 6: Commit the Branch Changes

git add .
git commit -m "Add extremely important banana facts"

🔀 Step 7: Merge Back Into Main

git checkout main
git merge banana-facts

🧹 Step 8: Optional Cleanup

git branch -d banana-facts

🍌 Mission accomplished.

Variables, Data Types, and Operators

`let` and `const`

1. `let`

Use for variables whose values are expected to change.
Provides block scope and allows reassignment.

Syntax:

let count = 10;
count = 15; // Reassigning the variable

Exercise: Declare a variable using let to store your favorite number. Reassign it to a different number and print both values to the console.

2. `const`

Use for variables whose values should not change.
Must be initialized at the time of declaration.

Syntax:

const name = "David";
name = "John"; // Error: Cannot reassign a const variable

Exercise: Create a const variable to store your birth year. Try reassigning it and observe what happens. Print the original value to the console.

Data Types

3. Strings

Used for text. Can be enclosed in single quotes, double quotes, or backticks.

Syntax:

const greeting = 'Hello';
const name = "David";
const message = `Welcome, ${name}!`;

Exercise: Create a string variable to store your favorite quote. Use template literals to include the quote and its author, then print it to the console.

4. Numbers

Includes integers, decimals, and negatives.
Syntax:
```
const age = 25;
const price = 19.99;
```

Exercise: Declare a variable to store the price of your favorite snack. Multiply it by the number of snacks in a box to calculate the total cost and print the result.

5. Booleans

Represents logical values: true or false.

Commonly used in conditional statements.

let isActive = true;
let hasPermission = false;

6. Arrays

Ordered lists of values that can store elements of different types.

Syntax:

const colors = ["red", "green", "blue"];

7. Objects

Collections of key-value pairs (properties).

Syntax:

const person = {
  firstName: "Jane",
  age: 30
};

Operators

8. Arithmetic Operators

+, -, *, /, % for calculations.

Syntax:

let sum = 10 + 20;
let remainder = 15 % 4;

9. Comparison Operators

==, != for equality checks.
===, !== for strict equality checks.

Syntax:

let isEqual = (5 === "5"); // false, strict equality

Exercise: Compare two numbers using both == and ===. Print the results and explain the difference in your comments.

10. Logical Operators

&& (and), || (or), ! (not).
Syntax:
```
let passed = true && false; // false
```

Exercise: Create two boolean variables representing two tasks you need to complete. Use logical operators to determine if both tasks are completed or at least one is completed. Print the results.