From 94530169b31c2647e5d7e6fc7d98ab926417ca5b Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Mon, 8 May 2023 17:28:35 +0300
Subject: [PATCH] Add files via upload
---
100_projects/76-fetch-api/inedx.html | 26 +++++++++++++
100_projects/76-fetch-api/main.js | 28 ++++++++++++++
100_projects/76-fetch-api/style.css | 56 ++++++++++++++++++++++++++++
3 files changed, 110 insertions(+)
create mode 100644 100_projects/76-fetch-api/inedx.html
create mode 100644 100_projects/76-fetch-api/main.js
create mode 100644 100_projects/76-fetch-api/style.css
diff --git a/100_projects/76-fetch-api/inedx.html b/100_projects/76-fetch-api/inedx.html
new file mode 100644
index 0000000..1e6608f
--- /dev/null
+++ b/100_projects/76-fetch-api/inedx.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
Random Dog Placeholder
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/76-fetch-api/main.js b/100_projects/76-fetch-api/main.js
new file mode 100644
index 0000000..3387836
--- /dev/null
+++ b/100_projects/76-fetch-api/main.js
@@ -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 = `
`
+// })
+// }
+function getRandomDog(){
+ fetch('https://random.dog/woof.json')
+ .then(res => res.json())
+ .then(data => {
+ if(data.url.includes('.mp4')){
+ getRandomDog();
+ }
+ dog_result.innerHTML = ``
+ })
+}
+
+// Api
+//https://github.com/public-apis/public-apis
\ No newline at end of file
diff --git a/100_projects/76-fetch-api/style.css b/100_projects/76-fetch-api/style.css
new file mode 100644
index 0000000..5c8f84a
--- /dev/null
+++ b/100_projects/76-fetch-api/style.css
@@ -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;
+}