Screen Lab

Medium
10
1
75.6% 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:

  1. An HTML document with a header element containing a title.
  2. A main section containing a card element to display the screen info.
  3. Inside the card, create four div elements with specific IDs: screenSize, displayWidth, displayHeight, and pixelRatio.