Portfolio Project- please help

Hi, I am on the portfolio project for the full-stack engineer https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-portfolio-project-personal-portfolio-website/modules/wdcp-22-personal-portfolio-project/kanban_projects/portfolio-website .

I’ve mostly finished the html and css and am working on adding interactivity with js.

Nothing I try is working how I had hoped. I was trying to create a mouseover event when someone mouses over one of the nav elements, its corresponding flower icon would spin. But I do this and nothing happens. I know the javascript is connected because I try other things like setting the display to “none” on mouse over and it works. Also I try setting the display back to “block” on mouseout and then it wont disappear on mouseover even though it worked before.

I don’t know what I am doing wrong.

Please help. Here is my github link for the project. https://github.com/waywarddaisy/portfolio-site
The js file is only connected to the contact html and the index html because i was still testing. Thank you!

Welcome to the Get Help category!

This is where you can ask questions about your code. Some important things to remember when posting in this category :slight_smile:

  • Learn how to ask a good question and get a good answer!
  • Remember to include a link to the exercise you need help with!
  • If someone answers your question, please mark their response as a solution :white_check_mark:
  • Once you understand a new concept, come back and try to help someone else!

Hi there,

I would perhaps try using CSS over JS. With CSS you could use :hover for the animation in tandem with @keyframes.

Thank you for your response. I did use css for the hover over the flower icon and it worked. I wanted to use javascript in addition because it is a requirement of the project, but also because I wanted the flower to spin when I mouse over on the nav title (like about, home, contact, etc) and not just the flower itself.

I also tried to use javascript on the contact page where when the contact message was done and the person clicked “finish” it would change the screen to show another image and button by way of using javascript onclick event with .style.display= “none”. But the event only works as the click is happening. The letter doesn’t stay hidden and the other image doesn’t stay visible. I don’t know what I’m doing wrong. When I look at tutorials online, they say for the most part to do exactly what I am doing.

If you want to have the flower spin when you hover over the title, you can do something like this:

img {
  transition: transform 500ms linear;
}

parent:hover img {
  transform: rotate(180deg);
}

This way you’re targeting the image with the transition, but it “activates” when you hover over its parent container. Of course, you can change the degree and timing functions.

I would be happy to help you with your JavaScript problem, but the github link does not work. If you could share another link or post your code here, I can give it my best shot. :slight_smile:

1 Like

Thanks so much! I’m sorry my repository was on private. I changed it to public! Here’s the link https://github.com/waywarddaisy/portfolio-site.

I will try the css you mentioned above too! Thank you.

Also in the .js file you may be able to see what I tried to do with the contact page that also didn’t work.

Thank you again so much!!

So, I took a look at your code. I am pretty new to JavaScript myself, but you may be having a problem with the page refreshing after you submit.

I changed your form to:

<form id="myForm">

And changed the JavaScript to:

document.getElementById('myForm').addEventListener('submit', function(e){
    e.preventDefault();
    document.getElementById('letter').style.display = 'none';
    document.getElementById('sending').style.display = 'block';
});

The code above does what you were looking for. But—on a live page— I believe the preventDefault() would stop the form from actually being sent. As I have not started learning about it yet, I would love to hear from someone more knowledgeable on the matter.

I also noticed that you’re doing too much for your file paths. You will find it much easier to use relative file paths.
For instance, to link your CSS:

<link href="../CSS/index.css" rel="stylesheet">

Thank you so much for taking the time to do this! I realized the problem was that I was putting the javascript for all of the html pages in the same document. I didn’t know i had to separate them- i guess its stupid, but i didn’t know. I also changed all of my paths to relative paths and I used the CSS trick you gave me! Thank you so very much! Here is my site finally! Home

1 Like

Glad you figured some things out!

I have one last note on your flower rotation CSS. When the mouse moves out of the container, it suddenly stops the transformation which can look a little jarring. If you use CSS like the example below, it may look a little smoother.

.flower {
    transition: transform 2s linear;
}

a:hover .flower {
    transform: rotate(3turn);
}

Thank you so much for that! Its much better. I just updated it.

I hope I’m not taking up too much of your time, but I had one question that maybe you could help me with. Also please let me know if there is any way I could return the favor.

On my javascript, I wanted to be able to use a single function for multiple areas. For example I have a color changing function on mouseover and mouseout, but I had to make a separate function for each area I used it on (h1 and p). I tried using the (firstTitle.style.color = “#f8b7cd”) bold part as a parameter in the function so it was reusable, like so:

const changeColor = (value)=> {

   value.style.color = "#f8b7cd"
};

firstTitle.onmouseover = changeColor(firstTitle);

but it wouldn’t work.

You are not taking up my time at all! I browse the forums rather frequently. Do you want to use JavaScript to get more experience with it? Otherwise, I would recommend using CSS for hover animations. :slight_smile:

But for JavaScript, you will find it much easier to use something like this:

const foo = document.querySelectorAll('selectorType');

foo.forEach(ele => {
   ele.addEventListener('mouseover', () => {
      ele.style.color = 'color';
   });
   
   ele.addEventListener('mouseout', () => {
      if( ... ) {
         ele.style.color = 'color';
      } else {
         ele.style.color = 'color';
      }
   });
});

This selects all elements that have the same class and applies the forEach() method. If the beginning color of the element is different, there is an if…else statement to set the color back to its original. As I said previously, I am still pretty new to JavaScript…so there could be a better process to use, but this is what I came up with using my current knowledge.

Still recommend using CSS though. :wink:

Thank you so much! I truly appreciate it! Yes, I am purposely trying to use javascript because the project calls for it, even though it would be easier in CSS.

This is very helpful! I did a few things to reduce the amount of code, including using the event listeners you mentioned above. I also combined some functions.

For some reason when I use document.querySelectorAll or document.getElementsByTagName they dont work at all. Only get elements by ID and class seems to work for me. I’m not sure why. If I could use these selectors I could cut the code down even further.

let allThreeTitles = document.querySelectorAll('h1');
let theTitles = document.getElementsByTagName('h1');

theTitles.style.color = 'black';

allThreeTitles.style.color ="black";

I looked at your repository and did not see an example of what you were trying to do, but from the variable name, I assume this is for your projects page.

Let’s say that you gave all of the paragraphs and headers the class of “reColor”

const reColor = document.querySelectorAll('.reColor'); //Step 1

reColor.forEach(ele => { //Step 2
   ele.addEventListener('mouseover', () => { //Step 3.1
      ele.style.color = '#f8b7cd'; //Step 4.1
   });
   
   ele.addEventListener('mouseout', () => { //Step 3.2
      ele.style.color = '#0671b7'; //Step 4.2
   });
});

Step 1: The variable reColor is created and holds a list of the selected elements with the class “reColor” (Note: This is not an array)
Step 2: Because this list is not an array, it is iterated over with the method forEach().
Step 3.1/2: An addEventListener with the type mouseover and mouseout is created with an anonymous function.
Step 4.1/2: The element’s color is changed depending on mouseover and mouseout type.

Does that make sense?

1 Like

This is wonderful and so helpful!! Thank you thank you!!!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.