challenge

Challenge: Infinite Scroll

10 / 31

45 minchallenge

0% Complete

0 of 31 lessons

1.1 Semantic HTML 1.2 CSS Grid & Flexbox 1.3 Responsive Design 1.4 CSS Animations 1.5 Project: Responsive Portfolio

2.1 ES6+ Features 2.2 Async Programming 2.3 Browser APIs 2.4 Practice: Weather App 2.5 Challenge: Infinite Scroll

3.1 React FundamentalsPro 3.2 Advanced HooksPro 3.3 State ManagementPro 3.4 React RouterPro 3.5 Project: E-commerce StorePro

4.1 TypeScript BasicsPro 4.2 TypeScript with ReactPro 4.3 Advanced TypesPro 4.4 Practice: Refactor to TypeScriptPro

5.1 ARIA & Semantic HTMLPro 5.2 Keyboard NavigationPro 5.3 Screen Reader TestingPro 5.4 Project: Accessible DashboardPro

6.1 Interview Evaluation CriteriaPro 6.2 Problem Solving FrameworkPro 6.3 JavaScript Interview QuestionsPro 6.4 React Interview PatternsPro 6.5 CSS and Layout QuestionsPro 6.6 Front-End Data StructuresPro 6.7 Timed Coding ExercisesPro 6.8 Mock Interview PracticePro

This module

0 / 5

ES6+ Features
Async Programming
Browser APIs
Practice: Weather App
Challenge: Infinite Scroll

←→Navigate

1 min read

Challenge: Infinite Scroll

Implement infinite scrolling — automatically load more content as the user scrolls to the bottom.

1

Challenge Requirements

Load initial items on page load
Detect when user scrolls near bottom
Fetch more data from API without page reload
Show loading indicator while fetching
Handle end of data gracefully

2

Scroll Detection

Listen to window.scroll event
Calculate: (window.innerHeight + window.scrollY) >= document.body.offsetHeight

1 min read

Challenge: Infinite Scroll

Implement infinite scrolling — automatically load more content as the user scrolls to the bottom.

1

Challenge Requirements

Load initial items on page load
Detect when user scrolls near bottom
Fetch more data from API without page reload
Show loading indicator while fetching
Handle end of data gracefully

2

Scroll Detection

Listen to window.scroll event
Calculate: (window.innerHeight + window.scrollY) >= document.body.offsetHeight