Skip to content

Instantly share code, notes, and snippets.

@NastyBone

NastyBone/fork-me-fcc-test-suite-template.markdown

Created February 15, 2023 15:25
Show Gist options
  • Save NastyBone/b15fb8de55d049e1d641f985b57c28fe to your computer and use it in GitHub Desktop.
Save NastyBone/b15fb8de55d049e1d641f985b57c28fe to your computer and use it in GitHub Desktop.
Download ZIP
Fork Me! FCC: Test Suite Template
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div id="FCC"></FCC>
</html>
Raw
script.babel
const colors = ['51,204,102', '0,153,153', '204,0,51', '204,255,51', '255,51,204', '204,102,0', '255,255,51', '204,153,255', "204,0,0", "51,153,102", "0,255,255", "0,102,255"];
const quoteByAuthor = [
{quote: "The most effective way to do it, is to do it.", author: "Amelia Earhart"},
{quote: "The only person you are destined to become is the person you decide to be.", author: "Ralph Waldo Emerson"},
{quote: "There is only one corner of the universe you can be certain of improving, and that's your own self.", author: "Aldous Huxley"},
{quote: "You must do the things you think you cannot do.", author: "Eleanor Roosevelt"},
{quote: "But man is not made for defeat. A man can be destroyed but not defeated.", author: "Ernest Hemingway"},
{quote: "Cut your own firewood. It will heat you twice.", author: "Henry Ford"},
{quote: "The most difficult thing is the decision to act, the rest is merely tenacity.", author: "Amelia Earhart"},
{quote: "The harder I work, the luckier I get.", author: "Gary Player"},
{quote: "The scariest moment is always just before you start.", author: "Stephen King"},
{quote: "The two most important days in your life are the day you are born and the day you find out why.", author: "Mark Twain"},
];
const red = "red";
const reciveColor = function(text){
return `rgb(${text})`
}
const getRandomNum = function(thing) {
if (thing == "color") {
return Math.floor(Math.random() * colors.length);
}
if (thing == "quote") {
return Math.floor(Math.random() * quoteByAuthor.length);
}
};
const animateColorful = function(precolor) {
var color = reciveColor(colors[precolor]);
$("html body").animate(
{
backgroundColor: color,
color: color
},
250
);
$(".btn").animate(
{
backgroundColor: color,
},
100
);
}
const changeColor = function(color) {
$(document).ready(function(){
animateColorful(color);
$(".btn").click(function(){
$(".animate").addClass("animated fadeIn");
setTimeout(function(){
$(".animate").removeClass("animated");
$(".animate").removeClass("fadeIn");
}, 400);
});
});
};
const checkEquals = function (prev,now){
now = getRandomNum("quote");
if (prev == now) {
checkEquals(prev,now);
}
else return now
}
class QuoteBox extends React.Component {
constructor(props) {
super(props);
this.state = {
randomNum: getRandomNum("quote")
}
}
componentWillMount(){
changeColor(getRandomNum("color"));
}
setRandomQuote () {
changeColor(getRandomNum("color"));
this.setState({
randomNum: getRandomNum("quote")
})
this.setState( (prevState) =>{
if (prevState.randomNum === this.state.randomNum){
return {randomNum: checkEquals(prevState.randomNum,this.state.randomNum)
}};
});
};
render () {
return (
<div id="container" className="animate">
<div id="quote-box" >
<div id="quote">
<i className= "fa fa-quote-left"></i> <header id="text" className="animate">{quoteByAuthor[this.state.randomNum].quote}</header>
<article id="author" className="animate">- {quoteByAuthor[this.state.randomNum].author}</article>
</div>
<div id= "interact">
<div id= "button-rand">
<button id = "new-quote" className="btn btn-default borderfix animate" onClick={
this.setRandomQuote.bind(this)} title = "New Quote!"><span className= "fas fa-random fa-lg"></span>
</button>
</div>
<div id="social-issue" >
<button className = "btn btn-default">
<span className= "fab fa-tumblr fa-lg"></span>
</button>
<a id = "tweet-quote" href= "twitter.com/intent/tweet" className="animate">
<button className= "btn btn-default borderfix" title= "Tweet this!"><span className= "fab fa-twitter fa-lg"></span></button>
</a>
</div>
</div>
</div>
</div>
)
}
}
React.render(<QuoteBox />, document.getElementById('FCC'));
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
html,body {
display: flex;
align-self: center;
justify-content: center;
align-items: center;
width: fit-content;
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color: black;
}
body{
padding: 20% 10% 20% 10%;
}
#container{
display: flex;
height: fit-content;
width: 100%;
border-radius: 15px;
padding: 25px;
justify-content: center;
align-items: center;
align-self: center;
background-color: black;
box-shadow: 7px 8px rgba(3,5,7,0.5);
}
#interact{
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
}
header, article{
margin: 5% 5% 5% 5%;
font-size: 4vh;
font-family: "Roboto Slab", arial;
}
article{
font-size: 2vh;
text-align: right;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
.btn-default{
border-color: black !important;
color: black !important;
width:40px;
&:hover{
animation-name: opacityT;
animation-duration: 0.2s;
opacity:0.6;
}
&:active{
position: relative !important;
top: 1px !important;
}
}
@keyframes opacityT {
0% {opacity: 1};
25%{opacity: 0.9};
50%{opacity: 0.8};
75%{opacity: 0.7};
100%{opacity: 0.6};
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment