This sprint challenge allows you to demonstrate your understanding of the concepts covered in Sprint 3. You'll work with advanced JavaScript objects, functions, real-world patterns, and create responsive layouts using modern CSS techniques.
The challenge is designed to be completed in 3 hours. You are expected to use the resources and documentation provided throughout the sprint to help solve the problems.
Overview
This sprint challenge will test your understanding of the concepts covered in Sprint 3, including:
- Advanced JavaScript Objects and Classes
- Advanced Functions and Closures
- Real-world JavaScript Patterns (Destructuring, Ternary Operators, Arrow Functions)
- HTML & CSS III Concepts (Box Model, Flexbox, CSS Specificity)
The challenge consists of multiple tasks that will exercise your knowledge of these concepts, requiring you to apply them in real-world scenarios similar to what you would encounter in a professional development environment.
Challenge Requirements
Task 1: Object-Oriented Programming
You will build a class hierarchy for an e-commerce application. This task requires you to:
- Create a base Product class with common properties and methods
- Create derived classes for specific product types (PhysicalProduct, DigitalProduct)
- Implement inheritance to share functionality across classes
- Override methods where appropriate for specialized behavior
- Create an inventory management system using these classes
// Example of expected class implementation:
class Product {
constructor(id, name, price) {
this.id = id;
this.name = name;
this.price = price;
}
getDisplayPrice() {
return `$${this.price.toFixed(2)}`;
}
}
class DigitalProduct extends Product {
constructor(id, name, price, downloadSize) {
super(id, name, price);
this.downloadSize = downloadSize;
}
// Override parent method with specialized behavior
getDisplayPrice() {
return `${super.getDisplayPrice()} (Digital Download)`;
}
}
Task 2: Advanced Functions
You will implement a series of functions that process data for a dashboard. This task requires you to:
- Create arrow functions where appropriate
- Implement higher-order functions that accept callbacks
- Use closures to maintain state between function calls
- Use destructuring for function parameters and returns
- Implement function composition for data transformation
// Example of expected implementation:
const createCounter = (initialValue = 0) => {
let count = initialValue;
return {
increment: () => ++count,
decrement: () => --count,
getCount: () => count,
reset: () => { count = initialValue; return count; }
};
};
const processData = (data, ...transformers) => {
return transformers.reduce((result, transformer) => transformer(result), data);
};
Task 3: JavaScript in the Wild
You will apply real-world JavaScript patterns to refactor a legacy codebase. This task requires you to:
- Use destructuring to simplify object and array manipulation
- Apply the ternary operator for more concise conditionals
- Convert callback-based functions to use arrow functions
- Create shallow copies of objects and arrays
- Implement modern error handling patterns
// Example of expected refactoring:
// Before:
function getUser(id, callback) {
fetch('/api/users/' + id)
.then(function(response) {
return response.json();
})
.then(function(data) {
var name = data.name;
var email = data.email;
var role = data.role;
callback(null, {name: name, email: email, role: role});
})
.catch(function(error) {
callback(error, null);
});
}
// After:
const getUser = (id) => {
return fetch(`/api/users/${id}`)
.then(response => response.json())
.then(({ name, email, role }) => ({ name, email, role }))
.catch(error => { throw error; });
};
Task 4: Responsive Layout with CSS
You will create a responsive layout for a product showcase page. This task requires you to:
- Implement a Flexbox-based layout that adapts to different screen sizes
- Apply appropriate box-sizing to all elements
- Create a responsive navigation using Flexbox
- Use CSS specificity principles to organize your styles
- Create a card layout for product items that changes based on screen width
/* Example of expected CSS implementation */
* {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product-card {
flex: 1 1 300px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
}
@media (max-width: 768px) {
.product-grid {
flex-direction: column;
}
}