mirror of
https://bitbucket.org/Mattrixwv/webtutorials.git
synced 2025-12-06 18:34:01 -05:00
Added a basic html/css/js file for reference
This commit is contained in:
131
HelloWorld.html
Normal file
131
HelloWorld.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
//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>
|
||||
Reference in New Issue
Block a user