hamburgcodingschool · Codemon72 · Mar 13, 2020 · Mar 13, 2020 · Mar 18, 2020 · Mar 18, 2020
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
diff --git a/beer-api/index.html b/beer-api/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Beer-Api</title>
+  <link href="tailwind.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="content" class="w-full h-full min-h-screen p-8 bg-gray-100">
+    <button id="button"
+      class="bg-transparent center hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Want
+      a beer?</button>
+    <br><br>
+
+  </div>
+
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/beer-api/index.js b/beer-api/index.js
@@ -0,0 +1,34 @@
+const content = document.getElementById("content");
+
+document.getElementById("button").addEventListener("click", function() {
+  fetch("https://api.punkapi.com/v2/beers/random")
+    .then(res => res.json())
+    .then(json => {
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = createBeerContent(json[0]);
+      button.innerText = "Want another beer?";
+      content.append(tempDiv.firstChild);
+      console.log(json[0].name);
+      console.log(createBeerContent(json[0]))
+    })
+    .catch(error => {
+      console.log(error);
+    });
+});
+
+const createBeerContent = post => {
+  return `<div class="container mx-auto max-w-sm rounded overflow-hidden shadow-lg justify-center bg-white m-6">
+  <img class="w-full h-64 w-full object-contain" src="${post.image_url ? post.image_url : "oops.png"}" alt="${post.name}">
+  <div class="px-6 py-4">
+    <div class="font-bold text-xl mb-2">${post.name}</div>
+    <p class="text-gray-700 text-base">
+      ${post.tagline}
+    </p>
+  </div>
+  <div class="px-6 py-4 flex items-center">
+    <div class="text-sm">
+      <p class="text-gray-900 leading-none">${post.description}</p>
+    </div>
+  </div>
+</div>`;
+};
diff --git a/beer-api/oops.png b/beer-api/oops.png
diff --git a/beer-api/tailwind.min.css b/beer-api/tailwind.min.css
diff --git a/micro-blog/img/01Siem_Reap_Angkor_Wat800.jpg b/micro-blog/img/01Siem_Reap_Angkor_Wat800.jpg
diff --git a/micro-blog/img/02Joekulsarlon_Iceland800.jpg b/micro-blog/img/02Joekulsarlon_Iceland800.jpg
diff --git a/micro-blog/img/03Eltz_Castle_Wierschem800.jpg b/micro-blog/img/03Eltz_Castle_Wierschem800.jpg
diff --git a/micro-blog/img/04Joekulsarlon_Iceland800.jpg b/micro-blog/img/04Joekulsarlon_Iceland800.jpg
diff --git a/micro-blog/img/05Geiranger_Norway800.jpg b/micro-blog/img/05Geiranger_Norway800.jpg
diff --git a/micro-blog/img/06Godafoss_Iceland800.jpg b/micro-blog/img/06Godafoss_Iceland800.jpg
diff --git a/micro-blog/img/07Grimsel_Pass_Obergoms_Swiss800.jpg b/micro-blog/img/07Grimsel_Pass_Obergoms_Swiss800.jpg
diff --git a/micro-blog/img/08Saxer_Luecke_Ruete_Swiss800.jpg b/micro-blog/img/08Saxer_Luecke_Ruete_Swiss800.jpg
diff --git a/micro-blog/img/09Prague800.jpg b/micro-blog/img/09Prague800.jpg
diff --git a/micro-blog/img/10Sintra800.jpg b/micro-blog/img/10Sintra800.jpg
diff --git a/micro-blog/img/11Old_Paria_Utah_USA800.jpg b/micro-blog/img/11Old_Paria_Utah_USA800.jpg
diff --git a/micro-blog/img/12Haleakalanoaa800.jpg b/micro-blog/img/12Haleakalanoaa800.jpg
diff --git a/micro-blog/img/13Sligachan_UK800.jpg b/micro-blog/img/13Sligachan_UK800.jpg
diff --git a/micro-blog/img/14Grand_Tetons_Wyoming_USA800.jpg b/micro-blog/img/14Grand_Tetons_Wyoming_USA800.jpg
diff --git a/micro-blog/img/15Peyto_Lake_Mountains_Canada800.jpg b/micro-blog/img/15Peyto_Lake_Mountains_Canada800.jpg
diff --git a/micro-blog/img/16Nlain_Noaa800.jpg b/micro-blog/img/16Nlain_Noaa800.jpg
diff --git a/micro-blog/img/17Sonoran_Desert_Noaa800.jpg b/micro-blog/img/17Sonoran_Desert_Noaa800.jpg
diff --git a/micro-blog/img/18Verzasca_Lavertezzo_Swiss800.jpg b/micro-blog/img/18Verzasca_Lavertezzo_Swiss800.jpg
diff --git a/micro-blog/img/19Ingi_Haraldss_Iceland800.jpg b/micro-blog/img/19Ingi_Haraldss_Iceland800.jpg
diff --git a/micro-blog/img/20Nemrut800.jpg b/micro-blog/img/20Nemrut800.jpg
diff --git a/micro-blog/img/21_Lago_di_Toblino_Italy800.jpg b/micro-blog/img/21_Lago_di_Toblino_Italy800.jpg
diff --git a/micro-blog/img/barcelona.jpeg b/micro-blog/img/barcelona.jpeg
diff --git a/micro-blog/img/baroque.jpeg b/micro-blog/img/baroque.jpeg
diff --git a/micro-blog/img/coast.jpeg b/micro-blog/img/coast.jpeg
diff --git a/micro-blog/img/icon_ClemensTrueSelf.jpg b/micro-blog/img/icon_ClemensTrueSelf.jpg
diff --git a/micro-blog/img/icon_Wolpertinger.jpg b/micro-blog/img/icon_Wolpertinger.jpg
diff --git a/micro-blog/img/icon_annakin.jpg b/micro-blog/img/icon_annakin.jpg
diff --git a/micro-blog/img/icon_cowboy.jpg b/micro-blog/img/icon_cowboy.jpg
diff --git a/micro-blog/img/icon_icetroll.jpg b/micro-blog/img/icon_icetroll.jpg
diff --git a/micro-blog/img/icon_jonathan.jpg b/micro-blog/img/icon_jonathan.jpg
diff --git a/micro-blog/img/icon_karel.jpeg b/micro-blog/img/icon_karel.jpeg
diff --git a/micro-blog/img/icon_krtek.png b/micro-blog/img/icon_krtek.png
diff --git a/micro-blog/img/icon_musketeer.jpg b/micro-blog/img/icon_musketeer.jpg
diff --git a/micro-blog/img/icon_nemrut.jpg b/micro-blog/img/icon_nemrut.jpg
diff --git a/micro-blog/img/icon_tile.jpeg b/micro-blog/img/icon_tile.jpeg
diff --git a/micro-blog/img/india.jpeg b/micro-blog/img/india.jpeg
diff --git a/micro-blog/img/mount-fuji.jpg b/micro-blog/img/mount-fuji.jpg
diff --git a/micro-blog/img/mountains.jpeg b/micro-blog/img/mountains.jpeg
diff --git a/micro-blog/img/pyramid.jpeg b/micro-blog/img/pyramid.jpeg
diff --git a/micro-blog/img/teresa-holfeld.jpg b/micro-blog/img/teresa-holfeld.jpg
diff --git a/micro-blog/img/turkey.jpg b/micro-blog/img/turkey.jpg
diff --git a/micro-blog/img/windmill.jpg b/micro-blog/img/windmill.jpg
diff --git a/micro-blog/index.html b/micro-blog/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Micro Blog</title>
   <link href="tailwind.min.css" rel="stylesheet">
+
 </head>
 
 <body>
@@ -17,7 +18,7 @@ <h1 class="mx-auto text-center font-bold text-4xl m-6">Micro Blog</h1>
 
   </div>
 
-  <script type="text/javascript" src="index.js"></script>
+  <script src="index.js"></script>
 </body>
 
 </html>