My Portfolio Website

Projects Portfolio Project: Personal Portfolio Website
1

Hi guys,

I have done my portfolio website project. I’ve used javaScript to change the css of 4 elements.

What do you think about this javaScript code?


let hover1 = document.getElementById("amae");
let hover2 = document.getElementById("photomatic");
let hover3 = document.getElementById("tea");
let hover4 = document.getElementById("aprisco");


let hoover = (a) => {
    a.style.transform = 'scale(1.1)';
    a.style.transition = 'all .5s';
}

let mouseOut = (a) => {
    a.style.transform = 'scale(1.0)';
    a.style.transition = 'all .5s';
}

hover1.onmouseover = function () {hoover(hover1)};
hover1.onmouseout = function () {mouseOut(hover1)};

hover2.onmouseover = function () {hoover(hover2)};
hover2.onmouseout = function () {mouseOut(hover2)};

hover3.onmouseover = function () {hoover(hover3)};
hover3.onmouseout = function () {mouseOut(hover3)};

hover4.onmouseover = function () {hoover(hover4)};
hover4.onmouseout = function () {mouseOut(hover4)};

Here’s the website and repo:

www.gabrielc.tech

2

Hello,

Your JavaScript code is working and gets the job done. It’s a nice effect as well.

It isn’t entirely necessary though. You can do the same with CSS using the :hover pseudo-class

#amae, #photomatic, #tea, #aprisco {
    transform: scale(1.0);
    transition: all .5s;
}

#amae:hover, #photomatic:hover, #tea:hover, #aprisco:hover {
    transform: scale(1.1);
}
1 Like
3

That is definitely the best solution for it. However, the idea was to use some javaScript as it is required in the project.

Surely I will adopt your suggestion!

Do you know if I can use querySelector to write less code in this case?

Thank you for your feedback!

4

Ah I remember that requirement. I think I ended up doing a clock or something. :laughing:

Using just querySelector, it wouldn’t require less code. Your use of getElementById is good here. You can still shorten the code in other ways though. Instead of creating a function for each of the events to wrap calling your hoover() or mouseOut() functions, you could assign hoover and mouseOut directly to the event handler.

It works because JavaScript will send an object to the function that contains information about the element it was triggered on. We can use that information to change the styles on whatever element that triggered it without having to know ahead of time.

let hover1 = document.getElementById('amae');
let hover2 = document.getElementById('photomatic');
let hover3 = document.getElementById('tea');
let hover4 = document.getElementById('aprisco');

let hoover = (event) => {
  event.target.style.transform = 'scale(1.1)';
  event.target.style.transition = 'all .5s';
}

let mouseOut = (event) => {
  event.target.style.transform = 'scale(1.0)';
  event.target.style.transition = 'all .5s';
}

hover1.onmouseover = hoover;
hover1.onmouseout = mouseOut;

hover2.onmouseover = hoover;
hover2.onmouseout = mouseOut;

hover3.onmouseover = hoover;
hover3.onmouseout = mouseOut;

hover4.onmouseover = hoover;
hover4.onmouseout = mouseOut;

If you did want to write less code (besides just using the pure CSS method, of course), you could use querySelectorAll, but that would require a bit more work in the HTML too. querySelectorAll can return an array of the matches rather than just one element. If you added a class of project-link to each of them, you could do something like this instead:

let hoover = (event) => {
  event.target.style.transform = 'scale(1.1)';
  event.target.style.transition = 'all .5s';
}

let mouseOut = (event) => {
  event.target.style.transform = 'scale(1.0)';
  event.target.style.transition = 'all .5s';
}

document.querySelectorAll('.project-link').forEach(project => {
  project.onmouseover = hoover;
  project.onmouseout = mouseOut;
});

That combines the optimizations we did in the earlier example with querySelectorAll and forEach

5

Hey, I really appreciate your help! For sure it helps with the learning processes much more.

Once again, thank you!