Answered step by step
Verified Expert Solution
Question
1 Approved Answer
Please Help! Create a web page dynamically show content based on user choice Using conditions and comparisons to take a user choice and dynamically load
Please Help!
Create a web page dynamically show content based on user choice
Using conditions and comparisons to take a user choice and dynamically load content on the web page. This can be whatever content and choices your want. An example would be to let the user choose between 3 foods, then render an image and description about that food after they have chosen one.
Requirements:
- Use an external CSS & JS file, no internal or inline styles & scripts
- Please comment your JS to break down your understanding of what is happening
- Use the Window Prompt method (Links to an external site.) to offer the user at least 3 choices
- Make sure you normalizes their inputs by converting their string text to lowercase using the string method of the same name
- Make sure you create a default choice if the users input does not match any you have defined
- Create a JS conditional statement that the compares the user inputs to your choices, depending on the condition render different content on the web page. You can use an if/else statement or switch statement it is up to you
- HINT the CSS display property (Links to an external site.) can make this very simple
- Web page content
- Provide either an image or video for each content choice
- Create a description of the content
- Create a heading for the content that says "You Chose (input value)"
- Style your page
- Font, color, spacing and layout should be intentional and not default for all other elements on the page
- Use classes for styling
- As always no CSS frameworks all custom creations from your original self
- Confirm that the code is properly indented & formatted.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started