Well starting from this cleaned-up version of the code:
(function(d) {
"use strict";
var clCorner = d.querySelectorAll(".c1-corner");
function over() {
for (var c = 0; c < clCorner.length; c+= 1) {
clCorner[c].classList.add("scale");
}
}
function out() {
for (var c = 0; c < clCorner.length; c+= 1) {
clCorner[c].classList.remove("scale");
}
}
for (var c = 0; c < clCorner.length; c += 1) {
clCorner[c].addEventListener("mouseover", over, false);
clCorner[c].addEventListener("mouseout", out, false);
}
}(document));
The first thing that I notice about this code is that each for loop is looping over exactly the same thing. The querySelectorAll method supports a forEach method, so let’s use the forEach method instead of for loops.
(function(d) {
"use strict";
var clCorner = d.querySelectorAll(".c1-corner");
function over() {
clCorner.forEach(function (corner) {
corner.classList.add("scale");
});
}
function out() {
clCorner.forEach(function (corner) {
corner.classList.remove("scale");
});
}
clCorner.forEach(function (corner) {
corner.addEventListener("mouseover", over, false);
corner.addEventListener("mouseout", out, false);
});
}(document));
About the only duplication involved now is that clCorner is being dealt with in three different places, so we can move that into a separate function called eachCorner():
(function(d) {
"use strict";
function eachCorner(callback) {
d.querySelectorAll(".c1-corner").forEach(callback);
}
function over() {
eachCorner(corner => corner.classList.add("scale"));
}
function out() {
eachCorner(corner => corner.classList.remove("scale"));
}
eachCorner(function (corner) {
corner.addEventListener("mouseover", over, false);
corner.addEventListener("mouseout", out, false);
});
}(document));
And because the over and out functions are so,simple, we can use arrow notation on those:
(function(d) {
"use strict";
function eachCorner(callback) {
d.querySelectorAll(".c1-corner").forEach(callback);
}
const over = () => eachCorner(corner => corner.classList.add("scale"));
const out = () => eachCorner(corner => corner.classList.remove("scale"));
eachCorner(function (corner) {
corner.addEventListener("mouseover", over, false);
corner.addEventListener("mouseout", out, false);
});
}(document));
I don’t think that I would modernise things much beyond there 