Skip to content

Instantly share code, notes, and snippets.

@SOliv1

SOliv1/index.html

Created March 14, 2019 18:09
Show Gist options
  • Save SOliv1/c5810e8f9fe78a6f5287fd3ed35ff3b1 to your computer and use it in GitHub Desktop.
Save SOliv1/c5810e8f9fe78a6f5287fd3ed35ff3b1 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>MAGIC 8 BALL</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style id="jsbin-css">
body {
font-family: "Montserrat", sans-serif;
color: #454545;
margin: 0px;
padding: 0px;
background-color: #f8f8f8;
background-image: url('bkgd2.png');
}
.page {
width: 80%;
max-width: 960px;
margin: 0 auto;
}
.ball, .button {
margin: 0 auto;
}
.answer {
position:absolute;
width:14%;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-65px;
font: 16px 'Open Sans', Helvetica, Arial, sans-serif;
color: #222;
text-transform: uppercase;
}
#questionButton {
font: 26px 'Montserrat', Helvetica, Arial, sans-serif;
border-radius: 5px;
border: none;
color: #f8f8f8;
background-color: #f16059;
padding: 10px 75px;
display: block;
margin: 0 auto;
}
header {
padding-top: 0.25em;
text-align: center;
}
header span {
font-size: 60px;
color: #f16059;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
}
footer p {
font-family: "Montserrat", sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
</style>
</head>
<body>
<div class="page">
<header>
<h1>MAGIC <span>8</span> BALL</h1>
</header>
<div class="ball" style="position:relative; width:80%" >
<p id="answer" class="answer" align="center" >
THIS IS WHERE THE ANSWER GOES
</p>
<img id="8ball" alt="magic 8 ball" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballQuestion.png">
</div>
<div class="button" style="position:relative; width:80%">
<button id="questionButton">ASK ME ANYTHING </button>
</div>
<footer>
<p>© Skillcrush 2016</p>
</footer>
<script type="text/javascript" src="script.js"></script>
</div>
<script id="jsbin-javascript">
$(document).ready(function(){
var questionButton =
document.getElementById ("#questionButton");
$("#answer").hide();
var magic8Ball = {};
magic8Ball.listOfAnswers = ["No","It is certain", "It is decidedly so", "Without a doubt", "Yes – definitely", "You may rely on it", "As I see it, yes", "Most likely Outlook good", "Yes", "Outlook not so good", "Verydoubtful!"];
//define method to ask question//
magic8Ball.askQuestion =
function(question)
{
//choose random answer//
var randomNumber = Math.random();
//choose between 0 and final answer on your list//
var randomNumberForlistOfAnswers =
randomNumber *
this.listOfAnswers.length;
//rounds down the number to nearest whole number//
var randomIndex = Math.floor(randomNumberForlistOfAnswers);
var answers = this.listOfAnswers[randomIndex];
$("#answer").text(answers);
console.log(questionButton);
console.log(answers);
};
//define method for clicking question button//
var onClick = function() {
setTimeout(
function() {
//show prompt//
var question = prompt ("ASK YES or NO QUESTION!");
magic8Ball.askQuestion(question);
$("#8ball").effect("shake");
$("#8ball").attr("src", "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballAnswer.png");
$("#answer").fadeIn(4000);
console.log("fadein");
}, 500);
};
$("#questionButton").click(onClick);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>MAGIC 8 BALL</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'><\/script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"><\/script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="page">
<header>
<h1>MAGIC <span>8</span> BALL</h1>
</header>
<div class="ball" style="position:relative; width:80%" >
<p id="answer" class="answer" align="center" >
THIS IS WHERE THE ANSWER GOES
</p>
<img id="8ball" alt="magic 8 ball" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballQuestion.png">
</div>
<div class="button" style="position:relative; width:80%">
<button id="questionButton">ASK ME ANYTHING </button>
</div>
<footer>
<p>© Skillcrush 2016</p>
</footer>
<script type="text/javascript" src="script.js"><\/script>
</div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">body {
font-family: "Montserrat", sans-serif;
color: #454545;
margin: 0px;
padding: 0px;
background-color: #f8f8f8;
background-image: url('bkgd2.png');
}
.page {
width: 80%;
max-width: 960px;
margin: 0 auto;
}
.ball, .button {
margin: 0 auto;
}
.answer {
position:absolute;
width:14%;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-65px;
font: 16px 'Open Sans', Helvetica, Arial, sans-serif;
color: #222;
text-transform: uppercase;
}
#questionButton {
font: 26px 'Montserrat', Helvetica, Arial, sans-serif;
border-radius: 5px;
border: none;
color: #f8f8f8;
background-color: #f16059;
padding: 10px 75px;
display: block;
margin: 0 auto;
}
header {
padding-top: 0.25em;
text-align: center;
}
header span {
font-size: 60px;
color: #f16059;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
}
footer p {
font-family: "Montserrat", sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
var questionButton =
document.getElementById ("#questionButton");
$("#answer").hide();
var magic8Ball = {};
magic8Ball.listOfAnswers = ["No","It is certain", "It is decidedly so", "Without a doubt", "Yes – definitely", "You may rely on it", "As I see it, yes", "Most likely Outlook good", "Yes", "Outlook not so good", "Verydoubtful!"];
//define method to ask question//
magic8Ball.askQuestion =
function(question)
{
//choose random answer//
var randomNumber = Math.random();
//choose between 0 and final answer on your list//
var randomNumberForlistOfAnswers =
randomNumber *
this.listOfAnswers.length;
//rounds down the number to nearest whole number//
var randomIndex = Math.floor(randomNumberForlistOfAnswers);
var answers = this.listOfAnswers[randomIndex];
$("#answer").text(answers);
console.log(questionButton);
console.log(answers);
};
//define method for clicking question button//
var onClick = function() {
setTimeout(
function() {
//show prompt//
var question = prompt ("ASK YES or NO QUESTION!");
magic8Ball.askQuestion(question);
$("#8ball").effect("shake");
$("#8ball").attr("src", "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballAnswer.png");
$("#answer").fadeIn(4000);
console.log("fadein");
}, 500);
};
$("#questionButton").click(onClick);
});
</script></body>
</html>
Raw
jsbin.untitled.css
body {
font-family: "Montserrat", sans-serif;
color: #454545;
margin: 0px;
padding: 0px;
background-color: #f8f8f8;
background-image: url('bkgd2.png');
}
.page {
width: 80%;
max-width: 960px;
margin: 0 auto;
}
.ball, .button {
margin: 0 auto;
}
.answer {
position:absolute;
width:14%;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-65px;
font: 16px 'Open Sans', Helvetica, Arial, sans-serif;
color: #222;
text-transform: uppercase;
}
#questionButton {
font: 26px 'Montserrat', Helvetica, Arial, sans-serif;
border-radius: 5px;
border: none;
color: #f8f8f8;
background-color: #f16059;
padding: 10px 75px;
display: block;
margin: 0 auto;
}
header {
padding-top: 0.25em;
text-align: center;
}
header span {
font-size: 60px;
color: #f16059;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
}
footer p {
font-family: "Montserrat", sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
Raw
jsbin.untitled.js
$(document).ready(function(){
var questionButton =
document.getElementById ("#questionButton");
$("#answer").hide();
var magic8Ball = {};
magic8Ball.listOfAnswers = ["No","It is certain", "It is decidedly so", "Without a doubt", "Yes – definitely", "You may rely on it", "As I see it, yes", "Most likely Outlook good", "Yes", "Outlook not so good", "Verydoubtful!"];
//define method to ask question//
magic8Ball.askQuestion =
function(question)
{
//choose random answer//
var randomNumber = Math.random();
//choose between 0 and final answer on your list//
var randomNumberForlistOfAnswers =
randomNumber *
this.listOfAnswers.length;
//rounds down the number to nearest whole number//
var randomIndex = Math.floor(randomNumberForlistOfAnswers);
var answers = this.listOfAnswers[randomIndex];
$("#answer").text(answers);
console.log(questionButton);
console.log(answers);
};
//define method for clicking question button//
var onClick = function() {
setTimeout(
function() {
//show prompt//
var question = prompt ("ASK YES or NO QUESTION!");
magic8Ball.askQuestion(question);
$("#8ball").effect("shake");
$("#8ball").attr("src", "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballAnswer.png");
$("#answer").fadeIn(4000);
console.log("fadein");
}, 500);
};
$("#questionButton").click(onClick);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment