Screen Lab
Medium
9
1
75.0% Acceptance
In this lab, you will create an application that displays information about the user's screen, such as the screen size, display width and height, and the pixel ratio. You will use HTML, CSS, and JavaScript to create a simple user interface that updates when the screen size is changed. This lab will help you understand the concept of displaying screen information and how to manipulate the Document Object Model (DOM) using JavaScript to update the user interface.
The application should have the following UI structure:
- An HTML document with a
header
element containing a title. - A
main
section containing acard
element to display the screen info. - Inside the
card
, create fourdiv
elements with specific IDs:screenSize
,displayWidth
,displayHeight
, andpixelRatio
.