Javascript Turorial App - Viết ứng dụng Random câu nói hay bất hữu
File index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>Random Quote</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lato');
body {
background-color: SaddleBrown;
color: #fff;
font-family: 'Lato', sans-serif;
}
.quote-font {
font-family: 'Indie Flower', cursive;
color:#3366CC;
font-size: 1.5em;
}
.wrapper {
min-width:300px;
width:80%;
margin: 5px auto 5px auto;
}
.lightBack {
border: solid 0px;
border-radius:13px;
background-color:rgba(255,255,255,0.6);
margin-left:auto;
margin-right:auto;
padding-left:1em;
padding-right:1em;
padding-top: .15em;
width:80%;
min-width:250px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Random Quote Generator</h1>
<h2>For Free Code Camp</h2>
<hr>
<p>This is a tiny javascript "app" that display a random quote from an array of quotes. Not sure why javascript has such a problem with random numbers.</p>
<p>On PHP generating a random number between 1 and 10 is easy as pie:<br>
<code>rand(1, 10);</code><br>
In JavaScript however it's quite the pain in the ass:<br>
<code>Math.floor((Math.random() * 10) + 1);</code>
</p>
<div class="lightBack">
<p class="quote-font">
<strong>" </strong>
<script>
document.write(randomQuote());
</script>
</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</div>
<p> </p>
</div>
<script src="script.js"></script>
</body>
</html>
File script.js
<script>
function randomQuote() {
// generate a random number
var randy;
randy = Math.floor((Math.random() * 4));
// store the quotes in an array
var quotes = [
"Progress is impossible without change, and those who cannot change their minds cannot change anything.<br> -- George Bernard Shaw",
"Change is the law of life. And those who look only to the past or present are certain to miss the future. <br> -- John F. Kennedy",
"To improve is to change; to be perfect is to change often. <br> -- Winston Churchill",
"Everyone thinks of changing the world, but no one thinks of changing himself. -- Leo Tolstoy",
"Smoking is hateful to the nose, harmful to the brain, and dangerous to the lungs.<br> -- King James I"
];
// write a random array item to the screen
return quotes[randy];
}
</script>