JavaScript allows us to print text with your font that utilizes your custom fonts. We would do some logical stuff to create a font. For the user input, the given code will print in the designed font.
Example:
Input: ROOT
Output:
. .######. .
. .# . . . . #. .
. .# . ## . . .
. .# . . . #. . .
. .# . . . . #. .
. . ###### . .
. . # . . . . # . .
. . # . . . . # . .
. . # . . . . # . .
. . ###### . .
. . ###### . .
. . # . . . . # . .
. . # . . . . # . .
. . # . . . . # . .
. . ###### . .
. . ###### . .
. . . . ## . . . .
. . . . ## . . . .
. . . . ## . . . .
. . . . ## . . . .
JavaScript program to print with your own font
Example: To demonstrate printing our own font using JavaScript.
JavaScript
let name = "Geek"
let result = '';
for (let x = 0; x < name.length; x++) {
let c = name[x].toUpperCase();
switch (c) {
case 'A':
result +=
'..######..\n' +
'..#....#..\n' +
'..######..\n' +
'..#....#..\n' +
'..#....#..\n\n';
break;
case 'B':
result +=
'..######..\n' +
'..#....#..\n' +
'..#####...\n' +
'..#....#..\n' +
'..######..\n\n';
break;
case 'C':
result +=
'..######..\n' +
'..#.......\n' +
'..#.......\n' +
'..#.......\n' +
'..######..\n\n';
break;
case 'D':
result +=
'..#####...\n' +
'..#....#..\n' +
'..#....#..\n' +
'..#....#..\n' +
'..#####...\n\n';
break;
case 'E':
result +=
'..######..\n' +
'..#.......\n' +
'..#####...\n' +
'..#.......\n' +
'..######..\n\n';
break;
case 'F':
result +=
'..######..\n' +
'..#.......\n' +
'..#####...\n' +
'..#.......\n' +
'..#.......\n\n';
break;
case 'G':
result +=
'..######..\n' +
'..#.......\n' +
'..#.####..\n' +
'..#....#..\n' +
'..#####...\n\n';
break;
case 'H':
result +=
'..#....#..\n' +
'..#....#..\n' +
'..######..\n' +
'..#....#..\n' +
'..#....#..\n\n';
break;
case 'I':
result +=
'..######..\n' +
'....##....\n' +
'....##....\n' +
'....##....\n' +
'..######..\n\n';
break;
case 'J':
result +=
'..######..\n' +
'....##....\n' +
'....##....\n' +
'..#.##....\n' +
'..####....\n\n';
break;
case 'K':
result +=
'..#...#...\n' +
'..#..#....\n' +
'..##......\n' +
'..#..#....\n' +
'..#...#...\n\n';
break;
case 'L':
result +=
'..#.......\n' +
'..#.......\n' +
'..#.......\n' +
'..#.......\n' +
'..######..\n\n';
break;
case 'M':
result +=
'..#....#..\n' +
'..##..##..\n' +
'..#.##.#..\n' +
'..#....#..\n' +
'..#....#..\n\n';
break;
case 'N':
result +=
'..#....#..\n' +
'..##...#..\n' +
'..#.#..#..\n' +
'..#..#.#..\n' +
'..#...##..\n\n';
break;
case 'O':
result +=
'..######..\n' +
'..#....#..\n' +
'..#....#..\n' +
'..#....#..\n' +
'..######..\n\n';
break;
case 'P':
result +=
'..######..\n' +
'..#....#..\n' +
'..######..\n' +
'..#.......\n' +
'..#.......\n\n';
break;
case 'Q':
result +=
'..######..\n' +
'..#....#..\n' +
'..#.#..#..\n' +
'..#..#.#..\n' +
'..######..\n\n';
break;
case 'R':
result +=
'..######..\n' +
'..#....#..\n' +
'..#.##...\n' +
'..#...#...\n' +
'..#....#..\n\n';
break;
case 'S':
result +=
'..######..\n' +
'..#.......\n' +
'..######..\n' +
'.......#..\n' +
'..######..\n\n';
break;
case 'T':
result +=
'..######..\n' +
'....##....\n' +
'....##....\n' +
'....##....\n' +
'....##....\n\n';
break;
case 'U':
result +=
'..#....#..\n' +
'..#....#..\n' +
'..#....#..\n' +
'..#....#..\n' +
'..######..\n\n';
break;
case 'V':
result +=
'..#....#..\n' +
'..#....#..\n' +
'..#....#..\n' +
'...#..#...\n' +
'....##....\n\n';
break;
case 'W':
result +=
'..#....#..\n' +
'..#....#..\n' +
'..#.##.#..\n' +
'..##..##..\n' +
'..#....#..\n\n';
break;
case 'X':
result +=
'..#....#..\n' +
'...#..#...\n' +
'....##....\n' +
'...#..#...\n' +
'..#....#..\n\n';
break;
case 'Y':
result +=
'..#....#..\n' +
'...#..#...\n' +
'....##....\n' +
'....##....\n' +
'....##....\n\n';
break;
case 'Z':
result +=
'..######..\n' +
'......#...\n' +
'.....#....\n' +
'....#.....\n' +
'..######..\n\n';
break;
case ' ':
result +=
'..........\n' +
'..........\n' +
'..........\n' +
'..........\n' +
'..........\n\n';
break;
case '.':
result += '----..----\n\n';
break;
default:
break;
}
}
// Displaying the stylized font output
console.log(result);
Output
..######.. ..#....... ..#.####.. ..#....#.. ..#####... ..######.. ..#....... ..#####... ..#....... ..######.. ..######.. ..#....... ..#####... ..#....... ..######.. ..#...#... ..#..#.... ..##.........
Time complexity: O(n) where n is the length of the input string name.
Space complexity: O(1).
JavaScript program to print with your own font using an object
An alternative approach to achieve the same result without using a switch statement for each character individually is to create a lookup object where each key represents a character and its corresponding value represents the stylized font.
Example: Create ASCII Art from Text Using Custom Fonts.
JavaScript
let name = "Geek";
let result = '';
const fontLookup = {
'A': '..######..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n',
'B': '..######..\n..#....#..\n..#####...\n..#....#..\n..######..\n\n',
'C': '..######..\n..#.......\n..#.......\n..#.......\n..######..\n\n',
'D': '..#####...\n..#....#..\n..#....#..\n..#....#..\n..#####...\n\n',
'E': '..######..\n..#.......\n..#####...\n..#.......\n..######..\n\n',
'F': '..######..\n..#.......\n..#####...\n..#.......\n..#.......\n\n',
'G': '..######..\n..#.......\n..#.####..\n..#....#..\n..#####...\n\n',
'H': '..#....#..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n',
'I': '..######..\n....##....\n....##....\n....##....\n..######..\n\n',
'J': '..######..\n....##....\n....##....\n..#.##....\n..####....\n\n',
'K': '..#...#...\n..#..#....\n..##......\n..#..#....\n..#...#...\n\n',
'L': '..#.......\n..#.......\n..#.......\n..#.......\n..######..\n\n',
'M': '..#....#..\n..##..##..\n..#.##.#..\n..#....#..\n..#....#..\n\n',
'N': '..#....#..\n..##...#..\n..#.#..#..\n..#..#.#..\n..#...##..\n\n',
'O': '..######..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n',
'P': '..######..\n..#....#..\n..######..\n..#.......\n..#.......\n\n',
'Q': '..######..\n..#....#..\n..#.#..#..\n..#..#.#..\n..######..\n\n',
'R': '..######..\n..#....#..\n..#.##...\n..#...#...\n..#....#..\n\n',
'S': '..######..\n..#.......\n..######..\n.......#..\n..######..\n\n',
'T': '..######..\n....##....\n....##....\n....##....\n....##....\n\n',
'U': '..#....#..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n',
'V': '..#....#..\n..#....#..\n..#....#..\n...#..#...\n....##....\n\n',
'W': '..#....#..\n..#....#..\n..#.##.#..\n..##..##..\n..#....#..\n\n',
'X': '..#....#..\n...#..#...\n....##....\n...#..#...\n..#....#..\n\n',
'Y': '..#....#..\n...#..#...\n....##....\n....##....\n....##....\n\n',
'Z': '..######..\n......#...\n.....#....\n....#.....\n..######..\n\n',
' ': '..........\n..........\n..........\n..........\n..........\n\n',
'.': '----..----\n\n'
};
for (let x = 0; x < name.length; x++) {
let c = name[x].toUpperCase();
result += fontLookup[c] || '';
}
console.log(result);
Output
..######.. ..#....... ..#.####.. ..#....#.. ..#####... ..######.. ..#....... ..#####... ..#....... ..######.. ..######.. ..#....... ..#####... ..#....... ..######.. ..#...#... ..#..#.... ..##.........
Time complexity: O(n) where n is the length of the input string name.
Space complexity: O(1).