Personal Portfolio Project - Need Help with Java Script

Projects Portfolio Project: Personal Portfolio Website
1

Hi, here is a link to my portfolio project on GitHub Pages:

https://radams997.github.io/portfolio-project/

Here is a link to the repository:

I spent about 3 weeks on this and I struggled with a few things. There are still a lot of changes I would make but I found myself getting bogged down with styling so I had to cut myself off from making edits so I could go ahead and post and get feedback.

Here are the things I would love some help on:

  1. My original plan was to outline my page using CSS Grid simply because I had not used it much and I thought it would be easier than flexbox. I was wrong. Lol. For some reason, my brain cannot wrap my head around grid and how to use it for a full-page layout. You will see it used in a few elements, but I feel like I made it more complicated than it needed to be. Any feedback on the grid elements I did use is much appreciated.

  2. I struggled a lot with Javascript when learning it in the Codecademy lessons. I spent about a week trying to get the basic functionality that is used in this project, and it still doesn’t behave how I want it to! I wanted the projects to behave like the following:

  • The individual project descriptions are displayed when clicking on the Project Name.
  • When ANY project description is displayed, the text that says “Click project name to see more” would change to “Click project name to close”
  • “Click project name to see more” does not reapper until all project descriptions are hidden again.

Here is how it is actually behaving:

  • You have to double click on the project name to view the project description
  • The “click project name to see more” and “click project name to close” toggles back and forth on every click, regardless if a project description is visible.

I couldnt find the answers I was looking for when searching in the documentation, or maybe it was just above my head but I feel like I am missing a simple solution. Additionally, instead of creating 3 different functions for each individual project, I really wanted to find a solution where I could have used 1 function. I had to use getElementById() instead of getElementsByClassName() because the latter did not work when tested. I feel like I needed to use a loop but I struggled with how to use it.

I would so appreciate some insight because this drove me crazy!!!

  1. For the contact page, I used a form, simply because I wanted to practice using a form. The problem is, I have no idea how forms actually work LOL.

Did I need to create a new .html file to assign the action attribute? could I have just used contact.html instead?

I still dont understand the difference between GET and POST.

Where is the data going? I still dont understand. If this was my actual website and a prospective client entered their information into the form, how would I get that information? Maybe this will be explained in later lessons.

When the form is submitted, a message comes up that says “Thanks for your submission!”
a) I tried to style it so that the message would display in the middle of the form. I tried flexbox and grid but it didnt work so I deleted it.
b) What would be a solution so that when you refreshed the page the form would reappear? Assigning the action attribute to contact.html instead of the new submission.html and using javascript to hide the rest of the form once the form was submitted and to reappear once the page is refreshed?

I apologize if I am using incorrect terminology or not explaining things properly. Overall, I am really proud of the work I did for this project because I have definitely improved, although I am not where I want to be. Fortunately, I was able to find a lot of answers to questions I had as I worked, and I did learn a lot with this project! Any insight or feedback is greatly appreciated.

Thanks in advance!

2

It’s great to hear the progress you’ve made on your project! It sounds like you’ve put a lot of effort into learning and improving your skills, which is commendable. I really love your portfolio. Keep trying!

3

For 2. you could add logic to see if that element doesn’t have display in its style attribute:
text1.style.display === ''

change
(text1.style.display === 'none'
to
(text1.style.display === 'none' || text1.style.display === '')
and so on.

Additionally, you could check whether any of the projects are have block for the display property of the style attribute (which you used to display the project info) by using a loop, and you could use that result to determine whether to display either “click project name to see more” or “click project name to close”.

function open1() {
    let text1 = document.getElementById('first-p');
    if (text1.style.display === 'none' || text1.style.display === '') {
        text1.style.display = 'block';
    } else {
        text1.style.display = 'none';
    }

    let aProjectIsVisible = false;
    const projectIds = ['first-p', 'second-p', 'third-p'];

    for (let id of projectIds) {
        const project = document.getElementById(id);
        if (project.style.display === "block") {
            aProjectIsVisible = true;
            break;
        }
    }
    if (aProjectIsVisible) {
        hideElement.style.display = 'block';
        viewElement.style.display = 'none';
    }
    else {
        hideElement.style.display = 'none';
        viewElement.style.display = 'block';
    }
}

Alternatively, you might use the checkVisibility method of an element instead of checking if .display === 'block' for newer versions of some browsers.

      if (project.checkVisibility()) {
        aProjectIsVisible = true;
      }

In your html, each project has the same format; the element that contains information about the project is the next sibling to the element containing the name of the project.

                    <div>
                         <img src="./Images/Mixed Messages.png">
                         <h3 class="script1" id="first-h3">MIXED MESSAGES</h3>
                         <p class="script2" id="first-p">I utilized my java script skills to create a program that outputs 3 random messages.</p>
                    </div>

Therefore you could have only one event handler function [for the project names], by using the nextElementSibling property of an element for the h3 headings.

function open(event) {
    // "this" refers to the current heading element: one of first-h3, second-h3, third-h3
    const text = this.nextElementSibling;
    if (text.style.display === 'none' || text.style.display === '') {
        text.style.display = 'block';
    } else {
        text.style.display = 'none';
    }

You could use event.currentTarget instead of this in the code.

You can also select the project info elements using the script2 class instead of using an array of ids.

    let aProjectIsVisible = false;
    const infoElements = document.getElementsByClassName("script2");

    for (let project of infoElements) {
        if (project.style.display === "block") {
            aProjectIsVisible = true;
            break;
        }
    }