──────────────────────────────────────────────────

Web Development & Expense Tracker Tutorial

A beginner's guide to web development through building an expense tracker

──────────────────────────────────────────────────

Part 1: Understanding the Basics 🌱

Web development consists of three core technologies that work together:

1. HTML → The Structure (“Bones” of your website)
2. CSS → The Style (“Paint & Decor” for your website)
3. JavaScript → The Brain (“Logic” that makes your website interactive)

Let’s break them down in simple terms:

──────────────────────────────────────────────────

JavaScript (JS) - The Brain 🧠

JavaScript makes your web page interactive. Think of it like the “smart part” of your website that reacts to user clicks, input, or other events.

──────────────────────────────────────────────────

Key JavaScript Concepts

1. Variables • Think of variables as labeled boxes where you store information.
   • Two important types in modern JS:

   • let (this value can change later, like your current balance)
   • const (this value stays the same, like a fixed account number)

2. Data Types • Numbers (e.g., 500, 0.08) – used for math or money calculations.
   • Strings (e.g., "Hello", "Not enough money") – used for text.
   • Booleans (true or false) – used for yes/no decisions, like isOverBudget = true/false.
   • Arrays (e.g., [1000, 500, 200]) – used for lists of items or values.
   • Objects (e.g., { income: 5000, expenses: 3000 }) – used for grouping related info under one name.

3. Functions • Think of functions as mini-programs or “recipes” in your code.
   • You can call (run) them anytime to complete a certain task (like adding numbers or checking budget).

4. Scope • Scope means “where can your variable be used?”
   • Global Scope: A variable that everyone in your code can see.
   • Function Scope: A variable that only exists inside a particular function.
   • Block Scope: A variable that exists only within a pair of curly braces ({ ... }).

──────────────────────────────────────────────────

HTML - The Structure 🏗️

HTML is the foundation or “bones” of a web page. It describes where your text, images, and other elements go.

──────────────────────────────────────────────────

Key HTML Concepts

1. Elements
   • The basic building blocks of an HTML page (e.g., h1, p, div, button, all inside "<" and ">").
   • Each element is wrapped between tags.

2. Attributes
   • Extra settings or properties for an element (e.g., id="mainTitle", class="expenseInput").

3. Structure
   • HTML has a parent-child hierarchy (like a family tree).
   • Properly nesting elements keeps your page organized and helps with styling.

──────────────────────────────────────────────────

CSS - The Style 🎨

CSS is how you make your web page look visually appealing—like choosing paint colors and furniture in a house.

──────────────────────────────────────────────────

Key CSS Concepts

1. Selectors • Tells the browser which HTML element(s) you want to style.
   • Examples: element selectors (p {}), class selectors (.myClass {}), ID selectors (#myID {}).

2. Properties • The style you want to change (e.g., color, background-color, font-size, margin).

3. Values • How you want to change the property (e.g., color: blue, font-size: 20px, margin: 10px).

──────────────────────────────────────────────────

Part 1.5: Code Examples for Beginners 👨‍💻

Below are small, basic code snippets in JavaScript, HTML, and CSS. Try them out in your own files to see how they work.

──────────────────────────────────────────────────

JavaScript Examples

──────────────────────────────────────────────────

1. Variables and Data Types

Example: Store some money amounts and messages.

// Numbers - for expenses and calculations
let myMoney = 100; // You can change this later
const taxRate = 0.08; // This stays the same

// Strings - for messages and text
let welcomeMessage = "Hello!";
let errorMessage = 'Not enough money';

// Booleans - for yes/no decisions
let isOverBudget = false;
let hasEnoughSavings = true;

// Arrays - for lists of things
let monthlyExpenses = [1000, 500, 200, 300];
let expenseNames = ['Rent', 'Food', 'Gas', 'Fun'];

// Objects - for grouping related information
let myBudget = {
  income: 5000,
  savings: 1000,
  expenses: 3000
};

──────────────────────────────────────────────────

2. Functions

Example: Reusable blocks of code to perform specific tasks.

// Simple function that adds two numbers
function addNumbers(num1, num2) {
  return num1 + num2;
}

// Function that checks if you're over budget
function checkBudget(income, expenses) {
  if (expenses > income) {
    return "You're over budget!";
  } else {
    return "You're doing great!";
  }
}

// Function that calculates total expenses
function calculateTotal(groceries, rent, utilities) {
  let total = groceries + rent + utilities;
  return total;
}

──────────────────────────────────────────────────

3. Working with the DOM (Webpage Elements)

The DOM (Document Object Model) is how JavaScript talks to particular parts of your HTML page.

// Get elements by their ID in your HTML
const submitButton = document.getElementById('submitButton');
const totalDisplay = document.getElementById('total');

// Change the text content
totalDisplay.textContent = "Total: $100";

// Respond to a button click
submitButton.addEventListener('click', function() {
  // Code that runs when button is clicked
  calculateTotal();
});

──────────────────────────────────────────────────

HTML Examples

──────────────────────────────────────────────────

1. Basic Page Structure

Every HTML page starts with the declaration, then , , and :

<!DOCTYPE html>
<html>
<head>
  <!-- This is metadata and title for the page -->
  <title>My First Page</title>
</head>
<body>
  <!-- All visible content goes here -->
  <h1>Welcome to My Page</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

──────────────────────────────────────────────────

2. Common Elements We Use

For our expense tracker, we often need titles, inputs, and buttons:

<!-- Headers (big text) -->
<h1>Main Title</h1>
<h2>Smaller Title</h2>

<!-- Input fields for user to type numbers -->
<input type="number" id="groceries" placeholder="Enter amount">

<!-- Button that triggers a JavaScript function -->
<button onclick="calculateTotal()">Calculate</button>

<!-- A container or “box” for grouping related items -->
<div class="expense-section">
  <!-- We’ll place expense inputs here -->
</div>

──────────────────────────────────────────────────

CSS Examples

──────────────────────────────────────────────────

1. Basic Styling

In a separate .css file or inside a <style> tag, you can style specific elements or classes:

/* Making text look good */
.welcome-text {
  color: blue;          /* Text color */
  font-size: 24px;      /* Font size in pixels */
  font-weight: bold;    /* Bold text */
}

/* Styling a container */
.expense-box {
  background-color: white; /* Background color of the box */
  padding: 20px;           /* Space inside the box */
  margin: 10px;            /* Space outside the box */
  border: 1px solid gray;  /* Border around the box */
}

/* Styling buttons */
.submit-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px; /* Rounded corners */
}

──────────────────────────────────────────────────

2. Layout Examples

Making content centered or spacing items side by side:

/* Center content both horizontally and vertically */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Place multiple items in a row with spacing between */
.row-layout {
  display: flex;
  gap: 20px; /* Space between items */
}

──────────────────────────────────────────────────

How These Work Together

1. HTML (Structure):

   <div class="expense-input">
     <input type="number" id="groceries">
     <button onclick="calculateTotal()">Calculate</button>
   </div>

2. CSS (Style):

   .expense-input {
     padding: 20px;
     background-color: #f0f0f0;
   }

3. JavaScript (Logic):

   function calculateTotal() {
     const groceryAmount = document.getElementById('groceries').value;
     const total = Number(groceryAmount);
     alert("Total: $" + total);
   }

──────────────────────────────────────────────────

Try It Yourself! 🎯

1. Copy these examples into your text editor (e.g., VS Code, Sublime, or even a simple Notepad).
2. Experiment by changing small things, like colors or text.
3. Refresh your browser to see what happens after each change.
4. Don’t worry if you break something—debugging is the best way to learn!

──────────────────────────────────────────────────

Part 2: Our Project 🚀

Now let’s see how we can build a small Expense Tracker using these exact concepts.

──────────────────────────────────────────────────

Basic Version (No Framework)

Located in “/BasicJS” folder in the provided sample.

1. Sign-In Page
   • Simple welcome screen with a basic sign-in button.
   • Minimal design so you can focus on logic rather than looks.

2. Expense Page
   • Sections for weekly and monthly expense inputs.
   • Input field for income.
   • Budget calculations with alert messages.

How It Works: • “index.html” sets up the input fields.
• “script.js” calculates totals when you click a button and shows alerts if you go over budget.

──────────────────────────────────────────────────

Bootstrap Version (With Framework)

Located in the root folder with files starting with “bootstrap_”.

1. Sign-In Page (bootstrap_index.html)
   • Uses Bootstrap’s card components for a professional look.
   • Automatically adjusts layout for mobile and larger screens.

2. Expense Page
   • Places input fields using Bootstrap’s grid system.
   • Looks more polished with input groups and styled buttons.

3. Styling (bootstrap_styles.css)
   • Uses Bootstrap-based classes for consistent spacing, colors, and typography.

4. JavaScript (bootstrap_script.js)
   • Same core functionality (calculations, alerts) but uses Bootstrap’s styles for nicer visuals.

──────────────────────────────────────────────────

Part 3: Understanding the Code 📚

Whether you use the Basic or Bootstrap version, the flow is similar:

1. The user opens the sign-in page (index.html).
2. After signing in, they navigate to the expenses page.
3. The user inputs their expenses and income.
4. JavaScript reads those inputs and calculates: (Expenses) vs (Income).
5. If expenses exceed income, an alert says “Over Budget!” otherwise, it says “You’re good!”

──────────────────────────────────────────────────

Part 4: Learning Tips 💡

For Absolute Beginners:

1. Start with the basic version in “/BasicJS”.
   • Focus on the connection between HTML, CSS, and JavaScript.
   • Learn what each file does.
2. Experiment!
   • Change the text in the HTML.
   • Modify colors in the CSS.
   • Add new calculations in JavaScript.
3. When you feel comfortable, compare the basic version to the Bootstrap version.
   • Notice how Bootstrap classes make styling faster.

──────────────────────────────────────────────────

Next Steps 🎯

1. Add New Features
   • Save expenses for the next time you visit the page.
   • Add categories (e.g., rent, groceries, entertainment) and create summaries.
   • Present data in charts or graphs.

2. Explore More Web Concepts
   • Use local storage to remember data.
   • Validate forms (e.g., ensure the user enters a number, not text).

3. Keep Experimenting
   • Break things on purpose to see where errors happen—this is how you learn.

──────────────────────────────────────────────────

Need Help? 🆘

• Check official Bootstrap documentation for styling help: https://getbootstrap.com
• Use your browser’s Developer Tools (F12 key) to see console messages and debug issues.
• Google any error messages you don’t understand—chances are someone else had the same problem!

──────────────────────────────────────────────────