This project provides a visual representation of common screen resolutions. Each resolution can be generated as a draggable box on the screen by clicking the associated button. The size of each box is labeled in the center for easy identification.
- Draggable 1920x1080 (1080p) box on page load.
- Buttons to generate boxes for common screen resolutions: 240p, 480p, 720p, 1080p, 1440p, 4k, and 8k.
- Each generated box displays its resolution in the center.
index.html: The main HTML structure of the project.styles.css: Contains all the styling for the project.script.js: Contains the JavaScript logic for draggable functionality and box generation.
- Implement responsive design for varying device sizes.
- Add more screen resolutions or custom size input.
This project was developed with guidance and assistance from OpenAI's ChatGPT.