A Pen by Zurc.

Json-list-to-website-colourful-boxes....markdown

Json list to website colourful boxes...

Given a JSON object list i'm trying to write the code to display it on a website with this format:

• A User ID Tag is a 300x300px square filled with the tag background color.
• I want to display a User ID Tag for each user.
• The users should be sorted by their IDs.
• The tag background colors should be randomly picked - different for each user and different with every refresh.
• On mouse-over each tag should change to have white background and display user name, mention name and email in black in different lines.
• On mouse-out I want to come back to random background-color
• The tags should be displayed in a never ending grid - 3 tags per row, as many rows as needed to display all users. Responsive on narrow screens.

A Pen by Zurc on CodePen.

License.

script.js

var Users = [
    {
      "user_id": 4,
      "name": "Marta Jasinska",
      "mention_name": "kreska",
      "email": "kreskasbox@gmail.com",
    },
    {
      "user_id": 3,
      "name": "Santa Claus",
      "mention_name": "SC",
      "email": "santa@northpole.com",
    },
    {
      "user_id": 5,
      "name": "Nathan Drake",
      "mention_name": "nate",
      "email": "ndrake@awesome.com",
    },
    {
      "user_id": 1,
      "name": "Scott Pilgrim",
      "mention_name": "scott",
      "email": "soLazy@emailcompany.com",
    },
    {
      "user_id": 2,
      "name": "Snow White",
      "mention_name": "snow",
      "email": "snow@fables.com",
    },
    {
      "user_id": 6,
      "name": "Bruce Campbell",
      "mention_name": "Ash",
      "email": "thatchin@gmail.com",
    },
    {
      "user_id": 7,
      "name": "Veronica Mars",
      "mention_name": "veronica",
      "email": "vmars@marsinvestigations.com",
    }
  ]

$(document).ready(function(){
 
  function SortByUserId(a,b){
    return ((a.user_id == b.user_id) ? 0 : ((a.user_id > b.user_id) ? 1 : -1 ));
    }
   Users.sort(SortByUserId);
  
  for (i=0; i<Users.length; i++){ 
    
    $("<style type='text/css'> .box+i </style>").appendTo("body");
    $("<div>").addClass('box'+i).text(JSON.stringify("Name: "+Users[i].name) + " " + "Mention Name: " + (Users[i].mention_name) + " " + "Email: " + (Users[i].email)).appendTo("body");
    var color_0 = "#fff";
    var color_1 = '#'+Math.floor(Math.random()*16777215).toString(16);
$('.box'+i).css("background-color", color_1);
    $('.box'+i).css("width",300);
    $('.box'+i).css("height",300);   $('.box'+i).css("float","left");
    $('.box'+i).css("margin",5);
    $('.box'+i).mouseenter(function(){
      $(this).css("background-color", color_0);})
    
$('.box'+i).mouseleave(function(){  
  $(this).css("background-color", color_1);
}) 
 
  }
      
});

style.css

@charset "UTF-8";
/* CSS Document */
body{
	max-width: 930px;
	margin:0 auto;
	}