104 lines
4.5 KiB
HTML
104 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>TODO supply a title</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script>
|
|
function design1() {
|
|
var input = prompt("Enter a greeting.");
|
|
var startEnd = "";
|
|
for (let i = 0; i < input.length + 2; i++) {
|
|
startEnd += "*";
|
|
}
|
|
document.getElementById("outputP").innerHTML = startEnd + "<br>";
|
|
document.getElementById("outputP").innerHTML += "*" + "<br>";
|
|
document.getElementById("outputP").innerHTML += "* " + input + "<br>";
|
|
document.getElementById("outputP").innerHTML += "*" + "<br>";
|
|
document.getElementById("outputP").innerHTML += startEnd;
|
|
|
|
}
|
|
function design2() {
|
|
var input = prompt("Enter a greeting.");
|
|
var height = (input.length * 2) + 6;
|
|
var mid = Math.trunc(height / 2) + 1;
|
|
if (height % 2 == 0) {
|
|
height++;
|
|
}
|
|
document.getElementById("outputP").innerHTML = "";
|
|
for (let i = 0; i < height; i++) {
|
|
if (mid == i) { //Determine if we're in the middle of the triangle
|
|
document.getElementById("outputP").innerHTML += "**" + input + "**";
|
|
} else {
|
|
for (let j = 0; j < i; j++) {
|
|
document.getElementById("outputP").innerHTML += "*";
|
|
}
|
|
}
|
|
document.getElementById("outputP").innerHTML += "<br>";
|
|
}
|
|
}
|
|
function design3() {
|
|
var input = prompt("Enter a greeting.");
|
|
var height = (input.length * 2) + 6;
|
|
var mid = Math.trunc(height / 2) + 1;
|
|
if (height % 2 == 0) {
|
|
height++;
|
|
}
|
|
document.getElementById("outputP").innerHTML = "";
|
|
if (mid % 2 == 1) { // Skip a line if odd
|
|
var subOffset = 1;
|
|
var addOffset = 0;
|
|
} else {
|
|
var subOffset = 0;
|
|
var addOffset = 1;
|
|
}
|
|
for (let i = 0; i < mid - addOffset; i++) {
|
|
for (let j = 0; j < i; j++) {
|
|
if (i % 2 == 1) {
|
|
if (i != (mid - 1)) {
|
|
if (i == 0 || (j == 0 || j == (i - 1))) { // Check if we're at the beginning or end of the line
|
|
document.getElementById("outputP").innerHTML += "*";
|
|
} else {
|
|
document.getElementById("outputP").innerHTML += " ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.getElementById("outputP").innerHTML += "<br>";
|
|
}
|
|
document.getElementById("outputP").innerHTML += "* " + input + " *<br>";
|
|
for (let i = mid - subOffset; i > 0; i--) {
|
|
for (let j = 0; j < i; j++) {
|
|
if (i % 2 == 1) {
|
|
if (j != (mid - 1) || (j != mid)) {
|
|
if ((i == 0 || (j == 0 || j == (i - 1)))) { // Check if we're at the beginning or end of the line
|
|
document.getElementById("outputP").innerHTML += "*";
|
|
} else {
|
|
document.getElementById("outputP").innerHTML += " ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.getElementById("outputP").innerHTML += "<br>";
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Select a design!</h1>
|
|
<p id="outputP"></p>
|
|
<button onclick="design1()">Design 1</button>
|
|
<button onclick="design2()">Design 2</button>
|
|
<button onclick="design3()">Design 3</button>
|
|
</body>
|
|
</html>
|