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.
Created: 12/14/2023 by Dustin Usey
Skill level: advanced
Topics used: HTML CSS JavaScript
Estimated completion time: 10 Hours
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
HTML Basics
Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
HTML Forms
Learn about all the most important form elements that web professionals use on a daily basis.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
CSS Basics
Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
JavaScript Basics
In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
JavaScript Functions
JavaScript functions let you create reusable chunks of code. They make programming faster, easier, and less error-prone.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.