ASCII Sentence Generator

Developer
Size
2,605 Kb
Views
34,408

How do I make an ascii sentence generator?

Generates an 'ascii art' style sentence.. What is a ascii sentence generator? How do you make a ascii sentence generator? This script and codes were developed by Chris Barnes on 11 August 2022, Thursday.

ASCII Sentence Generator Previews

ASCII Sentence Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ASCII Sentence Generator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id='input_area' type='text' value='ASCII Text' /><br />
<div id='text_area'><ul></ul></div>
<div class='bet-a'>
&nbsp;&nbsp;&nbsp;&nbsp;aaa<br />
&nbsp;&nbsp;&nbsp;aa&nbsp;aa<br />
&nbsp;&nbsp;aaaaaaa<br />
&nbsp;aa&nbsp;&nbsp;&nbsp;&nbsp;aaa<br />
aa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaa<br />
</div>
<div class='bet-b'>
bbbbbb<br />
bb&nbsp;&nbsp;&nbsp;bbb<br />
bbbbbb<br />
bb&nbsp;&nbsp;&nbsp;bbb<br />
bbbbbbb<br />
</div>
<div class='bet-c'>
&nbsp;&nbsp;&nbsp;ccccc<br />
&nbsp;ccc&nbsp;&nbsp;&nbsp;cc<br />
ccc<br />
&nbsp;ccc&nbsp;<br />
&nbsp;&nbsp;cccccc<br />
</div>
<div class='bet-d'>
dddddd<br />
dd&nbsp;&nbsp;&nbsp;dd<br />
dd&nbsp;&nbsp;&nbsp;&nbsp;dd<br />
dd&nbsp;&nbsp;&nbsp;&nbsp;dd<br />
ddddddd<br />
</div>
<div class='bet-e'>
eeeeeee<br />
eee<br />
eeeee<br />
ee<br />
eeeeeee<br />
</div>
<div class='bet-f'>
ffffffff<br />
fff<br />
fffff<br />
ff<br />
ff<br />
</div>
<div class='bet-g'>
&nbsp;&nbsp;gggggg<br />
ggg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
gg&nbsp;&nbsp;&nbsp;ggg<br />
ggg&nbsp;&nbsp;&nbsp;&nbsp;gg<br />
&nbsp;ggggggg<br />
</div>
<div class='bet-h'>
hh&nbsp;&nbsp;&nbsp;&nbsp;hh<br />
hh&nbsp;&nbsp;&nbsp;&nbsp;hh<br />
hhhhhhhh<br />
hh&nbsp;&nbsp;&nbsp;&nbsp;hh<br />
hh&nbsp;&nbsp;&nbsp;&nbsp;hh<br />
</div>
<div class='bet-i'>
iiiiiiii<br />
&nbsp;&nbsp;&nbsp;ii<br />
&nbsp;&nbsp;&nbsp;ii<br />
&nbsp;&nbsp;&nbsp;ii<br />
iiiiiiii<br />
</div>
<div class='bet-j'>
&nbsp;&nbsp;&nbsp;jjjjj<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jj<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jj<br />
&nbsp;j&nbsp;&nbsp;jjj<br />
&nbsp;&nbsp;jjjj<br />
</div>
<div class='bet-k'>
kk&nbsp;&nbsp;&nbsp;kk<br />
kk&nbsp;kk<br />
kkkk<br />
kk&nbsp;&nbsp;kk<br />
kk&nbsp;&nbsp;&nbsp;kk<br />
</div>
<div class='bet-l'>
ll<br />
ll<br />
ll<br />
ll<br />
llllll<br />
</div>
<div class='bet-m'>
mmm&nbsp;&nbsp;mmm<br />
mm&nbsp;mm&nbsp;mm<br />
mm&nbsp;&nbsp;m&nbsp;mm<br />
mm&nbsp;&nbsp;&nbsp;&nbsp;mm<br />
mm&nbsp;&nbsp;&nbsp;&nbsp;mm<br />
</div>
<div class='bet-n'>
nnn&nbsp;&nbsp;&nbsp;nn<br />
nnnn&nbsp;&nbsp;nn<br />
nn&nbsp;nn&nbsp;nn<br />
nn&nbsp;&nbsp;nnnn<br />
nn&nbsp;&nbsp;&nbsp;nnn<br />
</div>
<div class='bet-o'>
&nbsp;&nbsp;&nbsp;ooooo<br />
&nbsp;oo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oo<br />
oo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oo<br />
&nbsp;oo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oo<br />
&nbsp;&nbsp;&nbsp;ooooo<br />
</div>
<div class='bet-p'>
pppppp<br />
pp&nbsp;&nbsp;&nbsp;pp<br />
ppppp<br />
pp<br />
pp<br />
</div>
<div class='bet-q'>
&nbsp;&nbsp;&nbsp;qqqqq<br />
&nbsp;qq&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;qq<br />
qq&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;q&nbsp;qq<br />
&nbsp;qq&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;qq<br />
&nbsp;&nbsp;&nbsp;qqqqq&nbsp;&nbsp;q<br />
</div>
<div class='bet-r'>
rrrrrr<br />
rr&nbsp;&nbsp;rrr<br />
rrrrrr<br />
rr&nbsp;&nbsp;rr<br />
rr&nbsp;&nbsp;&nbsp;rr<br />
</div>
<div class='bet-s'>
&nbsp;sssss<br />
sss<br />
&nbsp;ssss<br />
&nbsp;&nbsp;&nbsp;&nbsp;sss<br />
ssssss<br />
</div>
<div class='bet-t'>
tttttttt<br />
&nbsp;&nbsp;&nbsp;tt<br />
&nbsp;&nbsp;&nbsp;tt<br />
&nbsp;&nbsp;&nbsp;tt<br />
&nbsp;&nbsp;&nbsp;tt<br />
</div>
<div class='bet-u'>
uu&nbsp;&nbsp;&nbsp;&nbsp;uu<br />
uu&nbsp;&nbsp;&nbsp;&nbsp;uu<br />
uu&nbsp;&nbsp;&nbsp;&nbsp;uu<br />
uu&nbsp;&nbsp;&nbsp;&nbsp;uu<br />
&nbsp;uuuuuu<br />
</div>
<div class='bet-v'>
v&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vv<br />
&nbsp;v&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vv<br />
&nbsp;&nbsp;v&nbsp;&nbsp;&nbsp;vv<br />
&nbsp;&nbsp;&nbsp;v&nbsp;vv<br />
&nbsp;&nbsp;&nbsp;&nbsp;vv<br />
</div>
<div class='bet-w'>
ww&nbsp;&nbsp;&nbsp;&nbsp;ww<br />
ww&nbsp;&nbsp;&nbsp;&nbsp;ww<br />
ww&nbsp;w&nbsp;&nbsp;ww<br />
ww&nbsp;ww&nbsp;ww<br />
&nbsp;ww&nbsp;&nbsp;ww<br />
</div>
<div class='bet-x'>
xxx&nbsp;&nbsp;&nbsp;xx<br />
&nbsp;xxx&nbsp;xx<br />
&nbsp;&nbsp;xxxx<br />
&nbsp;xxx&nbsp;xx<br />
xxx&nbsp;&nbsp;&nbsp;xx<br />
</div>
<div class='bet-y'>
y&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;yy<br />
&nbsp;y&nbsp;&nbsp;&nbsp;yy<br />
&nbsp;&nbsp;y&nbsp;yy<br />
&nbsp;&nbsp;&nbsp;yy<br />
&nbsp;&nbsp;&nbsp;yy<br />
</div>
<div class='bet-z'>
zzzzzzzz<br />
&nbsp;&nbsp;&nbsp;&nbsp;zzz<br />
&nbsp;&nbsp;&nbsp;zz<br />
&nbsp;zzz<br />
zzzzzzzz<br />
</div>
<div class='bet-space'>&nbsp;&nbsp;</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ASCII Sentence Generator - Script Codes CSS Codes

body{ font-family:monaco; width:90%; margin:0 5%; padding-top:20px;
}
div{ display:none; float:left; margin-right:20px; margin-bottom:20px;
}
#text_area{ display:block;
}
ul{ margin:0; padding:0;
}
li{ float:left; margin-right:10px; margin-bottom:20px; list-style-type:none;
}
input{ margin-bottom:30px;
}
.capit{ text-transform:uppercase;
} 

ASCII Sentence Generator - Script Codes JS Codes

$('body').on('blur', '#input_area', function(){ $("#text_area").html('<ul></ul>'); var make_awesome = $(this).val().split(''); for(var i = 0; i < make_awesome.length; i++) { if(make_awesome[i] != ' ') { if(make_awesome[i].toLowerCase() == make_awesome[i]){ var the_html = $('.bet-' + make_awesome[i]).html(); $("#text_area ul").append('<li>' + the_html + '</li>'); } else{ var the_html = $('.bet-' + make_awesome[i].toLowerCase()).html(); $("#text_area ul").append("<li class='capit'>" + the_html + '</li>'); } } else{ var the_html = $('.bet-space').html(); $("#text_area ul").append('<li>' + the_html + '</li>'); } }
});
$('#input_area').trigger('blur');
ASCII Sentence Generator - Script Codes
ASCII Sentence Generator - Script Codes
Home Page Home
Developer Chris Barnes
Username csbarnes
Uploaded August 11, 2022
Rating 3
Size 2,605 Kb
Views 34,408
Do you need developer help for ASCII Sentence Generator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Barnes (csbarnes) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!