Stretch Goals: Level Up Your Skills Optional Challenge

Advanced JavaScript challenges for students who finish early

About These Challenges

Finished your landing page early? Ready to push your skills further? These stretch goals are for you.

IMPORTANT: These are NOT copy-paste exercises. These challenges require you to research documentation independently, watch tutorials, experiment, debug, and possibly fail multiple times before succeeding.

That's the point. The base assignment gave you structure and guidance. Stretch goals test whether you can learn independently—one of the most critical skills for developers.

What Makes These "Stretch" Goals?

  • No step-by-step instructions - You'll need to figure out the implementation
  • Multiple valid approaches - Research and choose what works for you
  • Real problem-solving - You'll encounter bugs and need to debug
  • Independent research required - Google, read docs, watch tutorials
  • 2-4 hours per goal - These take time and persistence

Prerequisites

Before attempting these challenges:

  • ✅ Completed base landing page (HTML/CSS)
  • ✅ Comfortable with HTML structure and CSS styling
  • ✅ Basic JavaScript knowledge (variables, functions, events)
  • ✅ Patient and persistent mindset
  • ✅ Comfortable reading documentation

How to Approach These Challenges

Don't jump straight into coding! Follow this process:

1. Understand the Challenge

  • Read the entire challenge description
  • Identify what you're building and why it matters
  • Define success criteria (how you'll know it works)

2. Research First

  • Read about the concepts listed
  • Watch at least one tutorial video
  • Find 2-3 code examples to study
  • Understand the approach before writing code

3. Plan Your Implementation

  • Sketch out the HTML structure needed
  • List the CSS states required
  • Outline the JavaScript logic flow
  • Identify potential challenges

4. Build Incrementally

  • Start with HTML structure only
  • Add CSS styling next
  • Finally add JavaScript functionality
  • Test each piece before moving on

5. Debug Systematically

  • Use console.log() to check values
  • Use browser DevTools to inspect elements
  • Read error messages carefully
  • Search for specific error messages

6. Refine and Document

  • Clean up your code
  • Add comments explaining your approach
  • Test edge cases
  • Document what you learned in your README

Where to Find Help

DO Use These Resources:

Primary Sources:

  • MDN Web Docs (developer.mozilla.org) - The gold standard
  • CSS-Tricks (css-tricks.com) - Practical tutorials
  • JavaScript.info - Comprehensive JS tutorial
  • Official API Documentation - Always check the source

Learning Resources:

  • Tutorial videos (YouTube, frontend courses)
  • CodePen examples (study how others solved similar problems)
  • Stack Overflow (for specific errors, but understand the answers)

DON'T Just:

  • ❌ Copy entire solutions without understanding
  • ❌ Skip reading the documentation
  • ❌ Give up after the first attempt
  • ❌ Use jQuery or libraries (practice vanilla JavaScript)
  • ❌ Submit code you don't understand

When You're Stuck (>30 minutes):

  1. Take a break - Fresh eyes help
  2. Rubber duck debug - Explain the problem out loud
  3. Search the specific error - Copy/paste error messages into Google
  4. Ask in class - But explain what you've already tried
  5. Simplify - Break the problem into smaller pieces

Stretch Goal 1: Modal Window for Data Table 2-3 hours

The Challenge

Create a modal (popup overlay) that displays your data table when a user clicks a button. The modal should be closeable and accessible.

Why It Matters

Modals are everywhere in modern web apps:

  • Login/signup forms
  • Image galleries and lightboxes
  • Product quick views
  • Confirmation dialogs

Concepts to Research

CSS Concepts:

  • position: fixed vs absolute vs relative
  • z-index and stacking contexts
  • display: none vs visibility: hidden vs opacity: 0
  • CSS transitions for smooth animations
  • Backdrop overlays

JavaScript Concepts:

  • DOM manipulation (querySelector, classList)
  • Event listeners (addEventListener)
  • Event objects and event.target
  • Keyboard events (Escape key)

Accessibility Concepts:

  • ARIA roles for dialogs
  • Focus trapping (keeping focus inside modal)
  • Keyboard navigation

Resources

Questions to Answer: How will you handle focus when the modal opens? What happens when someone clicks outside the modal? How do you make it keyboard accessible?

Stretch Goal 2: Smooth Scroll Navigation 1-2 hours

The Challenge

Implement smooth scrolling when users click navigation links that jump to different sections of your page. Add visual feedback showing which section is currently active.

Concepts to Research

  • scrollIntoView() method
  • CSS scroll-behavior property
  • Intersection Observer API
  • preventDefault() for anchor links
  • Adding/removing active states

Resources

Questions to Answer: How do you detect which section is currently in view? How do you highlight the corresponding nav link? What's the difference between CSS-only and JavaScript smooth scrolling?

Stretch Goal 3: Form Enhancement with JavaScript 2-4 hours

The Challenge

Enhance your contact form with JavaScript validation, custom error messages, and a success state after submission.

Features to Implement

  • Real-time validation as user types
  • Custom error messages for each field
  • Visual feedback (green checkmarks for valid fields)
  • Disable submit button until form is valid
  • Show success message after submission

Concepts to Research

  • Form validation (checkValidity(), setCustomValidity())
  • input, blur, submit events
  • Regular expressions for email validation
  • event.preventDefault() to stop form submission
  • DOM manipulation to show/hide error messages

Resources

Stretch Goal 4: Scroll-Triggered Animations 2-3 hours

The Challenge

Make elements fade in, slide up, or animate as the user scrolls them into view. Create a polished, professional feel.

Concepts to Research

  • Intersection Observer API
  • CSS transitions and transforms
  • Adding/removing CSS classes with JavaScript
  • Animation timing and delays
  • Stagger effects (animating items in sequence)

Resources

Questions to Answer: How do you detect when an element enters the viewport? How do you prevent animations from triggering multiple times? How do you create staggered animations for multiple elements?

Stretch Goal 5: Your Creative Challenge Your Choice

The Challenge

Choose your own adventure! Implement something creative that enhances your landing page.

Ideas to Consider

  • Image Carousel/Slider - Showcase product images
  • Pricing Calculator - Let users calculate costs
  • FAQ Accordion - Expandable/collapsible sections
  • Dark Mode Toggle - Let users switch themes
  • Hamburger Menu - Animated mobile navigation
  • Progress Bar - Show page scroll progress
  • Loading Animation - Simulate page load states
  • Parallax Effects - Background moves at different speeds
Requirements: Must use JavaScript (not just CSS). Document your process in README. Explain what you learned and what challenges you faced.

Documenting Your Stretch Goals

If you complete any stretch goals, document them in your README:

Required Documentation:

  • Which goals you completed
  • How you approached each challenge - What resources did you use?
  • Challenges you faced - What didn't work at first?
  • How you solved them - What was your breakthrough?
  • What you learned - New concepts or skills gained
  • Code comments - Explain key parts of your JavaScript
Stretch goals demonstrate initiative and problem-solving skills - qualities that stand out in portfolios and interviews!