Skip to content

Instantly share code, notes, and snippets.

@lubodrinka

lubodrinka/index.html

Last active March 7, 2019 16:17
Show Gist options
  • Save lubodrinka/86800e68d8cce00a6996041f63068e44 to your computer and use it in GitHub Desktop.
Save lubodrinka/86800e68d8cce00a6996041f63068e44 to your computer and use it in GitHub Desktop.
Download ZIP
random movies
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body >
<section id="quote-box" class="container round">
<h1 class="shaddowbox well round gloriafont">Tip for Today inspiration
</h1>
<p class="fixfont center">Some awesome random movies.</p>
<div class="msize sizeFblock shaddowbtn round button4 Gfont">
<H2 id="Mtitle">Title</H2>
<p class="osansfont" id="text"></p>
<div class="flex-container">
<h1 id="hod" style="white-space:pre-wrap;">Metascore: </h1>
<img style="vertical-align:middle" id="img1" heigth="50px" width="100px"> </img>
</div><strong id="author"></strong>
<div class="btn-group button4">
<a rel="me"
id="tweet-quote" class="round shaddowbtn button4 twitter-share-button" target="_blank" href="https://twitter.com/intent/tweet?text=Hello%20world&url=https://codepen.io/vanderdrilu/pen/pVeXgw" onclick="tweet()"data-size="large" >twitter</a>
<button class=" round shaddowbtn button4" style="text-align:rigth" id="new-quote" > New</button>
</div>
</section></body >
Raw
script.js
var MovieSales = "https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json";
var arrayL =["Blade", "X-Men", "Blade II", "Spider-Man", "Daredevil", "X2: X-Men United", "Hulk", "Kat", "Spider-Man 2", "Blade: Trinity", "Elektra", "Man Thing", "Ghost Rider", "Spider-Man 3", "Fantastic four: Silver Surfer", "Kat 2", "X-Men Origins: Wolverine", "X-Men: first class", "Ghost Rider: Spirit of Vengeance", "Amazing Spider-Man", "Wolverine", "Amazing Spider-Man 2", "Fantastic four", "Captain America: Civil War","Deadpool","Deadpool 2", "X-Men: Apokalypsa", "Gambit", "Logan: Wolverine", "Captain America: The First Avenger","Captain America: The Winter Soldier", "Deadpool 2", "X-Force", "Sinister Six", "Iron Man 3", "Captain America: Civil War", "Ultron", "Guardians of the Galaxy Vol. 2", "Guardians of the Galaxy","Guardians of the Galaxy Vol. 3", "Doctor Strange","Avengers: Infinity War"];
function getfilm() {
var min = 0;
var max = arrayL.length - 1;
return arrayL[Math.floor(Math.random() * (max - min + 1)) + min];
}
$(document).ready(function () {
$.get(MovieSales, function makeMyMap(data) {
data.children.forEach((d) => {
d.children.forEach(element => {
if (element.hasOwnProperty('name')) {
if (!arrayL.includes(element.name)) {
arrayL.push(element.name);
}
}
});
});
g();
});
function g() {
var j = getfilm();
$("#Mtitle").text(j + "\n");
$.get(
"https://www.omdbapi.com/?t=" + j + "&apikey=e639b4e1",
function (data) {
console.log(data);
$("#text").text(data.Plot);
$("#author").text(data.Director);
var mscore = data.Metascore;
$("#img1").attr("src", data.Poster);
if (!isNaN(mscore)) {
$("#hod").text("Metascore: " + "\n" + mscore + "%");
if (mscore < 30) {
$("#hod").css("color", "red");
} else if (mscore < 60) {
$("#hod").css("color", "blue");
} else if (mscore > 60) {
$("#hod").css("color", "green");
}
}
$("#tweet-quote").attr("href", "https://twitter.com/intent/tweet?text="+data.Plot+"&url=https://codepen.io/vanderdrilu/full/pVeXgw");
});
}
$("#new-quote").click(function () {
g();
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Gaegu|Gloria+Hallelujah|Great+Vibes|Indie+Flower|Lato|Open+Sans|Oswald|Permanent+Marker');
.sizeFblock{font-size:23px;}
body{background-color:#EFEBE9;}
.msize{width: 500px; height: auto}
.shaddowbox { border: 1px solid;
padding: 10px;
box-shadow: 10px 10px grey;
text-align:center;}
.shaddowbtn { border: 0.5px solid;
padding: 10px;
box-shadow: -2px 2px 8px rgba(0,0,0,0.6),
-3px 4px 12px rgba(0,0,0,0.5),
-4px 6px 15px rgba(0,0,0,0.4),
-5px 8px 18px rgba(0,0,0,0.3);
text-align:center;}
div{background-color:#EFEBE9;
margin:50px auto auto auto ;
}
.round{border-radius: 10px;}
button {
font-family:'Permanent Marker', cursive;
background-color: lightgrey; /* Green */
border: 2px solid #555555;
color:black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 10px 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button4:hover {background-color: #e7e7e7;}
.indiefont{font-family:'Indie Flower', cursive ;}
.latofont{font-family:'Lato', sans-serif; }
.osansfont{font-family:'Open Sans', sans-serif;}
.oswaldfont{font-family:'Oswald', sans-serif}
.gloriafont{font-family:'Gloria Hallelujah', cursive ;}
.fixfont{font-family:'Permanent Marker', cursive;}
.GVfont{font-family:'Great Vibes', cursive;}
.Gfont{font-family:'Gaegu', cursive;}
.center{text-align:center;}
/*/ font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Indie Flower', cursive;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment