mirror of
https://bitbucket.org/Mattrixwv/webtutorials.git
synced 2025-12-06 18:34:01 -05:00
139 lines
5.7 KiB
HTML
139 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Test Page</title>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
window.addEventListener("resize", resizingInformation); //Performs a function when the page is resized
|
|
window.addEventListener("load", startPage); //This function runs everything needed to setup the page
|
|
|
|
//This function runs all the functions needed to startup the page
|
|
function startPage(){
|
|
resizingInformation(); //Make sure all the size information is displayed
|
|
numberTest(); //Make sure the number is displayed correctly
|
|
dateTest(); //Display the date
|
|
|
|
}
|
|
|
|
//This function is run every time the page is resized, displaying the different sizes and keeping track of how many times it has been called
|
|
function resizingInformation() {
|
|
//Declare a static variable to keep track of how many times the page has been resized
|
|
//Initialize it only the first time the function is run
|
|
if(resizingInformation.resizeCounter == null){
|
|
resizingInformation.resizeCounter = 0;
|
|
}
|
|
var resizeString = "This page has been resized " + resizingInformation.resizeCounter++ + " times.<br>"
|
|
resizeString += "Inner Dimentions: " + window.innerWidth + "x" + window.innerHeight + "<br>";
|
|
resizeString += "Outer Dimentions: " + window.outerWidth + "x" + window.outerHeight;
|
|
document.getElementById("testID").innerHTML = resizeString;
|
|
|
|
//To reisize an element to take up the rest of the screen use this
|
|
/*
|
|
let mainContent = document.getElementById("mainContent");
|
|
let footer = document.getElementById("mainFooter");
|
|
let height = window.innerHeight - mainContent.offsetTop - footer.offsetHeight;
|
|
mainContent.style = "height: " + height + "px";
|
|
*/
|
|
}
|
|
|
|
//This function demonstrates a method to change the number of digits a number displays when printed
|
|
function numberTest(){
|
|
var numberString = " The number is: " + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 3}).format(7) + "<br>";
|
|
numberString += "The number should be: 007";
|
|
document.getElementById("Numbers").innerHTML = numberString;
|
|
}
|
|
|
|
//This function demonstrates some features of the Date class and how Internet Explorer handles dates differently
|
|
function dateTest(){
|
|
//Create a timestamp for right now
|
|
var date = new Date();
|
|
var resultString = "Timestamp on load:<br>";
|
|
//Display that timestamp in a "MM/DD/YYYY HH:MM AM/PM" format
|
|
var dateString = new String(new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format((parseInt(date.getMonth()) + 1)) + "/" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getDate()) + "/" + date.getFullYear() + " " + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getHours()) + ":" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getMinutes()));
|
|
resultString += dateString + "<br>";
|
|
//Change the dateString to a "MM/DD/YY HH:MM AM/PM" format
|
|
dateString = new String(new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format((parseInt(date.getMonth()) + 1)) + "/" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getDate()) + "/" + new String(date.getFullYear()).substring(2) + " " + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getHours()) + ":" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getMinutes()));
|
|
resultString += "Timestamp from string '" + dateString + "':<br>";
|
|
//Create a new timestamp from a string
|
|
date = new Date(dateString);
|
|
//Display the new timestamp
|
|
//Internet explorer changes 2-digit dates to 19XX instead of 20XX
|
|
resultString += new String(new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format((parseInt(date.getMonth()) + 1)) + "/" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getDate()) + "/" + date.getFullYear() + " " + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getHours()) + ":" + new Intl.NumberFormat("en-EN", {minimumIntegerDigits: 2}).format(date.getMinutes()));
|
|
|
|
document.getElementById("DateTest").innerHTML = resultString;
|
|
}
|
|
|
|
//This function changes text determined by the box being checked or unchecked
|
|
function checkboxClick(){
|
|
//If the box is checked display this message
|
|
if(document.getElementById("box").checked){
|
|
document.getElementById("inputMessage").innerHTML = "The checkbox has been clicked!";
|
|
document.getElementById("checkboxLabel").innerHTML = "Check Box";
|
|
}
|
|
//If the box is unchecked display this message
|
|
else{
|
|
document.getElementById("inputMessage").innerHTML = "The checkbox has been unclicked!";
|
|
document.getElementById("checkboxLabel").innerHTML = "Un-check Box";
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
}
|
|
h1{
|
|
display:flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
#columns{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
#Numbers{
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: right; /*Text to the right so the numbers line up*/
|
|
}
|
|
#DateTest{
|
|
display: flex;
|
|
justify-content: center; /*Centers the block*/
|
|
text-align: center; /*Centers text within the block*/
|
|
}
|
|
#inputTypes{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
#inputMessage{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>This is the header</h1>
|
|
<div id="columns">
|
|
<div>This is some text for the first column</div>
|
|
<span id="testID"></span>
|
|
</div>
|
|
<div id="Numbers">
|
|
|
|
</div>
|
|
<div id="DateTest">
|
|
|
|
</div>
|
|
<div id="inputTypes">
|
|
<input id="box" type="checkbox" onclick="checkboxClick()" checked="">
|
|
<label for="box" id="checkboxLabel">Check Box</label>
|
|
</div>
|
|
<div id="inputMessage">
|
|
The checkbox is checked by default
|
|
</div>
|
|
</body>
|
|
|
|
</html> |