Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
fetch Json Examples
<div class="container">
<div class="row">
<div class="col-sm-10 mx-auto text-center">
<div class="card">
<h2>What City Should You Visit Next</h2>
<div id="output">??</div>
<button class="btn btn-primary btn-lg" onclick="displayMatches()"> Roll The Dice</button>
<br>
<!-- <div id="options">
<hr>
<h3>Search Options</h3>
<p>Population Size?</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1-100,000</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">100,001 - 400,000</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">400,000+</label>
</div>
<hr>
</div> -->
</div>
</div>
</div>
</div>
<div id="createdBy">
<p>Created By: bNice | 2019</p>
</div>
const endpoint =
"https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";
const states = [];
fetch(endpoint)
.then(blob => blob.json())
.then(data => states.push(...data));
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function displayMatches() {
const rnum = Math.floor(Math.random() * states.length);
const output = document.querySelector("#output");
output.innerHTML = states[rnum].city + ', ' + states[rnum].state + '<br> Population: ' + numberWithCommas(states[rnum].population);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
body {
padding-top: 4em;
background: #159957; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #155799, #159957); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "ZCOOL KuaiLe", cursive;
}
.hidden {
display: none;
}
#output {
height: 8rem;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
font-size: 1.8em;
padding: 2rem;
background: lightgreen;
margin-bottom: 1rem;
color: #333;
}
.card {
padding: 4em;
background: #eee;
opacity: .8;
}
#createdBy {
padding: 2em 0 1rem 3rem;
color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment