x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-08 17:28:35 +03:00 committed by GitHub
parent 7220f516f7
commit 94530169b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
100_projects/76-fetch-api/inedx.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <div class="results">
<div id="cat_result" class="result">
<p>Random Cat Placeholder</p>
</div> -->
<div id="dog_result" class="result">
<p>Random Dog Placeholder</p>
</div>
</div>
<div class="buttons">
<!-- <button id="cat_btn">Cat</button> -->
<button id="dog_btn">Dog</button>
</div>
<script src="main.js"></script>
</body>
</html>

28
100_projects/76-fetch-api/main.js Normal file
View File

@ -0,0 +1,28 @@
const cat_result = document.getElementById("cat_result");
const dog_result = document.getElementById("dog_result");
const cat_btn = document.getElementById("cat_btn");
const dog_btn = document.getElementById("dog_btn");
// cat_btn.addEventListener('click', getRandomCat);
dog_btn.addEventListener('click', getRandomDog);
// function getRandomCat(){
// fetch('https://random.dog/woof.json')
// .then(res => res.json())
// .then(data => {
// cat_result.innerHTML = `<img src="${data.url}"/>`
// })
// }
function getRandomDog(){
fetch('https://random.dog/woof.json')
.then(res => res.json())
.then(data => {
if(data.url.includes('.mp4')){
getRandomDog();
}
dog_result.innerHTML = `<img src="${data.url}"/>`
})
}
// Api
//https://github.com/public-apis/public-apis

56
100_projects/76-fetch-api/style.css Normal file
View File

@ -0,0 +1,56 @@
body{
background: linear-gradient(180deg, #F0E68C, 25%, #FFFACD 92%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
}
.results{
display: flex;
align-items: center;
justify-content: center;
}
.result{
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
height: 400px;
width: 300px;
}
.result img{
object-fit: cover;
height: 100%;
width: 100%;
}
.buttons{
display: flex;
align-items: center;
justify-content: center;
}
button{
background: #CD853F;
border:0;
color: #fff;
border: 0;
border-radius: 5px;
outline: none;
padding: 10px;
margin: 10px;
cursor: pointer;
font-size: 14px;
width: 300px;
transition: .3s;
}
button:hover{
color: #000;
}
button:active{
transform: scale(.98);
}
button:focus{
outline: none;
}