<!-- this is the axios cdn, found link in github repository -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<h1>Ron Swanson Quote Generator</h1>
<p>(4 ways of writing AJAX requests)</p>
<section class="container">
<button id="xhr">XHR</button>
<button id="fetch">Fetch</button>
<button id="jquery">jQuery</button>
<button id="axios">Axios</button>
</section>
<p id="quote">Quote Goes Here...</p>
/*Downloaded from https://www.codeseek.co/boldstar/ajax-4-ways-exercise-pKPoZX */
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto';
color: #2c3e50;
text-align: center;
}
#quote {
font-size: 20px;
}
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
button {
margin-top: 20px;
background: red;
border: none;
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #1abc9c;
color: #1abc9c;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-family: 'Roboto', sans-serif;
}
button:hover {
color: white;
background: #1abc9c;
}
/*Downloaded from https://www.codeseek.co/boldstar/ajax-4-ways-exercise-pKPoZX */
var url = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes';
//xhr version
var xhr = document.querySelector("#xhr");
var ronXhr = document.querySelector("#quote");
xhr.addEventListener("click", function(){
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && 200 ) {
var quote = JSON.parse(XHR.responseText);
ronXhr.innerText = quote;
}
}
XHR.open("GET", url)
XHR.send();
})
//fetch version
var fetchbtn = document.querySelector("#fetch");
var ronFetch = document.querySelector("#quote");
fetchbtn.addEventListener("click", function(){
fetch(url)
.then(function(req){
req.json().then(function(data){
ronFetch.innerText = data[0];
})
})
.catch(function(){
console.log("err");
})
});
//jquery version
var jquery = document.querySelector("#jquery");
// var ronJquery = document.querySelector("#quote");
$('#jquery').click(function(){
$.getJSON(url)
.done(function(data){
$('#quote').text(data[0]);
});
})
//axios version
var axiosbtn = document.querySelector("#axios");
var ronAxios = document.querySelector("#quote");
axiosbtn.addEventListener("click", function(){
axios.get(url)
.then(function(res){
ronAxios.innerText = res.data[0];
})
.catch(function(){
alert("error");
})
})
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
