FreeCodeCamp - Random Quote Machine
How do I make an freecodecamp - random quote machine?
Https://www.freecodecamp.com/challenges/build-a-random-quote-machine. What is a freecodecamp - random quote machine? How do you make a freecodecamp - random quote machine? This script and codes were developed by Arbauman on 16 September 2022, Friday.
FreeCodeCamp - Random Quote Machine - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>freeCodeCamp - Random Quote Machine</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <section class="hero is-dark is-fullheight"> <div class="hero-body"> <div class="container"> <div class="columns is-mobile"> <div class="column is-12-tablet is-12-mobile animated"> <h1 class="title has-text-centered" id="quote" style="color: red"><i class="fa fa-quote-left"></i>{{ quote }}</h1> <h2 class="subtitle has-text-right" id="attribution">- {{attribution}}</h2> <a v-on:click="tweet" title="Tweet this!" class="button is-inverted is-colored is-pulled-left"><i class="fa fa-twitter"></i></a> <button id="new" v-on:click="getQuote" class="button is-colored is-pulled-right">New</button> </div> </div> </div> </div> </section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.6/fetch-jsonp.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
FreeCodeCamp - Random Quote Machine - Script Codes CSS Codes
.container { background-color: #FFFFFF; padding: 50px; width: 600px;
}
.hero.is-fullheight .hero-body>.container { flex-grow: 0;
}
#quote i{ padding-right: 10px;
}
#attribution { padding-top: 10px;
}
.button { border: 0px; color: #FFFFFF;
}
.button:hover { color: #FFFFFF;
}
FreeCodeCamp - Random Quote Machine - Script Codes JS Codes
'use strict';
new Vue({ el: '#app', data: { quote: '', attribution: '', colors: ['#B5BD68', '#F0C674', '#81A2BE', '#B294BB', '#8ABEB7', '#A54242', '#8C9440', '#DE935F', '#5F819D', '#85678F', '#5E8D87', '#707880'] }, created: function created() { this.getQuote(); }, methods: { setColors: function setColors() { document.querySelector('#quote').style.color = this.colors[0]; document.querySelector('#attribution').style.color = this.colors[0]; document.querySelector('.hero').style.backgroundColor = this.colors[0]; var buttons = document.querySelectorAll('.button'); for (var i = 0; i < buttons.length; i++) { buttons[i].style.backgroundColor = this.colors[0]; } }, fade: function fade(removed, added) { document.querySelector('.column').classList.remove(removed); document.querySelector('.column').classList.add(added); }, cycleColors: function cycleColors() { this.colors.push(this.colors.shift()); }, tweet: function tweet() { window.open('https://twitter.com/home?status=' + encodeURIComponent('"' + this.quote + '" -' + this.attribution + ' #quotes')); }, getQuote: function getQuote() { this.fade('fadeIn', 'fadeOut'); var vm = this; axios({ url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', headers: { 'X-Mashape-Key': 'jp6CW3HUZdmshQqAF4jALlfj8ovIp1rYsFKjsnKkSkses0NNVC', 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' } }).then(function (response) { vm.setColors(); vm.cycleColors(); vm.fade('fadeOut', 'fadeIn'); vm.attribution = response.data.author; vm.quote = response.data.quote; }).catch(function (err) { console.log(err); }); } }
});
Developer | Arbauman |
Username | arbauman |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 3,789 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Vue 2.0 - Inputs and dynamic styling | 1,725 Kb |
Javascript 30 - Day 1 | 2,860 Kb |
Spotify Thing | 1,820 Kb |
FreeCodeCamp - Local Weather | 3,296 Kb |
Tic Tac Toe | 3,999 Kb |
Wikipedia Viewer | 2,991 Kb |
Vue 2.0 - Conditionals and Lists | 1,803 Kb |
FreeCodeCamp - Portfolio | 2,117 Kb |
Vue 2.0 - Inserted variables | 1,692 Kb |
Javascript 30 - Day 4 | 4,659 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Rainbow Drops | Csbarnes | 2,365 Kb |
Resume | Rottingroom | 5,483 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!