|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<title>Caleb Fontenot's Web Server</title>
|
|
|
<link rel="icon" href="https://files.calebfontenot.com/files/C%5C%26H%20Spin.gif" type="image/gif" />
|
|
|
<meta content="Caleb Fontenot's Web Server" property="og:title" />
|
|
|
<meta content="Home Page of Caleb Fontenot's Web Server" property="og:description" />
|
|
|
<meta content="https://calebfontenot.com" property="og:url" />
|
|
|
<meta content="https://files.calebfontenot.com/files/C%5C%26H%20Spin.gif" property="og:image" />
|
|
|
<meta content="#FF0000" data-react-helmet="true" name="theme-color" />
|
|
|
<!meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link href="root.css" rel="stylesheet">
|
|
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L9QF12JY74"></script>
|
|
|
<script>
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
function gtag() { dataLayer.push(arguments); }
|
|
|
gtag('js', new Date());
|
|
|
|
|
|
gtag('config', 'G-L9QF12JY74');
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
<body class="center">
|
|
|
<div id="wrapper">
|
|
|
<nav>
|
|
|
<h1>Hi! Welcome to my Web Server!</h1>
|
|
|
<div class="navborder">
|
|
|
<a class="button" href="index.html">Home</a>
|
|
|
<a class="button" href="https://gitea.calebfontenot.com">Gitea</a>
|
|
|
<a class="button" href="https://search.calebfontenot.com">SearXNG Instance</a>
|
|
|
<a class="button" href="dynmap.html">Minecraft Server Dynamic Maps</a>
|
|
|
<a class="button" href="mario">Mario</a>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<h2 class="aboutme">About me<img class="aboutme" src="Caleb.jpg" alt="Caleb" height="5%" width="5%"></h2>
|
|
|
<p>Hi! My name is <mark>Caleb Fontenot.</mark> I am a software developer in my second semester at South Lousiana
|
|
|
Community College.</p>
|
|
|
<p>Pick a design!</p>
|
|
|
<div id="selectDesign">
|
|
|
<input id=inputText>
|
|
|
<select id="designSelections" name="designSelections">
|
|
|
<option value="design1">Design 1</option>
|
|
|
<option value="design2">Design 2 (Triangle)</option>
|
|
|
<option value="design3">Design 3 (Triangle, varient 2)</option>
|
|
|
<option value="design4">Design 4 (Circle)</option>
|
|
|
<option value="design5">Design 5 (Circle, varient 2)</option>
|
|
|
</select>
|
|
|
<input class="button" type="button" onclick="drawDesign();" value="Draw design">
|
|
|
</div>
|
|
|
<script>
|
|
|
function drawDesign() {
|
|
|
let event = document.getElementById('designSelections');
|
|
|
let value = event.options[event.selectedIndex].value;
|
|
|
//alert(value);
|
|
|
let inputText = document.getElementById("inputText").value;
|
|
|
let designText;
|
|
|
switch (value) {
|
|
|
case "design1":
|
|
|
designText = design1(inputText);
|
|
|
break;
|
|
|
case "design2":
|
|
|
designText = design2(inputText);
|
|
|
break;
|
|
|
case "design3":
|
|
|
designText = design3(inputText);
|
|
|
break;
|
|
|
case "design4":
|
|
|
designText = design4(inputText);
|
|
|
break;
|
|
|
case "design5":
|
|
|
designText = design5(inputText);
|
|
|
break;
|
|
|
}
|
|
|
document.getElementById("jsOutput").innerHTML = designText;
|
|
|
}
|
|
|
|
|
|
function design1(input) {
|
|
|
console.log("Running design1...");
|
|
|
let outputString;
|
|
|
let startEnd = "";
|
|
|
for (let i = 0; i < input.length + 2; i++) {
|
|
|
startEnd += "*";
|
|
|
}
|
|
|
outputString = startEnd + "<br>";
|
|
|
outputString += "*" + "<br>";
|
|
|
outputString += "* " + input + "<br>";
|
|
|
outputString += "*" + "<br>";
|
|
|
outputString += startEnd;
|
|
|
return outputString;
|
|
|
}
|
|
|
function design2(input) {
|
|
|
console.log("Running design2...");
|
|
|
let outputString;
|
|
|
let height = (input.length * 2) + 6;
|
|
|
let mid = Math.trunc(height / 2) + 1;
|
|
|
if (height % 2 == 0) {
|
|
|
height++;
|
|
|
}
|
|
|
outputString = "";
|
|
|
for (let i = 0; i < height; i++) {
|
|
|
if (mid == i) { //Determine if we're in the middle of the triangle
|
|
|
outputString += "**" + input + "**";
|
|
|
} else {
|
|
|
for (let j = 0; j < i; j++) {
|
|
|
outputString += "*";
|
|
|
}
|
|
|
}
|
|
|
outputString += "<br>";
|
|
|
}
|
|
|
return outputString;
|
|
|
}
|
|
|
function design3(input) {
|
|
|
console.log("Running design3...");
|
|
|
let outputString;
|
|
|
let height = (input.length * 2) + 6;
|
|
|
let mid = Math.trunc(height / 2) + 1;
|
|
|
if (height % 2 == 0) {
|
|
|
height++;
|
|
|
}
|
|
|
outputString = "";
|
|
|
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
|
|
|
outputString += "*";
|
|
|
} else {
|
|
|
outputString += " ";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
outputString += "<br>";
|
|
|
}
|
|
|
outputString += "* " + 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
|
|
|
outputString += "*";
|
|
|
} else {
|
|
|
outputString += " ";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
outputString += "<br>";
|
|
|
}
|
|
|
return outputString;
|
|
|
}
|
|
|
|
|
|
function design4(input) {
|
|
|
let outputString = "";
|
|
|
let outputLine = "";
|
|
|
let radius = (input.length + 1);
|
|
|
let mid = radius;
|
|
|
if (mid % 2 == 1) {
|
|
|
var spaceOffset = " ";
|
|
|
} else {
|
|
|
var spaceOffset = "";
|
|
|
}
|
|
|
console.log(radius, mid);
|
|
|
// dist represents distance to the center
|
|
|
let dist = parseFloat(0);
|
|
|
let space = ""
|
|
|
for (let i = 0; i < (input.length / 2); ++i) {
|
|
|
space += " ";
|
|
|
}
|
|
|
// for horizontal movement
|
|
|
var i;
|
|
|
var j;
|
|
|
let lineHasInput = false;
|
|
|
for (i = 0; i <= 2 * radius; i++) {
|
|
|
lineHasInput = false;
|
|
|
if (Math.trunc(i) != mid) {
|
|
|
// for vertical movement
|
|
|
for (j = 0; j <= 2 * radius; j++) {
|
|
|
dist = Math.sqrt(
|
|
|
((i - radius) * (i - radius) * 4) + // (* 4) accounts for the offset between lines
|
|
|
(j - radius) * (j - radius)
|
|
|
);
|
|
|
//console.log(i, j, radius, dist);
|
|
|
// dist should be in the range (radius - 0.5)
|
|
|
// and (radius + 0.5) to print stars(*)
|
|
|
|
|
|
|
|
|
if (dist > radius - 1 && dist < radius + 1) { //&& dist > radius - 1
|
|
|
lineHasInput = true;
|
|
|
outputLine += "·"; //zero-width space
|
|
|
} else {
|
|
|
outputLine += " ";
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
lineHasInput = true;
|
|
|
outputLine += "·" + space + input + space + spaceOffset + "·"; //zero-width space
|
|
|
}
|
|
|
|
|
|
//console.log(i, j, outputLine);
|
|
|
if (lineHasInput) {
|
|
|
outputString += outputLine + "<br>";
|
|
|
}
|
|
|
outputLine = "";
|
|
|
}
|
|
|
return outputString;
|
|
|
}
|
|
|
var charIterateState;
|
|
|
function charIterate(input) {
|
|
|
if (charIterateState == undefined) {
|
|
|
charIterateState = 0;
|
|
|
} else {
|
|
|
if (charIterateState < (input.length - 1)) {
|
|
|
charIterateState++;
|
|
|
} else {
|
|
|
charIterateState = 0;
|
|
|
}
|
|
|
}
|
|
|
console.log(charIterateState, input.charAt(charIterateState));
|
|
|
return charIterateState;
|
|
|
}
|
|
|
|
|
|
function design5(input) {
|
|
|
let outputString = "";
|
|
|
let outputLine = "";
|
|
|
let radius = (input.length);
|
|
|
let mid = radius;
|
|
|
if (mid % 2 == 1) {
|
|
|
var spaceOffset = " ";
|
|
|
} else {
|
|
|
var spaceOffset = "";
|
|
|
}
|
|
|
console.log(radius, mid);
|
|
|
// dist represents distance to the center
|
|
|
let dist = parseFloat(0);
|
|
|
let space = ""
|
|
|
for (let i = 0; i < (input.length / 2); ++i) {
|
|
|
space += " ";
|
|
|
}
|
|
|
// for horizontal movement
|
|
|
var i;
|
|
|
var j;
|
|
|
let lineHasInput = false;
|
|
|
for (i = 0; i <= 2 * radius; i++) {
|
|
|
lineHasInput = false;
|
|
|
if (Math.trunc(i) != mid) {
|
|
|
// for vertical movement
|
|
|
for (j = 0; j <= 2 * radius; j++) {
|
|
|
dist = Math.sqrt(
|
|
|
((i - radius) * (i - radius) * 4) + // (* 4) accounts for the offset between lines
|
|
|
(j - radius) * (j - radius)
|
|
|
);
|
|
|
//console.log(i, j, radius, dist);
|
|
|
// dist should be in the range (radius - 0.5)
|
|
|
// and (radius + 0.5) to print stars(*)
|
|
|
|
|
|
|
|
|
if (dist > radius - 1 && dist < radius + 1) { //&& dist > radius - 1
|
|
|
lineHasInput = true;
|
|
|
outputLine += "" + input.charAt(charIterate(input)); //zero-width space
|
|
|
} else {
|
|
|
outputLine += " ";
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
lineHasInput = true;
|
|
|
outputLine += input.charAt(charIterate(input)) + space + input + space + spaceOffset + input.charAt(charIterate(input));
|
|
|
}
|
|
|
|
|
|
//console.log(i, j, outputLine);
|
|
|
if (lineHasInput) {
|
|
|
outputString += outputLine + "<br>";
|
|
|
}
|
|
|
outputLine = "";
|
|
|
}
|
|
|
return outputString;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<p id="jsOutput"></p>
|
|
|
|
|
|
<p>
|
|
|
<a href="https://jigsaw.w3.org/css-validator/check/referer">
|
|
|
<img style="border:0;width:88px;height:31px" src="https://jigsaw.w3.org/css-validator/images/vcss"
|
|
|
alt="Valid CSS!" />
|
|
|
</a>
|
|
|
</p>
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
<a href=https://gitea.calebfontenot.com/CCF_100/frontpage class=button>Caleb Fontenot, 2023</a>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html> |