JSFiddle - React, Tailwind, and code Playground

by lee45276

HTML

<body>

	<div id="page-container">
    <ul id="projects">
        
        <div id="row_1" class="row">
            

        </div>
    </ul>


		
	</div> <!-- #page-container -->


       

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/script.js"></script>
    </body>

CSS

/* CSS */

html, body {
	width: 100%;
	height: 100%;
}

#page-container {
	background-color: lightblue;
	width: 100%;
	height: 100%;
  min-width: 500px;
  text-align: center;
}

#projects {
  text-align: left;
}

.row {
  width: 100%;
  height: 230px;
}
.col-3,
.col-4, 
.col-6,
.col-12 {
  height: 100%;
}

.col-4 {
  width: 33.333333%;
}

.col-3 {
  width: 25%;
}

.col-12 {
  width: 100%;
}

.col-6 {
  width: 50%;
}

.project:hover {
  opacity: 50%;
}

.project {
  border: 2px solid black;
  background-size: cover; 
  background-repeat: no-repeat;
  moz-box-sizing: border-box;
}



.hidden {
  display: none;
}

ul#projects li {
  display: inline-block;
}

ul#projects {
  padding: 0;
}

.fade {
  opacity: 0.3;
}




/************
INFO
************/

.info {
  width: 100%;
  height: 100%;
}

.title {
  width: 100%;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  background-color: black;
  color: snow;
  margin-top: 23%;
  margin-bottom: 0;

}

JavaScript

var globals = {projects:  [],
                oldHTML: ""};
$(document).ready(function() {
 


  function Project(title, description, skills, url, img, github) {
      this.title = title;
      this.description = description;
      this.skills = skills;
      this.url = url;
      this.img = img;
      this.github = github;
      globals["projects"].push(this);
  };

  new Project("Penguin Game", "Click the penguins", "HTML, CSS, JS","Penguingame.com","./img/find_the_penguins.png","Here is is");
  new Project("Penguin Game2", "Click the penguins", "HTML, CSS, JS","Penguingame.com","./img/find_the_penguins.png","Here is is");
  new Project("Penguin Game3", "Click the penguins", "HTML, CSS, JS","Penguingame.com","./img/find_the_penguins.png","Here is is");
  new Project("Penguin Game4", "Click the penguins", "HTML, CSS, JS","Penguingame.com","./img/find_the_penguins.png","Here is is");
  new Project("Penguin Game5", "Click the penguins", "HTML, CSS, JS","Penguingame.com","./img/find_the_penguins.png","Here is is");


  function fillData (projectArray) {
    var sizes = [4, 4, 3, 3, 4];
    var i = 0;
    projectArray.forEach(function(project) {
      $("#row_1").prepend("<li class='project col-" + sizes[i] + "'" +  "id='project-" + i + "'>Here is some text</li>");
      $("#row_1 li:first-child").css("background-image", "url(" + project["img"] + ")");
      i += 1; 
    });
  };

  fillData(globals.projects);


  $(".project").hover(
    function() {
      // mouse over
      globals.oldHTML = $(this).html();
      var projectIndex = this.id.slice(-1);
      var projectTitle = globals["projects"][projectIndex]["title"];
      console.log(projectTitle);
      $(this).html("<div class='info'><div class='title'>" + projectTitle + "</div></div>");
      $(this).toggleClass("fade");
    },
    function() {
      $(this).html(globals.oldHTML);
      $(this).toggleClass("fade");

  });




});