ASCII Sentence Generator
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 - 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'>
aaa<br />
aa aa<br />
aaaaaaa<br />
aa aaa<br />
aa aaa<br />
</div>
<div class='bet-b'>
bbbbbb<br />
bb bbb<br />
bbbbbb<br />
bb bbb<br />
bbbbbbb<br />
</div>
<div class='bet-c'>
ccccc<br />
ccc cc<br />
ccc<br />
ccc <br />
cccccc<br />
</div>
<div class='bet-d'>
dddddd<br />
dd dd<br />
dd dd<br />
dd 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'>
gggggg<br />
ggg <br />
gg ggg<br />
ggg gg<br />
ggggggg<br />
</div>
<div class='bet-h'>
hh hh<br />
hh hh<br />
hhhhhhhh<br />
hh hh<br />
hh hh<br />
</div>
<div class='bet-i'>
iiiiiiii<br />
ii<br />
ii<br />
ii<br />
iiiiiiii<br />
</div>
<div class='bet-j'>
jjjjj<br />
jj<br />
jj<br />
j jjj<br />
jjjj<br />
</div>
<div class='bet-k'>
kk kk<br />
kk kk<br />
kkkk<br />
kk kk<br />
kk kk<br />
</div>
<div class='bet-l'>
ll<br />
ll<br />
ll<br />
ll<br />
llllll<br />
</div>
<div class='bet-m'>
mmm mmm<br />
mm mm mm<br />
mm m mm<br />
mm mm<br />
mm mm<br />
</div>
<div class='bet-n'>
nnn nn<br />
nnnn nn<br />
nn nn nn<br />
nn nnnn<br />
nn nnn<br />
</div>
<div class='bet-o'>
ooooo<br />
oo oo<br />
oo oo<br />
oo oo<br />
ooooo<br />
</div>
<div class='bet-p'>
pppppp<br />
pp pp<br />
ppppp<br />
pp<br />
pp<br />
</div>
<div class='bet-q'>
qqqqq<br />
qq qq<br />
qq q qq<br />
qq qq<br />
qqqqq q<br />
</div>
<div class='bet-r'>
rrrrrr<br />
rr rrr<br />
rrrrrr<br />
rr rr<br />
rr rr<br />
</div>
<div class='bet-s'>
sssss<br />
sss<br />
ssss<br />
sss<br />
ssssss<br />
</div>
<div class='bet-t'>
tttttttt<br />
tt<br />
tt<br />
tt<br />
tt<br />
</div>
<div class='bet-u'>
uu uu<br />
uu uu<br />
uu uu<br />
uu uu<br />
uuuuuu<br />
</div>
<div class='bet-v'>
v vv<br />
v vv<br />
v vv<br />
v vv<br />
vv<br />
</div>
<div class='bet-w'>
ww ww<br />
ww ww<br />
ww w ww<br />
ww ww ww<br />
ww ww<br />
</div>
<div class='bet-x'>
xxx xx<br />
xxx xx<br />
xxxx<br />
xxx xx<br />
xxx xx<br />
</div>
<div class='bet-y'>
y yy<br />
y yy<br />
y yy<br />
yy<br />
yy<br />
</div>
<div class='bet-z'>
zzzzzzzz<br />
zzz<br />
zz<br />
zzz<br />
zzzzzzzz<br />
</div>
<div class='bet-space'> </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');
Developer | Chris Barnes |
Username | csbarnes |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,605 Kb |
Views | 34,408 |
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!
Name | Size |
A Pen by Chris Barnes | 1,610 Kb |
3D CSS3 Cube | 4,179 Kb |
SCSS Loading Circle Mixin | 2,985 Kb |
Rainbow Drops | 2,365 Kb |
The Last Question | 12,949 Kb |
CSS3 Selection Highlighting | 1,621 Kb |
Rainbow Drops 2 | 2,516 Kb |
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!
Name | Username | Size |
Flexbox slider | Rendro | 3,459 Kb |
Responsive slide | Thorien | 2,400 Kb |
Count up | Alanshortis | 2,391 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Basic template | Tomcat | 1,675 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!