Skip to content

Instantly share code, notes, and snippets.

@YosiLeibman
Last active May 14, 2020 18:30
Show Gist options
  • Save YosiLeibman/0d9d936c39315453ff7fba8513e17803 to your computer and use it in GitHub Desktop.
Save YosiLeibman/0d9d936c39315453ff7fba8513e17803 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
margin: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: blanchedalmond;
}
#title {
font-size: 5em;
margin-bottom: 1em;
color: burlywood;
}
</style>
</head>
<body>
<h1 id="title">whiskey</h1>
<img
id="blah"
src="https://media.giphy.com/media/2voMAYGX4BhIRs3X3q/giphy.gif"
alt="some stupid gif"
/>
<script>
const wordAPI =
'https://api.wordnik.com/v4/words.json/randomWord?hasDictionaryDef=true&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=5&maxLength=-1&api_key=5a1d59fba2c80d6e9a20b0c83da02b0a4c862a9668479c8f2'
const giphyAPI =
'http://api.giphy.com/v1/gifs/search?api_key=0UTRbFtkMxAplrohufYco5IY74U8hOes&q='
// CALL BACK
// $.get(wordAPI,function(response){
// console.log(response.word)
// document.querySelector("#title").textContent = response.word
// $.get(giphyAPI+response.word, function(gifres){
// console.log(gifres.data[0].images.fixed_width.url)
// document.querySelector("#blah").src = gifres.data[0].images.fixed_width.url
// })
// })
// PROMIESS
// MyFetch(wordAPI)
// .then(function(wordres){
// return wordres.json()
// })
// .then(function(word){
// console.log(word)
// document.querySelector("#title").textContent = word.word
// return fetch(giphyAPI+word.word)
// })
// .then(function(gifres){
// return gifres.json()
// })
// .then(function(gif){
// document.querySelector("#blah").src = gif.data[0].images.fixed_width.url
// })
// .catch(function(err){
// alert("something went wrong")
// console.log(err)
// })
// ASYNC AWAIT
async function randomgif() {
try {
console.log('randgif')
let word = await MyFetch(wordAPI)
// let word = await wordres.json()
document.querySelector('#title').textContent = word.word
let gifres = await fetch(giphyAPI + word.word)
let gif = await gifres.json()
document.querySelector('#blah').src =
gif.data[0].images.fixed_width.url
} catch (err) {
// alert("something went wrong")
console.log(err)
}
}
randomgif()
function MyFetch(url) {
console.log('myfetch')
return new Promise(function (resolve, reject) {
$.get(url,function (response) {
resolve(response)
},function(err){
reject(err)
})
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment