Merge

2022-02-11 14:04:23 +01:00 · 2022-02-11 14:04:23 +01:00 · a90cf9be4e
commit a90cf9be4e
2 changed files with 102 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Our superheroes</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+
+      <header>
+
+      </header>
+
+      <section>
+
+      </section>
+
+    <script>
+
+    async function populate() {
+
+      const requestURL = 'https://social.tchncs.de/api/v1/statuses/107735248507147283';
+      const request = new Request(requestURL);
+
+      const response = await fetch(request);
+      const mastopost = await response.json();
+
+      populateHeader(mastopost);
+//      populateHeroes(mastopost);
+
+    }
+
+    function populateHeader(obj) {
+      const header = document.querySelector('header');
+      const myH1 = document.createElement('h1');
+	myH1.textContent = obj['account']['display_name'];
+      header.appendChild(myH1);
+
+      const myPara = document.createElement('article');
+      myPara.innerHTML = `${obj['content']}`;
+      header.appendChild(myPara);
+    }
+
+   
+
+    populate();
+
+    </script>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,48 @@
+/* || general styles */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+body {
+  width: 800px;
+  margin: 0 auto;
+}
+
+h1, h2 {
+  font-family: 'Faster One', cursive;
+}
+
+/* header styles */
+
+h1 {
+  font-size: 4rem;
+  text-align: center;
+}
+
+header p {
+  font-size: 1.3rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+/* section styles */
+
+section article {
+  width: 33%;
+  float: left;
+}
+
+section p {
+  margin: 5px 0;
+}
+
+section ul {
+  margin-top: 0;
+}
+
+h2 {
+  font-size: 2.5rem;
+  letter-spacing: -5px;
+  margin-bottom: 10px;
+}