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