There is a new kid on the block: ChatGPT powered by OpenAI. And here is a test question: “How to make web page with toggle button in Javascript to resize to full screen page showing screen dimensions“. It’s fascinating to see writing answer is the real time. Here it is:
To create a web page with a toggle button that resizes the page to full screen and shows the screen dimensions, you can use the following steps:
1. First, create a new HTML file and add the following code to create a basic structure for your web page:
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Toggle</title>
</head>
<body>
</body>
</html>
2. Next, add a <button> element to the page, which will be used as the toggle button. You can add the following code to the <body> element:
<button id="toggle-fullscreen">Toggle Full Screen</button>
3. Then, create a <div> element that will be used to display the screen dimensions. You can add the following code to the <body> element:
<div id="screen-dimensions"></div>
4. After that, add a <script> element to the page, which will contain the JavaScript code that will make the toggle button work. You can add the following code to the <body> element:
<script>
// JavaScript code goes here
</script>
5. Inside the <script> element, add the following code to get the dimensions of the screen and display them in the <div> element:
// Get the screen dimensions
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// Get the <div> element for displaying the screen dimensions
var screenDimensionsElement = document.getElementById("screen-dimensions");
// Set the text content of the <div> element to the screen dimensions
screenDimensionsElement.textContent = "Screen dimensions: " + screenWidth + " x " + screenHeight;
6. Finally, add the following code to make the toggle button toggle between full screen and normal screen mode:
// Get the toggle button
var toggleButton = document.getElementById("toggle-fullscreen");
// Add a click event listener to the toggle button
toggleButton.addEventListener("click", function() {
// Check if full screen mode is enabled
if (document.fullscreenElement) {
// If full screen mode is enabled, exit full
Conclusion: Not bad for the first attempt. But script at last step is not done, there are missing curly brackets and code. On the other hand this code could be a good starting point to develop such page, but a real programmer has to do the last “details”.
So here is a Full Screen Toggle dimensions report web page code:
<!DOCTYPE html>
<!-- 2022-1211 Chat GPT: How to make web page with toggle button in Javascript to resize to full screen page showing screen dimensions -->
<html>
<head>
<title>Full Screen Toggle dimensions report</title>
<style>
.center {
text-align: center;
}
</style>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
function toggleFullscreen() {
// Check if full screen mode is enabled
if (document.fullscreenElement) {
closeFullscreen();
} else {
openFullscreen();
}
}
</script>
</head>
<body>
<div class="center">
<h2>Full Screen Toggle dimensions report</h2>
<button id="toggle-fullscreen">Toggle Full Screen</button>
<h1 id="screen-dimensions"></h1>
</div>
<script>
// Get the element for displaying the screen dimensions
var screenDimensionsElement = document.getElementById("screen-dimensions");
// Set the text content of the <div> element to the screen dimensions
function textContentUpdate(fullScreen) {
// Get the screen dimensions
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var screenType = fullScreen ? "Fullscreen" : "Screen";
var dimensions = screenType + " dimensions: " + screenWidth + " x " + screenHeight;
screenDimensionsElement.textContent = dimensions;
console.info(dimensions);
}
textContentUpdate();
// Get the toggle button
var toggleButton = document.getElementById("toggle-fullscreen");
function toggleAndReportDimensions() {
toggleFullscreen();
// Add 300ms delay to make sure window.innerWidth and window.innerHeight values are updated by js system
setTimeout(function () {
textContentUpdate(document.fullscreenElement);
}, 300);
}
// Add a click event listener to the toggle button
toggleButton.addEventListener("click", toggleAndReportDimensions);
</script>
</body>
</html>