sammy/freecodecamp-projects
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Random Quote Machine certification project

Browse source
This commit is contained in:
CherryKitten 2022-10-16 19:18:46 +02:00
parent eb1fa03820
commit bd121f3e65
Signed by: sammy
GPG key ID: 0B696A86A853E955
6 changed files with 211 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
3-frontend-dev-libraries/1-random-quote-machine/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 350 KiB

28
3-frontend-dev-libraries/1-random-quote-machine/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Random Bloodborne Quotes</title>
<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="quote-box">
<div class="quote-text">
<i class="fa-solid fa-quote-left"></i>
<p id="text">Placeholder text</p>
<i class="fa-solid fa-quote-right"></i>
</div>
<p id="author">Placeholder author</p>
<button id="new-quote">More quotes!</button>
<div id="share-buttons">
<a id ="tweet-quote" class="share-button" href="" target="_blank" title="Tweet this quote!"><i class="fa-brands fa-twitter"></i></a>
<a id ="tumblr-quote" class="share-button" href="" target="_blank" title="Post this quote on tumblr!"><i class="fa-brands fa-tumblr"></i></a>
<a id="copy-quote" class="share-button" title="Copy quote to clipboard"><i class="fa-solid fa-copy"></i></a>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

60
3-frontend-dev-libraries/1-random-quote-machine/scripts.js Normal file
View file

@ -0,0 +1,60 @@
const quotes = [
{author: 'Micolash, Host of the Nightmare', text: 'A hunter is a hunter, even in a dream'},
{author: 'Micolash, Host of the Nightmare', text: 'Ahh, Kos, or some say Kosm… Do you hear our prayers?'},
{author: 'Micolash, Host of the Nightmare', text: 'As you once did for the vaccuous Rom, grant us eyes, grant us eyes'},
{author: 'Eileen the Crow', text: 'A hunter should hunt beasts. Leave the hunting of hunters to me...'},
{author: 'Father Gascoigne', text: "Beasts all over the shop.. You'll be one of them soon enough"},
{author: 'Ludwig, the Holy Blade', text: 'Ah, you were by my side all along. My true mentor, my guiding moonlight...'},
{author: 'Ludwig, the Holy Blade', text: 'Even in this, darkest of nights, I see the moonlight...'},
{author: 'Gehrman, the first Hunter', text: 'Tonight, Gehrman join the hunt'},
{author: 'Gehrman, the first Hunter', text: 'Time is a cruel, cruel thing. Haven\'t you noticed?'},
{author: 'Alfred, Hunter of Vilebloods', text: 'Master, look! I\'ve done it! I\'ve done it! I\'ve smashed, and pounded and grounded this rotten siren into fleshy pink pulp!'},
{author: 'Alfred, Hunter of Vilebloods', text: 'There you filthy monstrosity... What good\'s your immortality now?'},
{author: 'Alfred, Hunter of Vilebloods', text: 'Try stirring up trouble in this sorry state -- all mangled and twisted with every inside on the outside for all the world to see'},
{author: 'Alfred, Hunter of Vilebloods', text: 'Let us cleanse these tarnished streets. And may the good blood guide your way.'},
{author: 'Suspicious Beggar', text: 'Die! Die, die! Hunters are killers, nothing less! You call ME a beast? A Beast!? What would you know? I didn\'t ask for this!'},
{author: 'Provost Willem', text: 'We are born of the blood, made men by the blood, undone by the blood. Our eyes have yet to open... Fear the Old Blood.'},
{author: 'Research Hall patient', text: 'Has someone, anyone, seen my eyes? I\'m afraid I\'ve dropped them in a puddle. Everything is pale now...'},
{author: 'Lady Maria of the Astral Tower', text: 'A corpse should be left well alone. Oh I know, how the secrets beckon so sweetly.'},
{author: 'Lady Maria of the Astral Tower', text: ' Only an honest death will cure you now. Free you from your wild curiosity.'},
{author: 'Mystery Narrator', text: 'Curse the fiends. Their children too. And their children, forever, true'},
{author: 'The Doll', text: 'Welcome home, good Hunter. What is it you desire?'},
{author: 'The Doll', text: 'Farewell, good hunter. May you find your worth in the waking world'},
{author: 'The Doll', text: 'Are you cold? Oh, Good Hunter'},
{author: 'The Doll', text: 'And so... the hunt begins again'},
]
let currentQuote = []
function updateLinks(quote){
$('#tweet-quote').attr('href','https://twitter.com/intent/tweet?text="'+quote.text+'" -'+quote.author)
$('#tumblr-quote').attr('href', 'https://www.tumblr.com/widgets/share/tool?content="'+quote.text+'" -'+quote.author)
}
function setQuote(quote) {
while (quote === currentQuote){ quote = getRandomQuote()} // Make sure we don't repeat the same quote twice
currentQuote = quote;
$('#text').text(quote.text);
$('#author').text(quote.author);
updateLinks(quote);
$('#tweet-quote').attr('href','https://twitter.com/intent/tweet?text="'+quote.text+'" -'+quote.author)
}
function getRandomQuote(){
return quotes[Math.floor(Math.random() * quotes.length)]
}
$(document).ready(function() {
$('#new-quote').click(function () {
setQuote(getRandomQuote())
})
$('#copy-quote').click(function () {
let $temp = $("<input>");
$("body").append($temp);
$temp.val('"' + currentQuote.text + '" -' + currentQuote.author).select();
document.execCommand("copy");
$temp.remove();
})
setQuote(getRandomQuote())
}
)

58
3-frontend-dev-libraries/1-random-quote-machine/styles.css Normal file
View file

@ -0,0 +1,58 @@
body {
background-size: cover;
background: url("background.jpg") center;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
body * {
text-align: center;
}
#quote-box {
background-color: #9f927f;
width: 450px;
height: auto;
border: 2px;
border-radius: 5px;
padding: 2rem;
opacity: 90%;
}
#quote-box .quote-text {
display: flex;
justify-content: space-evenly;
}
#quote-box .fa-quote-right, #quote-box .fa-quote-left {
color: #463d30;
}
#quote-box #text {
font-family: monospace;
font-style: italic;
font-size: 2rem;
color: #1A0B06;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
#quote-box #author {
color: #463d30;
}
#quote-box #new-quote {
background-color: #463d30;
border: 2px solid #463d30;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.56) 0 22px 70px 4px;
}
#quote-box #share-buttons {
display: flex;
gap: 1rem;
}
#quote-box #share-buttons .share-button {
color: #34302F;
font-size: 1.5rem;
}
#quote-box #share-buttons .share-button :hover {
cursor: pointer;
}
/*# sourceMappingURL=styles.css.map */

1
3-frontend-dev-libraries/1-random-quote-machine/styles.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE,kBAhBc;EAiBd;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE,OA7BY;;AA+Bd;EACE;EACA;EACA;EACA,OArCU;EAsCV;;AAEF;EACE,OAvCY;;AAyCd;EACE,kBA1CY;EA2CZ;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE,OAtDQ;EAuDR;;AAEA;EACE","file":"styles.css"}

64
3-frontend-dev-libraries/1-random-quote-machine/styles.scss Normal file
View file

@ -0,0 +1,64 @@
$main-color1: #1A0B06;
$main-color2: #34302F;
$accent-color1: #463d30;
$accent-color2: #9f927f;
body {
background-size: cover;
background: url('background.jpg') center;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
* {
text-align: center;
}
}
#quote-box {
background-color: $accent-color2;
width: 450px;
height: auto;
border: 2px;
border-radius: 5px;
padding: 2rem;
opacity: 90%;
.quote-text {
display: flex;
justify-content: space-evenly;
}
.fa-quote-right, .fa-quote-left {
color: $accent-color1;
}
#text {
font-family: monospace;
font-style: italic;
font-size: 2rem;
color: $main-color1;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
#author {
color: $accent-color1;
}
#new-quote{
background-color: $accent-color1;
border: 2px solid $accent-color1;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.56) 0 22px 70px 4px;
}
#share-buttons{
display: flex;
gap: 1rem;
.share-button{
color: $main-color2;
font-size: 1.5rem;
:hover {
cursor: pointer;
}
}
}
}