Practicing JavaScript by playing with SVGs on YouTube web app
Another simple mini-app in JavaScript - this one manipulates an SVG
By: Ajdin Imsirovic 27 November 2019
In this article, we’ll practice some DOM manipulation in JavaScript.
Image by CodingExercises
What we’ll be building
We’ll use some DOM manipulation in JavaScript to copy (clone) the SVG that is the YouTube logo on the YouTube homepage. Then we’ll clear the contents of the body element - erase the entire YouTube homepage in the client. Then we’ll append the YouTube SVG we copied (cloned), we’ll dynamically add a button, and we’ll listen for a click event on this button to make the logo bigger on button click.
Here’s the code:
var allSVGs = document.body.querySelectorAll('svg');
var theLogo = allSVGs[1];
var copiedLogo = theLogo.cloneNode(true);
copiedLogo;
document.body.innerHTML = "";
document.body.appendChild(copiedLogo);
copiedLogo.setAttribute('style', '');
copiedLogo.setAttribute('width', '50vw');
var btn = document.createElement('button');
document.body.appendChild(btn);
btn.innerHTML = `
<button onclick="increaseSizeOfLogo()">+</button>
`
var increaseSizeOfLogo = function() {
copiedLogo.setAttribute('width', '60vw')
}
This code can be made better; currently, the button click always resizes the logo to the same width of 60vw. Effectively, the user will perceive this as the button not working after the first click.
We can make this more dynamic, as follows:
var allSVGs = document.body.querySelectorAll('svg');
var theLogo = allSVGs[1];
var copiedLogo = theLogo.cloneNode(true);
var sizeOfLogo = 50;
var unitOfMeasure = "vw";
copiedLogo;
document.body.innerHTML = "";
document.body.appendChild(copiedLogo);
copiedLogo.setAttribute('style', '');
copiedLogo.setAttribute('width', sizeOfLogo);
var btn = document.createElement('button');
document.body.appendChild(btn);
btn.innerHTML = `
<button onclick="increaseSizeOfLogo()">+</button>
`
var increaseSizeOfLogo = function() {
sizeOfLogo = sizeOfLogo + 10;
copiedLogo.setAttribute('width', (sizeOfLogo.toString() + unitOfMeasure) );
}
With the above code, we’re sort of getting there. But there is still space for improvement. Here’s a naive solution:
var allSVGs = document.body.querySelectorAll('svg');
var theLogo = allSVGs[1];
var copiedLogo = theLogo.cloneNode(true);
var sizeOfLogo = prompt('Set size of logo in vw?');
console.log(sizeOfLogo);
// var sizeOfLogo = 50;
var unitOfMeasure = "vw";
document.body.innerHTML = "";
document.body.appendChild(copiedLogo);
copiedLogo.setAttribute('style', '');
copiedLogo.setAttribute('width', sizeOfLogo + unitOfMeasure);
var btn1 = document.createElement('button');
document.body.appendChild(btn1);
btn1.innerHTML = `
<button onclick="increaseSizeOfLogo()">+</button>
`
var increaseSizeOfLogo = function() {
sizeOfLogo = sizeOfLogo + 10;
console.log(sizeOfLogo);
// copiedLogo.setAttribute('width', (sizeOfLogo.toString() + unitOfMeasure) );
}
The problem with the above code is that the logo size gets concatenated from 50 to 5010, instead of added from 50 to 60.
The reason why this happens is: the prompt() function will always return a string, and we need our value to be a number.
Here’s the fix:
var allSVGs = document.body.querySelectorAll('svg');
var theLogo = allSVGs[1];
var copiedLogo = theLogo.cloneNode(true);
var sizeOfLogo = +(prompt('Set size of logo in vw?'));
console.log(sizeOfLogo);
// var sizeOfLogo = 50;
var unitOfMeasure = "vw";
document.body.innerHTML = "";
document.body.appendChild(copiedLogo);
copiedLogo.setAttribute('style', '');
copiedLogo.setAttribute('width', sizeOfLogo + unitOfMeasure);
var btn1 = document.createElement('button');
document.body.appendChild(btn1);
btn1.innerHTML = `
<button onclick="increaseSizeOfLogo()">+</button>
`
var increaseSizeOfLogo = function() {
sizeOfLogo = sizeOfLogo + 10;
console.log(sizeOfLogo);
copiedLogo.setAttribute('width', (sizeOfLogo.toString() + unitOfMeasure) );
}
If we place the prompt function call inside a pair of round brackets, we can convert the resulting string into a number by simply adding a plus sign in front of it, like this:
var sizeOfLogo = +(prompt('Set size of logo in vw?'));
That’s it for this simple exercise in JavaScript.
