LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


   
      
      
   


Hello

92
CSS
@charset "UTF-8";
body {
  background-color: #f6f6f6;
}

h1 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
}

#title {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#circle {
  display: block;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: white;
  border-radius: 150px;
  box-shadow: 0px 1px 2px rgba(206, 206, 206, 0.8);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#circle h2 {
  line-height: 0;
  font-size: 11pt;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  display: inline-block;
  color: #464646;
}
#circle p {
  width: 225px;
  text-align: center;
  margin: 0 auto;
  margin-top: 7px;
  font-size: 9pt;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#circle-image {
  height: 150px;
  width: 300px;
  background-color: black;
  border-radius: 150px 150px 0 0;
  background-size: 300px;
  background-position: top;
}

#user {
  width: 55px;
  height: 55px;
  border-radius: 27.5px;
  background: green;
  background-size: 80px;
  background-position: bottom;
  position: absolute;
  margin-top: 112.5px;
  margin-left: 225px;
  border: 2px white solid;
}

#rating {
  unicode-bidi: bidi-override;
  direction: ltr;
  text-align: center;
}
#rating span {
  font-size: 20pt;
  display: inline-block;
  position: relative;
  width: 1.2em;
  color: #ffa742;
}

#heart {
  unicode-bidi: bidi-override;
  direction: ltr;
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}
#heart span {
  color: #ff4040;
  font-size: 13pt;
  display: inline-block;
  position: relative;
}
#heart span:nth-child(2) {
  font-family: sans-serif;
}

#heart span:nth-child(1):hover:before {
  content: "♥︎";
  font-size: 17pt;
  color: #ff4040;
  position: absolute;
}

.arrow {
  width: 30px;
  x: 0px;
  y: 0px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 5%;
  margin-right: 5%;
  z-index: 100;
}
.arrow path {
  fill: #464646;
}
.arrow:hover {
  cursor: pointer;
}

#left-control {
  float: left;
}

#right-control {
  float: right;
  right: 0;
  margin-left: 5%;
  margin-right: 5%;
}
JS
var cards = [
   [
      "Silicon Valley",
      5, 
      "Greatest Tv show ever! Every show is amazing and for the most part very technically accurate",  
    "https://upload.wikimedia.org/wikipedia/en/3/33/Silicon_valley_title.png",
    "http://i.lv3.hbo.com/assets/images/series/silicon-valley/home/140411-hbo-go-600.jpg"
   ],
   [
      "The Walking Dead",
      4, 
      "If you are into watching a group kill zombies and their adventures while they doi it, then this show is for you.",  
    "https://upload.wikimedia.org/wikipedia/en/5/5b/Walking_Dead_Season_3_Cast.jpg",
    "http://image-cdn.zap2it.com/images/rick-grimes-andrew-lincoln-walking-dead-season-3-amc.jpg"
   ],
   [
      "The Big Bang Theory",
      3, 
      "It's funny.",  
    "http://cdn.playbuzz.com/cdn/7b4f711d-2a46-45dc-bea7-85a15ffa587a/b9f955c1-d8ad-4778-862d-e66ec2c38df1.jpg",
    "https://upload.wikimedia.org/wikipedia/it/9/91/Big_Bang_Theory,_Penny,_5x20.png"
   ]
 ];

// Properties
var showTitle = document.getElementById("title");
var HeaderImage = document.getElementById("circle-image");
var user = document.getElementById("user");
var ratings = document.getElementById("rating");
var description = document.getElementById("desc");
var heart = document.getElementById("heart");

function CreateCard(title, rating, desc, imageURL, userURL) {
   // Determines if valid number between 1...5
   var stars = 0
   if (rating > 5) {
      stars = 5
   } else if (rating < 0) {
      stars = 0
   } else {
      stars = rating
   }
   
   // Description
   description.innerHTML = desc
   
   // Title
   showTitle.innerHTML = title
   
   // Header Image
   HeaderImage.style.backgroundImage = "url(" + imageURL + ")";
   
   // User Image
   user.style.backgroundImage = "url(" + userURL + ")";
   
   // Removes stars if already exists
   if (ratings.hasChildNodes()) {
      console.log(ratings.childNodes[0])
      console.log("Hello");
      for (i = 0; i < 5; i++) {
         ratings.removeChild(ratings.firstChild);
      }
   }
   
   // Adds Stars
   for (i = 0; i < 5; i++) { // 5 max amount of stars
      var spanElement = document.createElement("span");
      if (i < stars) { // Creates Full Stars
         spanElement.innerHTML = "★";
      } else { // Creates Empty Stars
         spanElement.innerHTML = "☆";
      }
      ratings.appendChild(spanElement);
   }
}
// Creates the first card
GenerateCard(0);

var cardIndex = 0;

// Left Button Clicked
document.getElementById("left-control").onclick = function() {
   if (cardIndex > 0) { // Checks if it can change
      cardIndex--;
      GenerateCard(cardIndex);
   }
}

// Right Button Clicked
document.getElementById("right-control").onclick = function() {
   if (cards.length > cardIndex + 1) { // Checks if it can change
      cardIndex++;
      GenerateCard(cardIndex)
   }
}

function GenerateCard(index) {
   var card = cards[index];
   CreateCard(card[0], card[1], card[2], card[3], card[4]);
}

// Adds one to heart
heart.onclick = function() {
   var spanElement = heart.children[1];
   spanElement.innerHTML = "93"
}
Host Instantly Drag and Drop Website Builder

 

Description

Saw this dribbble post and though it would be a cool way to view tv show reviews as well. Thanks for taking a look!
Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID