Skip to main content

UNIT 26

Community Pitch Site

Every community initiative needs a website that makes the case. Build a full advocacy pitch site with animated stat counters and IntersectionObserver scroll animations.

⏱️ 7 Stages
🌿 Intermediate
⏰ 45–60 min per stage
📊 setInterval + IntersectionObserver

The Big Idea

73% of households on Standing Rock Sioux Nation lack reliable broadband. Nonprofits, community organizations, and Tribal Nations use websites to make the case for change. This unit, you build the pitch.

The Wiċhóni Digital Center is a fictional Native-led technology access hub — and you are its web designer. You will build the full advocacy site from hero to footer, then adapt the content to pitch a real community initiative of your own.

Two new JavaScript patterns: setInterval runs a function on a repeating timer so impact numbers count up from 0 when the page loads. IntersectionObserver watches elements and fires a callback the moment they scroll into the viewport — the modern, efficient way to trigger scroll animations without touching scroll events.

By the end of this unit, you’ll be able to say “I can…”

  • Use setInterval to run a function repeatedly on a timer, counting a number up from 0 to its target value
  • Read data-target attributes with el.dataset.target and convert them to numbers with parseInt
  • Stop a running interval with clearInterval when the counter reaches its target, and format numbers with .toLocaleString()
  • Build a complete advocacy website with hero, impact stats, problem, solution, plan, team, and call-to-action sections
  • Create an IntersectionObserver that watches elements and fires a callback when they enter the viewport
  • Apply opacity and translateY CSS transitions to create smooth scroll-triggered fade-in animations without scroll event listeners

What You’ll Build

A full-scale advocacy pitch site for the Wiċhóni Digital Center, a fictional Native-led community technology hub.

The site leads with a bold hero headline, then presents four animated stat counters showing the scale of the problem. The body sections make the case: problem, solution, a three-phase plan, and a leadership team. A call-to-action section closes with an email form and three ways to get involved. When you finish Stage 7, everything below the hero fades in as you scroll — one professional animation, added in under 20 lines of JS.

Impact Stats Animated counters: 73%, 4,200, 12x, 0
Problem + Solution Two-column prose + pull quote + cards
Plan + Team 3-phase plan, CSS counters, team cards
Call to Action Email form, 3 ways to help, scroll fade-in

Every advocacy campaign needs a website. You are building the one that makes the case — then adapting it to pitch your own real community idea.

Your learning path

The 7 Stages

STAGE 1 Design System + Hero CSS variables, Raleway, bold headline STAGE 2 Impact Stats HTML Big-number cards, data-target attributes STAGE 3 Stat Counter JS setInterval, clearInterval, parseInt STAGE 4 Problem + Solution Two-column grid, pull quote, cards STAGE 5 Plan + Team 3-phase cards, CSS counters, team grid STAGE 6 CTA + Footer Email form, three ways to help, footer STAGE 7 Scroll Fade-In IntersectionObserver, opacity, translateY
Let’s Begin

← Back to All Units

Sources

The broadband access data and digital equity framing in this unit draws from federal reports, Tribal Nation research, and Indigenous technology sovereignty scholarship. Students adapting the site to their own community initiative should research their chosen topic using similarly vetted primary sources.

Digital Equity & Tribal Broadband

Native Technology & Digital Sovereignty

Web Development: JavaScript APIs

Educational Standards

This unit aligns with computer science, language arts, social studies, and Indigenous education standards across MN, ND, and SD. Click a panel to expand.

  • Use setInterval(fn, delay) to call a function repeatedly on a timer, animating a number from 0 to a target value over a fixed duration
  • Read data-target attributes with el.dataset.target and convert string values to integers with parseInt
  • Stop a running interval with clearInterval when the counter reaches its target; format displayed numbers with .toLocaleString()
  • Build a complete seven-section advocacy website: hero, stats, problem, solution, plan, team, and call to action
  • Create an IntersectionObserver with a threshold option that fires a callback when watched elements enter the viewport
  • Apply opacity: 0 and transform: translateY(28px) to elements and transition them to visible when .visible is added via the observer
  • OSEU.SS.C.3, Civic Engagement and Tribal Self-Determination (All Grades): Students understand that Tribal Nations have the right and responsibility to advocate for their communities’ needs. (The Wiċhóni Digital Center pitch models civic advocacy through design: it names a documented problem, presents evidence, proposes a Tribally-owned solution, and makes a clear ask. The site explicitly frames digital access as a sovereignty issue, not just a convenience.)
  • OSEU.ELA.W.2, Writing for Public Audiences (All Grades): Students produce persuasive writing that addresses a genuine community need and reaches a real audience. (The pitch site is a published digital document that students adapt to their own community initiative. The problem section, pull quote, and call-to-action require students to write for an audience of potential supporters, not just their teacher.)
  • CSTA 3A-AP-13 (Grades 9–12): Create prototypes that use algorithms to solve computational problems by leveraging prior knowledge. (The stat counter and scroll observer are new algorithms built on prior DOM manipulation skills. Students implement setInterval and IntersectionObserver without a framework, connecting each to a specific UX goal: animated evidence and scroll-triggered emphasis.)
  • CSTA 2-AP-15 (Grades 6–8): Seek and incorporate feedback to refine a solution that meets user needs. (The advocacy site must be persuasive to real audiences. Students evaluate their pitch structure, revise problem and solution sections based on research, and consider whether the call to action is clear and actionable for the audiences they want to reach.)
  • ISTE 1d, Empowered Learner: Students understand the fundamental concepts of technology operations and demonstrate the ability to choose, use, and troubleshoot technologies. (Students select appropriate JS patterns for specific UX goals: a timer-based counter for page-load animation, and a viewport observer for scroll animation. They debug both in the stage editor and in a live browser.)
  • ISTE 6c, Creative Communicator: Students communicate complex ideas clearly and effectively by creating a variety of digital objects. (Students communicate a community need through data visualization, persuasive prose, animated interaction, and web design, producing a site that functions as a real advocacy document.)
  • MN ELA 7.3.3.4 (Grade 7): Use technology to produce and publish writing for an audience. (The pitch site is written for a real audience of potential supporters. Students make deliberate word choices in the headline, problem section, and CTA based on what will be persuasive to that specific audience.)
  • MN Social Studies 7.3.3.1 (Grade 7): Analyze how individuals and groups have advocated for change. (The unit frames digital advocacy as a civic act. Students research documented broadband access gaps on Tribal lands before adapting the pitch site to their own community initiative.)
  • MN CS K-12 Standard 8.1.2 (Grade 8): Apply computational thinking including abstraction, data collection, and algorithm design. (The setInterval counter is a timed algorithm; the IntersectionObserver is a callback-driven event pattern. Students understand why each was chosen for its specific purpose rather than applying them interchangeably.)
  • ND CS 6.E.1 / 7.E.1 / 8.E.1 (Grades 6–8): Create artifacts by applying existing knowledge of computing concepts. (Students build on prior CSS and JavaScript skills and extend them with two new browser APIs: setInterval for timed animation and IntersectionObserver for viewport detection. The completed pitch site is the artifact.)
  • ND Social Studies 8.6.2 (Grade 8): Analyze civic and political participation and its relationship to community values. (Students produce an advocacy document demonstrating the relationship between data, narrative, and civic persuasion. The pitch structure — problem → evidence → solution → ask — is a transferable civic advocacy framework.)
  • SD CS 6-8.AP.M.1 (Grades 6–8): Decompose problems into parts to facilitate design, implementation, and review. (The 7-stage build decomposes the pitch site: design → stats HTML → counter JS → problem/solution → plan + team → CTA → scroll animations. Each stage solves one sub-problem before combining with the whole.)
  • SD ELA 6.W.1 (Grade 6): Write arguments to support claims with clear reasons and relevant evidence. (The pitch site is a structured argument: the headline is a claim, the stats are evidence, the solution is the case for action, and the CTA is the ask. Students apply persuasive writing structure in a digital format that can reach a real audience.)
  • SD Social Studies 8.C.1.2 (Grade 8): Analyze the role of citizens in contributing to the common good. (Students build a site advocating for digital equity as a community good, grounded in research about broadband access gaps on Tribal lands. The unit closes by asking students to identify and pitch their own real community initiative.)