Inactive Tutor answered • 08/26/23
Sure! Here's an example of a website that includes the requirements you specified:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="script.js"></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p id="result"></p>
<form id="myForm">
<input type="text" id="nameInput" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// JavaScript code in script.js file
// Comments
// This is a single line comment
/* This is a
multi-line
comment */
// Variables
var greeting = "Hello";
var name = "John";
var age = 25;
// String manipulation
var message = greeting + ", " + name + "! You are " + age + " years old.";
// Date/Time manipulation
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
// Conditions - If statements
if (age >= 18) {
message += "<br>You are an adult.";
} else {
message += "<br>You are a minor.";
}
// Conditions - Switch case
var month = currentDate.getMonth() + 1;
switch (month) {
case 1:
message += "<br>It's January.";
break;
case 2:
message += "<br>It's February.";
break;
// Add cases for other months
default:
message += "<br>It's another month.";
break;
}
// Loops - While
var i = 1;
while (i <= 5) {
message += "<br>Loop iteration: " + i;
i++;
}
// Loops - Do while
var j = 1;
do {
message += "<br>Do-while loop iteration: " + j;
j++;
} while (j <= 5);
// Loops - For
for (var k = 1; k <= 5; k++) {
message += "<br>For loop iteration: " + k;
}
// Arrays - Single
var fruits = ["Apple", "Banana", "Orange"];
var firstFruit = fruits[0];
var secondFruit = fruits[1];
var thirdFruit = fruits[2];
// Functions
function addNumbers(a, b) {
return a + b;
}
var result = addNumbers(3, 4);
// Objects
var person = {
firstName: "John",
lastName: "Doe",
age: 25,
country: "USA"
};
// DOM
var resultElement = document.getElementById("result");
resultElement.innerHTML = message;
// Form validation
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event) {
event.preventDefault();
var nameInput = document.getElementById("nameInput");
var nameValue = nameInput.value;
if (nameValue !== "") {
resultElement.innerHTML += "<br>Hello, " + nameValue + "! Your form has been submitted.";
} else {
resultElement.innerHTML += "<br>Please enter your name.";
}
});
// Events
function showMessage() {
resultElement.innerHTML += "<br>Button clicked!";
}
var submitButton = document.querySelector("button");
submitButton.addEventListener("click", showMessage);
// Canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
// Complexity
// The complexity can be added based on specific requirements
</script>
</body>
</html>
Save the HTML code in a .html file and the JavaScript code in a .js file (script.js in this example). The code includes all the specified requirements such as comments, variables, string manipulation, date/time manipulation, conditional statements (if/switch), loops (while/do while/for), arrays, functions, objects, DOM manipulation, form validation, events, canvas, and a placeholder for complexity.
