Returning to JavaScript
JavaScript was the first coding language I really loved. Readers may assume I am being tongue-in-cheek
but one of the ways I came to code was through the blog I write about Hindi-language cinema.
JavaScript was the language I used to make my blog more visually interesting. I spent hours excitedly figuring out how to make the images I included modal, based on the examples on w3schools.
JavaScript is undeniably complex- the internet is full of “JavaScript is weird/JavaScript is dumb” posts and threads- but what mattered to me as a beginner was just how easy it was to get started and do something interesting dynamic.
Over the course of my time at Flatiron I moved away from vanilla JavaScript, as we moved through the course and as a personal preference- its not the right solution to a lot of questions. But I have since returned to some vanilla JS, and I have been reminded of just how fun it can be, and how quick and easy it is to build something dynamic.
The above is a super simple example- click on the heart icon and it changes color from red to pink. A few lines of code and you have something to show. But it is easy to make it do more. Lets add buttons to change the color.
To start, lets create four buttons and append them to the page.
const app = document.getElementById("app");
const heart = document.createElement("div");
const pinkBtn = document.createElement("button");
const blueBtn = document.createElement("button");
const purpleBtn = document.createElement("button");
const orangeBtn = document.createElement("button");heart.innerHTML = `
<img src = https://cdn2.iconfinder.com/data/icons/media-player-ui/512/Media-Icon-25-512.png
/>`;
heart.className = "red";
heart.addEventListener("click", () => changeClass());const changeClass = () => {
heart.className = "pink";
};
heart.append(pinkBtn)
heart.append(blueBtn)
heart.append(purpleBtn)
heart.append(orangeBtn)
app.append(heart);
Excellent- we now have 4 buttons attached to the ‘heart’ div. Lets add some functionality. Instead of the entire heart div listening for the click event that changed the div class (and background color), lets add the event listener to the pinkBtn itself:
pinkBtn.innerText = 'Pink'
pinkBtn.addEventListener("click", () => changeClass());const changeClass = () => {
heart.className = "pink";
};
We can repeat the process for all the other buttons too, and with very few lines of code, a few steps, and some straight-forward functions we end up with a dynamic little app.
You never forget your first love. ❤
