Midterm Review

Preparing for the Midterm Exam

CSCI 4513

Week 8, Lecture 12

What's on the Midterm

HTML & CSS (L1–L3)

Emmet, SVGs, CSS units
Forms & validation
CSS Grid layout

JavaScript OOP (L4–L6)

Objects & constructor functions
Factory functions & closures
ES6 classes & inheritance

Modern JS (L7–L9)

ES6 modules, npm, Webpack
JSON & data persistence
JS real-world patterns

Professional Dev (L10–L11)

Intermediate Git
Jest & TDD

⚠️ Not on the midterm: Async/Await, Fetch API, Promises — those were skipped this semester.

Exam Format

The exam is printed and handwritten — no computer.

Part I — Fill in the Blank (40 pts)

A narrative about building a web app with 32 numbered blanks. Write the correct term, keyword, or CSS property on each line.

Part II — Matching (20 pts)

10 terms on the left, 10 definitions on the right. Write the matching letter in the box. Each definition used exactly once.

Part III — Web App Design (40 pts)

Describe a web app and explain how you'd apply at least 8 of the 10 course concepts. Graded on reasoning quality, not just naming concepts.

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, sought even deeper knowledge — understanding of the runes, the fundamental symbols that held power over reality itself. He pierced himself with his own spear, Gungnir, and hung from Yggdrasil for nine days and nine nights, wounded and without food or water. On the ninth night, the runes revealed themselves to him. With a final cry, Odin grasped them and fell — transformed. He could now heal, curse, wake the dead, protect in battle, and 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, no Google
No documentation, no notes
Time pressure and anxiety
Shows what's been internalized
Proves capability under pressure

💡 Key Insight: The "runes" you've been mastering are real — prototypes, closures, grid layouts, TDD cycles. The exam just asks you to name them and explain where you'd use them.

HTML & CSS Review

Lectures 1, 2, 3 — Know These Terms:

Emmet — VS Code shorthand plugin
SVG — XML-based scalable graphics
rem — relative to root element
vh / vw — viewport units
POST vs GET — HTTP form methods

label — linked via for/id
fieldset / legend — group related inputs
required — prevents blank submission
:invalid — CSS pseudo-class for bad input
pattern — regex validation

Forms Quick Review

Form Structure

<form action="/api" method="POST">
  <fieldset>
    <legend>Contact Info</legend>

    <label for="email">Email:</label>
    <input type="email"
           id="email"
           name="email"
           required>
  </fieldset>
  <button type="submit">Send</button>
</form>

Validation CSS

/* Red border when invalid */
input:invalid {
  border: 2px solid red;
}

/* Green border when valid */
input:valid {
  border: 2px solid green;
}

/* Blue glow on focus */
input:focus {
  border: 2px solid blue;
  box-shadow: 0 0 5px
    rgba(0,100,255,0.5);
}

CSS Grid Quick Review

/* Named layout areas */
.container {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 80px 1fr;
  grid-template-areas:
    "sidebar  header"
    "sidebar  main";
  gap: 20px;
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }

/* Responsive card grid — no media queries needed */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Know the difference: auto-fit collapses empty tracks (items expand). auto-fill keeps empty tracks (items stay minimum size).

JavaScript OOP Review

Lectures 4, 5, 6 — Know These Terms:

constructor function — blueprint called with new
new — creates object, sets this
prototype — shared method storage
prototype chain — lookup sequence to null
factory function — returns object, no new

closure — function + its lexical scope
var — function-scoped (leaks blocks)
encapsulation — hide internals, expose interface
class — ES6 constructor/prototype sugar
extends / super — inheritance
getter — get prop(), no parentheses

Constructor Functions

function Book(title, author) {
  this.title = title;
  this.author = author;
}

// Methods go on the prototype — shared, not copied
Book.prototype.info = function() {
  return `${this.title} by ${this.author}`;
};

const b1 = new Book('Prose Edda', 'Snorri');
const b2 = new Book('Beowulf', 'Unknown');

// Both share the same info method via prototype chain
console.log(b1.info()); // "Prose Edda by Snorri"

⚠️ Remember: Calling without new breaks everything — this points to the wrong thing.

Factory Functions & Closures

function createLibrary() {
  const books = [];  // Private — lives in the closure

  return {
    addBook(title) {
      books.push(title);          // Accesses private array
    },
    count() {
      return books.length;        // Still has access!
    }
  };
}

const lib = createLibrary();
lib.addBook('Prose Edda');
console.log(lib.count());   // 1
console.log(lib.books);     // undefined — private!

Key difference from constructors: No new needed. Private variables through closure, not prototype.

ES6 Classes & Inheritance

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  get info() {
    return `${this.title} by ${this.author}`;
  }
}

class RareBook extends Book {
  constructor(title, author, year) {
    super(title, author);   // Must call super() first!
    this.year = year;
  }
}

const r = new RareBook('Codex Regius', 'Unknown', 1270);
console.log(r.info);    // Getter — no parentheses!

Modern JavaScript Review

Lectures 7, 8, 9 — Know These Terms:

export — share from a module
import — receive from a module
npm — Node package manager
Webpack — module bundler

JSON.stringify() — JS → string
JSON.parse() — string → JS
localStorage — browser key-value store
package.json — project & dependency manifest

ES6 Modules

Exporting

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

// Default export (one per file)
export default class Game { }

Importing

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

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

// Rename on import
import { add as sum } from './math.js';

Webpack's job: Resolves all these import chains and emits one file the browser can load.

JSON & Data Persistence

const library = [
  { title: 'Prose Edda', author: 'Snorri' },
  { title: 'Beowulf',    author: 'Unknown' }
];

// Save to localStorage
localStorage.setItem('lib', JSON.stringify(library));

// Restore on next page load
const saved = localStorage.getItem('lib');
const restored = JSON.parse(saved);
console.log(restored[0].title);  // "Prose Edda"

JSON rules: Keys must be strings. No functions, no undefined, no circular references. Only plain data.

Professional Dev Review

Lectures 10, 11 — Know These Terms:

git rebase -i — interactive history editing
git reset --soft — undo commit, keep changes staged
git revert — safe undo (new commit)
--force-with-lease — safer force push

Jest — JS testing framework
TDD — test-driven development
describe / test / expect — test structure
red → green → refactor — TDD cycle

Jest & TDD

// capitalize.js
function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1);
}
module.exports = { capitalize };

// capitalize.test.js
const { capitalize } = require('./capitalize');

describe('capitalize', () => {
  test('capitalizes first letter', () => {
    expect(capitalize('hello')).toBe('Hello');
  });

  test('leaves rest unchanged', () => {
    expect(capitalize('hELLO')).toBe('HELLO');
  });
});

TDD Cycle: Write a failing test first → write minimum code to make it pass → refactor to clean up.

Practice: Prototype Chain

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!'; };

console.log(dog1.bark());
console.log(dog2.bark());

Click to reveal answer

Practice: Closures

function createCounter() {
  let count = 0;
  return {
    increment() { count++; },
    getCount()  { return count; }
  };
}

const c1 = createCounter();
const c2 = createCounter();

c1.increment();
c1.increment();
c2.increment();

console.log(c1.getCount());
console.log(c2.getCount());

Click to reveal answer

Practice: var vs let

function run() {
  for (var i = 0; i < 3; i++) {
    // do something
  }
  console.log(i);   // (A) What prints?
}

function run2() {
  for (let j = 0; j < 3; j++) {
    // do something
  }
  console.log(j);   // (B) What happens?
}

run();
run2();

Click to reveal answer

Practice: JSON Persistence

const settings = { theme: 'dark', fontSize: 16 };

// Save to localStorage
localStorage.setItem('prefs',
  JSON.___(settings)       // (1) Which method?
);

// On next visit — restore
const raw = localStorage.getItem('prefs');
const prefs = JSON.___(raw);  // (2) Which method?

console.log(prefs.theme);     // "dark"

Click to reveal answer

Matching Drill

Try matching these before clicking to reveal!

Terms

Prototype chain
Closure
Factory function
CSS fr unit
TDD

Definitions

Write failing test first, then implement
Proportional share of remaining grid space
Plain function that returns an object (no new)
Retains access to outer scope after it closes
Sequence JS walks to find inherited properties

Click to reveal answers

Part III Warm-Up

On the real exam you'll describe a web app and explain how you'd apply 8+ concepts. Let's practice reasoning through one now.

Concept: CSS Grid Layout

Your app: A recipe-sharing website

Draft your answer: What does Grid do in your app, and why is it the right tool?

Example strong answer

How to Study Tonight

Highest-yield activities:

Flip through all lecture slides — focus on code examples, not slides of text
For each concept, write its name and one-sentence definition from memory
Review your completed projects — Library, Admin Dashboard, Battleship
Practice saying out loud: "I would use [X] in an app because..."
Know the difference between var/let/const scoping
Know what JSON.stringify() and JSON.parse() each do and why
Know the TDD red–green–refactor cycle

⚠️ Don't waste time on: Async/Await, Promises, Fetch — not on this exam.

Exam Day Tips

Part I (Fill in Blank)

Read the full paragraph before filling anything in
Context clues are in the surrounding sentences
If unsure, skip and come back
Exact spelling matters for code keywords

Part III (Design)

Pick an app you genuinely care about
Answer both sub-questions for each concept
Reasoning > buzzwords
N/A answers still need a sentence of justification

📅 Next Class: Midterm Exam — Tuesday, March 10

📚 Coverage: Lectures 1–11 (no Async/APIs)

💪 You've got this!