const JS = “Just Sexy”

When we think of things that are sexy we usually think of physical attraction, design, photos of food at a 3 star Michelin restaurants ect… but java script is in its own league. It’s literally everywhere, and what makes apps and websites interactive. There is a certain satisfaction that one feels when visiting a website and feeling like you have control of the webpage. For example scrolling out on google maps until it is literally a map of the entire world and scrolling back in to your current location, or clicking on an image and moving it, or even being able to scroll endlessly though instagram or twitter without having to refresh the page these are all made possible by javascript.

Most of the interactive aspects of JS are handled by events. To make it all happen we use a thing called eventListeners. Event listeners are doing exactly what it the name implies; they are listening out for certain events. Example document.addEventListener(“DOMContentLoaded”, doThis) would trigger the function do this when the page is loaded, document.addEventListener(“click”, doThat) would trigger the “doThat” function when ever the mouse was clicked on the page. There are an incredible amount of event listeners out there. Check out all the possibilities here https://developer.mozilla.org/en-US/docs/Web/Events.

My phase 4 project using java script is a one page application that uses the “click” and “hover”events quite a bit. It is a game where clicking on objects makes them smaller until they disappear while hovering over the game board moves the objects. It sounds pretty simple but it was my first attempt at making a game so the learning curve was pretty steep.

Each of the “blobs” are and HTML <div>. The task was to use the click event listener to shrink the blobs until they disappear. Here is a walkthrough of my solution.

Warning this code is in OOJS (object oriented javascript)

First I had to find the <div> that I wanted to give the click event to.

setDiv () {
return document.getElementById(`${this.name}`)
}

Then I made a function heightPx() to turn the height (there is also a widthPx() that is basically the same function for the width) into an integer that i could subtract from.

heightPx = () => {
let villain = this.setDiv()
let a = villain.style.height.split("")
a.splice(-2, 2)
let num = parseInt(a.join(""))
return num
}

Next was to make the function that subtracts the height (same for width) from the <div>. In this function uses the previous function heightPx() and subtracts 20 from the number, then returns the new number in pixel format.

lessBlobHeight = () => {
let villain = this.setDiv()
let newNum = this.heightPx() -20
return villain.style.height = "" + newNum + "px"
}

Next step I made a function to combine the functions that subtract the height and the width into one.

lessBlob = () => {
this.lessBlobHeight()
this.lessBlobWidth()
}

Finally the function smiteVillain() attaches the click event to the div that I want to shrink the size of.

smiteVillain = () => {
this.setDiv().addEventListener("click", this.lessBlob)
}

Whew… and it worked!

There is so much more to javascript than just event listeners and I have barely scratched the surface. The possibilities with javascript are limitless! When first starting my coding journey I never dreamed I would be making a function game but with the help of javascript anything is possible!