Meet Buddy!
JavaScript is definitely a step further than simple HTML and CSS. If HTML is building with digital legos, JavaScript is the Technic version of them.
Nevertheless, I tried making something that would be somewhat simple, fun, and interactive. And so Buddy was born…
There were a lot of hurdles along the way that became somewhat easier as I came to be more familiarized with the “language”.
First I tried playing with the annoying message box that pops up when you first load a page. But I knew I didn’t want to include that on my final page. Then, while talking to a friend, he suggested that I should start with clickable boxes. There are limitless possibilities to what one can do with JavaScript, so starting inside the box seemed a logical first step. The first thing I tried were boxes that would make text appear and disappear on command. But that wasn’t so exciting. So I came up with the idea that instead of making things disappear, it could change the object completely. And if I was doing it with text, it sure could be done with images.
In that moment I thought JavaScript could become my new best friend; my buddy. And that took me straight to dogs. And to Buddy.
It took me some Googling and a few attempts to make the leap between text and images, but the satisfaction of seeing Buddy do different things once I figured it out made it all worth while. I added some CSS styling and it seemed I was on the right track. Yet something was missing.
There wasn’t enough interactiveness. Clicking everything to get a response seemed cold. And while browsing I found the option of moving the mouse over something to change, only to go back once the mouse moved away. That was the answer. It took some figuring out on my part to realize how to apply it to more than one element -IDs and classes didn’t seem to work, but eventually I figured it out as well. And lastly, I decided I want it to take this interaction to the next level, and decided to add it to the first picture of Buddy.
I had the functions and the images, but again, couldn’t find any answers on how to move from plain text to images. And for this solution I’m the most proud of. I figured that if the object could be anything inside the HTML, it also could be sourced from outside. And so I came up with the obj.src=”name.jpg” line and the page was finally finished.
But what is JavaScript?
JavaScript, not to be confused with Java, is the language in the HTML -which I explained in my previous post Ode to Mate, that allows for all the interactivity that happens on the webpage. As well as CSS, JavaScript has a language different from HTML. And much more complex.
But what interactions you might ask? All and any. Elements that move, enlarge, change color, have a text appear over them, carousel, swipe, pop up, that allow for search; all of these do so in HTML thanks to JavaScript.
In my case, what I did was create a number of boxes, assign an ID to each of them, and add a function to each box based on that ID. This function was made particularly to change a picture displayed under the boxed on a click.
Simultaneously, I also added a different function to each box which was to change the message inside the box if the mouse was placed on top of the box -and to go back to normal once the mouse moved away.
Also, here’s my GitHub Repos:
https://github.com/teveomateo/java0.git
