Personal Portfolio Webpage with JavaScript and bootstrap

1

Tell us what’s happening:
I decided to change my personal portfolio webpage to use JavaScript to display the projects.

My Projects - html-css-only

My Projects - js version

But the js version didn’t work correctly. First row of the projects shrink in both left and right side.
At the beginning, I thought it maybe related to the image. But after I changed all the image to the same size, the problem still there.

Help needed. Thanks.

Your code so far

for(var i=0; i<= projectDetails.length -1;i++){
    title = projectDetails[i].name;
    description = projectDetails[i].description;
    thumbnail = projectDetails[i].thumbnail;
    hyperlink = projectDetails[i].hyperlink;
    if(i%3==0){
      projectsHTMLList += '<div class="row">';      
    }
    projectHTML = '';
    projectHTML += '<div class="col-xs-12 col-sm-4" >';
    projectHTML += '<div class="project-class" >';
    projectHTML = projectHTML + '<a href="' +  hyperlink +'" target="_blank">';
    projectHTML += '<img class= "project-image img-responsive" src="' + thumbnail + '">';
    projectHTML += '<div class= "project-text">';
    projectHTML += '<div class="text-center  project-title" >' + title +'</div>';
    projectHTML += '<p>' + description + '</p>';  
    projectHTML += '</div></a></div></div>';  
    console.log(projectHTML);

    projectsHTMLList += projectHTML;  
  }


  $("#js-projects").html(projectsHTMLList);
}

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-placeholder-text-to-a-text-field

2

The problem is you create a div with class="row if i % 3 == 0, but you do not close it after 3 columns have been created.

FYI - You might want to check out Template Literals to make the code which creates the dynamic html more readable.

Using a template literal, you could replace:

    projectHTML = '';
    projectHTML += '<div class="col-xs-12 col-sm-4" >';
    projectHTML += '<div class="project-class" >';
    projectHTML = projectHTML + '<a href="' +  hyperlink +'" target="_blank">';
    projectHTML += '<img class= "project-image img-responsive" src="' + thumbnail + '">';
    projectHTML += '<div class= "project-text">';
    projectHTML += '<div class="text-center  project-title" >' + title +'</div>';
    projectHTML += '<p>' + description + '</p>';  
    projectHTML += '</div></a></div></div>';

with:

    projectHTML = `<div class="col-xs-12 col-sm-4">
                     <div class="project-class">
                       <a href="${hyperlink}" target="_blank">
                         <img class= "project-image img-responsive" src="${thumbnail}">
                         <div class= "project-text">
                           <div class="text-center  project-title">${title}</div>
                           <p>${description}</p>
                         </div>
                       </a>
                     </div>
                   </div>`;
1 Like
3

Thanks. I fixed my code. And thank you for your suggestion on Template Literals, I will look into it.

4

FYI - You could avoid the two if statements by using the following code. You will notice I used something you probably have not see before called Destructuring assignment to clean up all of the those variable assignments.

  for(var i in projectDetails){
    var {name: title, description, thumbnail, hyperlink} = projectDetails[i];
    projectHTML += `<div class="col-xs-12 col-sm-4">
                     <div class="project-class">
                       <a href="${hyperlink}" target="_blank">
                         <img class= "project-image img-responsive" src="${thumbnail}">
                         <div class= "project-text">
                           <div class="text-center  project-title">${title}</div>
                           <p>${description}</p>
                         </div>
                       </a>
                     </div>
                   </div>`;  
    if(i%3==2 || i == projectDetails.length - 1){
      projectsHTMLList += `<div class="row">${projectHTML}</div>`;      
    }
  }
1 Like
5

I have updated my code again. I feel that I may not need <div class="row">${projectHTML}</div>; at all.
Because I have set up <div class="col-xs-12 col-sm-4">...
So it will either be three in a row, or one in a row.
How do you think of that?

Also, from your code, I learned Template Literals and Destructuring assignment.

Here is the one I used template literals and destructuring assignment.

But I found that both of that won’t support internet explorer. Do you have any suggestion?

Thanks again for your time and your advise. It is very valuable to me.

6

Yes, IE does not support these. You can search for polyfills for these features which will make them work with pre-ES6 JavaScript features.

7