Treehouse Code Adventures > Product Details Modal

Product Details Modal

Create a product details modal for a fictitious smartwatch company of the future. By effectively presenting the product, answering customer questions, and addressing potential concerns brought up in reviews, the product details page plays a direct role in converting visitors into buyers.

Start Adventure

Created: 12/14/2023 by Dustin Usey

Skill level: advanced

Topics used: HTML CSS JavaScript

Estimated completion time: 10 Hours

HTML Basics

Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.

HTML Forms

Learn about all the most important form elements that web professionals use on a daily basis.

CSS Basics

Learn the basics of CSS, one of the core technologies for designing and building websites and applications.

CSS Layout

Cover how the CSS Box Model impacts the presentation of each HTML element, learn to control the position of each element onscreen, and even begin to adjust our layouts for different screen sizes and environments.

CSS Flexbox Layout

Flexbox is a set of CSS properties that give you a flexible way to lay out content.

Mobile-First CSS Layout

Practice using CSS layout techniques such as a CSS Reset with Normalize, a layout wrapper, a sticky footer, and centered content with a full-width header.

CSS Grid Layout

CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.

JavaScript Basics

In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.

JavaScript Functions

JavaScript functions let you create reusable chunks of code. They make programming faster, easier, and less error-prone.

JavaScript Loops

Loops are a way of repeating code -- they're handy for repetitive tasks. Loops are frequently used for actions that need to run a particular number of times or until a certain condition is true.

JavaScript and the DOM

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.

DOM Scripting By Example

Use JavaScript to build an RSVP web application. Many of the features you'll build are common to other web applications.

Using Local Storage With JavaScript

Local Storage is part of the Web Storage API, and allows you, as a developer, to store data in a user's browser.

JavaScript Array Iteration Methods

Learn how to access and transform data in arrays with JavaScript's array iteration methods.

0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
1
Extra Challenge: Make the modal fully responsive.
2
Extra Challenge: Enable the ability to add a review by adding an "Add Review" button in the reviews tab. This should display a form that allows the user to enter their name and review. Clicking on the "Submit" button will add the review to the list of reviews. Store the reviews in local storage so that they persist when the page is refreshed.
3
Extra Challenge: Enable the ability to add a question by adding an "Ask a Question" button. This should display a form that allows the user to enter their name and question. Clicking on the "Submit" button will add the question to the list of questions. Store the questions in local storage so that they persist when the page is refreshed.
4
Extra Challenge: Enable the ability to respond to a question by adding a "Respond" button to each question. This should display a form that allows the user to enter their name and response. Clicking on the "Submit" button will add the response to the list of responses. Store the responses in local storage so that they persist when the page is refreshed.
5
Extra Challenge: Enable functionality for the "Save to a List" button. This should display a form that allows the user to enter a name for the list. Clicking on the "Save" button will add the product to the list. Store the lists in local storage so that they persist when the page is refreshed.