<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text to ASCII Art Converter</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
textarea {
display: block;
margin: 0 auto;
width: 80%;
min-height: 200px;
resize: none;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 1.2em;
cursor: pointer;
}
#output {
display: block;
margin: 20px auto;
white-space: pre;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Text to ASCII Art Converter</h1>
<textarea id="input" placeholder="Enter your text here..."></textarea>
<button id="convert-btn" onclick="convert()">Convert</button>
<div id="output"></div>
<script>
function convert() {
const input = document.getElementById("input").value;
const output = document.getElementById("output");
let result = "";
for (let i = 0; i < input.length; i++) {
const charCode = input.charCodeAt(i);
if (charCode === 10) { // new line
result += "<br>";
} else if (charCode >= 32 && charCode <= 126) { // printable ASCII
result += String.fromCharCode(9216 + charCode); // convert to block element
} else { // non-printable ASCII
result += input[i];
}
}
output.innerHTML = result;
}
</script>
</body> </html>
