Midterm Review

Preparing for the Midterm Exam

CSCI 4513

Week 7, Lecture 14

Topics Covered

🎯 HTML/CSS (Forms, Grid)
🎯 JavaScript Fundamentals
🎯 OOP Patterns & ES6
🎯 Async/APIs & Testing

Norse Mythology Connection

Odin's Ordeal on Yggdrasil

Odin's self-sacrifice reveals true mastery, just as the midterm tests what you've internalized under pressure without external support.

The Tale:

Odin, despite being the Allfather and already possessing great wisdom from Mimir's Well, sought even deeper knowledge—understanding of the runes, the fundamental symbols that held power over reality itself. But this knowledge couldn't be given freely; it required the ultimate sacrifice.

Odin pierced himself with his own spear, Gungnir, and hung himself from Yggdrasil, the World Tree. For nine days and nine nights, he hung there without food or water, wounded and exposed to the elements. He existed in a state between life and death, suffering alone with no one to help or comfort him. On the ninth night, at the moment when he had given everything, the runes revealed themselves to him. With a final cry, Odin grasped the runes and fell from the tree, having gained knowledge that transformed him—he could now use the runes to heal, to curse, to wake the dead, to protect in battle, and to shape fate itself.

The Ordeal of Testing

Odin's Sacrifice

Hung alone without help
No comfort, no resources
Nine days of suffering
Runes revealed true mastery
Transformed by the ordeal

Your Midterm

Work alone without Stack Overflow
No documentation, no resources
Time pressure and anxiety
Shows what's been internalized
Proves capability under pressure

💡 Key Insight: The "runes" you're mastering are fundamental patterns—async operations, data structures, OOP principles, testing patterns. Master these and you can "shape digital reality."

Reflection Questions

Click each card to reveal thoughts!

❓ Question 1

Odin already had significant power before hanging on Yggdrasil, yet he sought deeper knowledge. Why is testing important even when you think you understand something?

❓ Question 2

The runes only revealed themselves after nine days of suffering. What is the relationship between struggle and true learning?

❓ Question 3

Odin hung alone without help. How does this isolation change what the test measures? What's the difference between understanding with resources versus alone?

HTML & CSS Review

Topics Covered:

Lecture 2: HTML Forms & Validation
Lecture 3: CSS Grid Layout

HTML Forms Quick Review

Key Form Elements

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <label for="age">Age:</label>
  <input type="number" id="age"
         min="18" max="120">
</form>

Validation Attributes

required
minlength, maxlength
min, max
pattern (regex)
type (email, number, date)

Dialog Element Quick Review

const dialog = document.querySelector('dialog');

// Open as modal (with backdrop)
dialog.showModal();

// Open without modal backdrop
dialog.show();

// Close dialog
dialog.close();

// Style the backdrop
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

💡 Remember: showModal() includes backdrop and prevents interaction with other elements!

CSS Grid Quick Review

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.item {
  grid-column: span 2;    /* Span 2 columns */
  grid-row: 1 / 3;        /* From line 1 to 3 */
}

/* Responsive grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

JavaScript Fundamentals Review

Topics Covered:

Lecture 4: Objects & Constructors
Lecture 5: Factory Functions & Closures
Lecture 6: ES6 Classes

Constructor Functions

function Player(name, level) {
  this.name = name;
  this.level = level;
}

// Add methods to prototype
Player.prototype.greet = function() {
  return `Hello, I'm ${this.name}!`;
};

const player1 = new Player('Thor', 100);
console.log(player1.greet()); // "Hello, I'm Thor!"

⚠️ Remember: Must use new keyword! Methods go on prototype, not in constructor.

Factory Functions & Closures

function createPlayer(name, level) {
  let health = 100;  // Private variable

  return {
    name,  // Public property
    level,

    getHealth() {  // Public method accessing private var
      return health;
    },

    takeDamage(damage) {
      health -= damage;
    }
  };
}

const player = createPlayer('Odin', 50);
console.log(player.health);  // undefined (private!)
console.log(player.getHealth());  // 100

ES6 Classes

class Player {
  #health = 100;  // Private field

  constructor(name, level) {
    this.name = name;
    this.level = level;
  }

  greet() {
    return `I'm ${this.name}, level ${this.level}`;
  }

  get health() {
    return this.#health;
  }

  static compare(p1, p2) {
    return p1.level - p2.level;
  }
}

class Warrior extends Player {
  constructor(name, level, weapon) {
    super(name, level);
    this.weapon = weapon;
  }
}

Modern JavaScript Review

Topics Covered:

Lecture 7: ES6 Modules & npm
Lecture 8: JSON & OOP
Lecture 9: Linting, Validation, ES Versions

ES6 Modules

Exporting

// Named exports
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// Default export
export default class Game {
  // ...
}

Importing

// Named imports
import { add, PI } from './math.js';

// Default import
import Game from './game.js';

// Import all
import * as math from './math.js';

Webpack & JSON

Webpack Basics

Bundles modules for browsers
Entry point → Output bundle
Loaders for CSS, images, etc.
Plugins extend functionality

JSON Methods

// Parse JSON string
const obj = JSON.parse('{"a":1}');

// Convert to JSON
const str = JSON.stringify(obj);

Asynchronous JavaScript Review

Topic Covered:

Lecture 10: Callbacks, Promises, Async/Await, Fetch API

Promises

// Creating a promise
const promise = new Promise((resolve, reject) => {
  if (success) {
    resolve(data);
  } else {
    reject(error);
  }
});

// Consuming a promise
promise
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log('Done'));

💡 States: Pending → Fulfilled OR Rejected

Async/Await & Fetch

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// Using the function
getData().then(data => console.log(data));

⚠️ Remember: await only works inside async functions!

Professional Development Review

Topics Covered:

Lecture 12: Intermediate Git
Lecture 13: Testing with Jest

Git Commands

# Amend last commit
git commit --amend

# Interactive rebase (last 3 commits)
git rebase -i HEAD~3

# Reset (soft keeps changes staged)
git reset --soft HEAD~1

# Revert (safe, creates new commit)
git revert HEAD

# Force push (DANGEROUS!)
git push --force-with-lease

⚠️ Never rewrite history that's been pushed to shared branches!

Jest Testing

describe('Calculator', () => {
  test('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  test('throws on invalid input', () => {
    expect(() => add('a', 2)).toThrow();
  });
});

// Common matchers
expect(value).toBe(4);
expect(value).toEqual({a: 1});
expect(value).toBeTruthy();
expect(value).toContain('item');
expect(fn).toHaveBeenCalled();

Practice Question: Async

// What will this output?
async function test() {
  console.log('A');
  await Promise.resolve();
  console.log('B');
}

console.log('C');
test();
console.log('D');

Click to reveal answer

Practice Question: Prototypes

function Dog(name) {
  this.name = name;
}

Dog.prototype.bark = function() {
  return this.name + ' says woof!';
};

const dog1 = new Dog('Rex');
const dog2 = new Dog('Max');

dog1.bark = function() {
  return 'LOUD BARK!';
};

// What do these output?
console.log(dog1.bark());
console.log(dog2.bark());

Click to reveal answer

Practice Question: Closures

function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
    },
    getCount() {
      return count;
    }
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1.increment();
counter1.increment();
counter2.increment();

// What do these output?
console.log(counter1.getCount());
console.log(counter2.getCount());

Click to reveal answer

How to Study for the Midterm

Study Strategy:

✅ Review all lecture slides (especially code examples)
✅ Revisit your completed homework projects
✅ Practice writing code from memory
✅ Work through the practice questions in this review
✅ Understand concepts, don't just memorize syntax
✅ Test yourself on async/await, prototypes, closures
✅ Review Git commands and workflow
✅ Practice Jest test writing

Exam Format & Tips

What to Expect

Multiple choice questions
Code reading/analysis
Short answer coding
Debugging exercises
Conceptual questions

Test-Taking Tips

Read questions carefully
Check for edge cases
Trace code execution
Don't overcomplicate
Manage your time

📅 Next Class: Midterm Exam

📚 Coverage: All material from Lectures 1-14

💪 You've got this! The "runes" you've mastered will serve you well.