initialization

thivatm · May 6, 2019 · 5bb68ac · 5bb68ac
commit 5bb68ac
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 0 deletions.
diff --git a/Frame.png b/Frame.png
diff --git a/card.html b/card.html
@@ -0,0 +1,7 @@
+<template>
+    <div class="card">
+      <p class="card-title"></p>
+      <img class="gif-view" src=""/>
+    </div>
+  </template>
+  <script src="/UserCard/UserCard.js"></script>
diff --git a/card.js b/card.js
@@ -0,0 +1,26 @@
+import { url } from './services';
+
+class CardComponent extends HTMLElement {
+    constructor (){
+        super();
+    }
+
+    render(){
+
+    }
+
+    async fetchFromGiphy (){
+        const res = await fetch(url);
+        const json = await res.json()['data'][0];
+
+        const gifUrl = json.images['fixed_height_small'].url;
+        const gifName = json.title;
+
+        return {
+            name: gifName, 
+            url: gifUrl
+        }
+    }
+}
+
+customElements.define('card-comp', CardComponent);
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Web Component</title>
+</head>
+
+<body>
+
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,10 @@
+import { url } from './services.js';
+
+async function fetchFromGiphy (){
+    const res = await fetch(url);
+    const json = await res.json();
+
+    console.log(json['data'][0].title);
+}
+
+document.addEventListener('DOMContentLoaded', fetchFromGiphy);
diff --git a/services.js b/services.js
@@ -0,0 +1,4 @@
+const API_KEY = 'U1VN1X6Jd5b0jKc3aXRaSnj09R3TwNAR';
+const url = `http://api.giphy.com/v1/gifs/trending?api_key=` + API_KEY + `&limit=1`;
+
+export {API_KEY, url};