PF 101 study hub

PF 101 · Stretch · ~90 min

For You → Campus Feed

Optional harder lab after Ride Start. Write the algorithm that decides which campus post hits the top of the phone.

Final output

What you can create

Dunk reel at 42. Expired crush at 0. Like and Watch re-rank live.

Open full screen

Before you start

Not Fighter Arena

New folder. No Fighter, no attack(), no health. Type every .js file. If Feed uses instanceof, start that file over.

Full typed walkthrough: ACTIVITY-campus-feed.md

STEP 1

Type the parent

  1. 1

    Create js/content.js.

  2. 2

    Private #likes. Public like() and getLikes().

  3. 3

    score() throws until a subclass writes it.

js/content.jstype this
class Content {
  #likes = 0;
  constructor(creator, caption) {
    this.creator = creator;
    this.caption = caption;
  }
  like() { this.#likes += 1; }
  getLikes() { return this.#likes; }
  score() { throw new Error('implement score()'); }
}
globalThis.Content = Content;

If main.js can write post.likes = 999, encapsulation is missing.

STEP 2

Photo, Story, Reel

  1. 1

    Photo: score = likes.

  2. 2

    Story: score = likes × 3, or 0 if hoursOld ≥ 24.

  3. 3

    Reel: score = likes × 2 + watch seconds. Private #watchSeconds.

score()memorise these
Photo  →  return this.getLikes()
Story  →  expired ? 0 : this.getLikes() * 3
Reel   →  return this.getLikes() * 2 + this.getWatchSeconds()

Same method name. Three formulas. That is the hook.

STEP 3

Sort without asking the type

  1. 1

    Feed HAS posts. It does not extend Content.

  2. 2

    forYou() sorts by score() descending.

  3. 3

    No instanceof. No if (kind === 'reel').

js/feed.jspolymorphism
class Feed {
  #posts = [];
  add(post) { this.#posts.push(post); }
  forYou() {
    return this.#posts.slice().sort((a, b) => b.score() - a.score());
  }
}

If you add Poll later, Feed must stay untouched.

STEP 4

Campus posts on the For You page

  1. 1

    Seed one Photo, one expired Story, one fresh Story, one Reel.

  2. 2

    Like them. Watch the reel. Use your campus captions.

  3. 3

    Draw cards from forYou() into #feed.

  4. 4

    Close the laptop and write Reel.score() on paper.

The dunk reel beats the 30-hour crush story. Do the math: 42 vs 0.

Done checklist

Submit

Campus Feed repo only. Recite the formulas with the file closed.

DeliverableWhat to turn in
RepoGitHub URL for campus-feed
DemoPhone on screen — why rank 1 won
DefenseWrite Reel.score() on paper

Final output

Show this when you defend

Same four posts and formulas as the paper drill. Point at rank 1 and say why it won. Feed still only calls score().

Open the final For You phone

Still on Warrior vs Witch? Finish the midterm roster then start a new folder.