A long time ago, I made a little script that converts whatever you type into animals. You can try it here. And you can download and play with the code here. And you can learn more about how it was done below…To make your own ZooifIt, you’ll need a folder with a set of images corresponding to each letter of the alphabet. I made mine with animals, but you could do fancy script letters, or fruits and vegetables, or whatever. I named each file after the appropriate letter: a.png, b.png, … z.png. This will make your life easier down the road.

You’ll also need a basic HTML/CSS website, with an input box and a submit button. You can model yours off mine, which is posted in github. If this seems too difficult for you, I suggest learning to build a basic website before continuing.

The hard part is writing the script to make the webpage change based on user input. Let’s go line by line through the JavaScript, shall we?

document.addEventListener('DOMContentLoaded', function(){

This line makes sure the JavaScript is listening to the DOM (Document Object Model). The DOM is basically a model of your HTML file that the JavaScript file can use.

var button = document.querySelector('button');

Here we’re naming a variable “button” which is connected to the button in our HTML document.

button.addEventListener('click', function(ev){

Now we’re making sure our website doesn’t do anything until the user clicks the button.

var text = document.body.querySelector('input').value;

This piece makes a variable called text which is the value of whatever the user inputs into the input box.

var text2 = text.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~() ]/g,"");

Now we’re taking all the text and replacing all the punctuation with nothing. If this looks scary, now’s a great time to learn regular expressions. If you want to include pictures for punctuation, you can. This might be difficult, since you can’t always name files things like ..png the way you can name them a.png.

var text3 = text2.replace(/\d+/g, '');

More text manipulation with regular expressions, this time getting rid of numbers. Again, this is optional if you want to include pictures for numbers.

var text4 = text3.toLowerCase();

Normalizing the text to all lowercase. Once again, optional if you want to differentiate upper and lowercase.

var letterArray = text4.split('');

Alright, now that we’re done with text processing and normalization, we get to the interesting bit. Here we’re splitting the text as much as possible. In other words, every letter becomes its own element in an array. So, an input like “The quick brown fox!” will, after all this processing, become an array like [‘t’,’h’,’e’,’q’,’u’,’i’,’c’,’k’,’b’,’r’,’o’,’w’,’n’,’f’,’o’,’x’].

var field = document.querySelector('#field')
field.innerHTML = '';

Making a new variable here, which currently is a space just below the input box in the HTML DOM with nothing in it.

for(var i=0; i< letterArray.length; i++){

Time to start the for-loop!! Are you excited yet? I am. We’re going to cycle through each of the letters in our letterArray.

var newZoo = "/img/" + letterArray[i] + ".svg";

We’re combining /img/ with the letter we’re working on and .svg in order to make a nice file path, like “/img/t.svg” which will point to the T svg file.

var ZooImg=document.createElement("img"); 
ZooImg.setAttribute('src', newZoo); 
field.appendChild(ZooImg); } })     })

All of this basically creates a new image element, based on the file path we just made, and sticks it into the field we created earlier. Then, it closes the for-loop. Since this is a for-loop, the process will complete until we run out of letters in our array.

And that’s how ZooifyIt works!