CTC-1958 Add code for Hello World

Kontent-ai-Learn · Mar 28, 2023 · 8f8290c · 8f8290c
1 parent 1e0e395
commit 8f8290c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/js/hello-world/index.html b/js/hello-world/index.html
@@ -0,0 +1,18 @@
+<!-- DocSection: hello_world_index -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello World with Kontent.ai</title>
+  <script type="text/javascript"
+    src="https://cdn.jsdelivr.net/npm/@kontent-ai/delivery-sdk@latest/dist/bundles/kontent-delivery.umd.js"></script>
+  <script src="main.js" async defer></script>
+</head>
+<body>
+  <!-- The HTML elements are there only to display data from Kontent.ai.
+        Using JavaScript, you'll pull the content from your Kontent.ai project into the elements -->
+  <img id="banner">
+  <h1 id="headline"></h1>
+  <p id="bodytext"></p>
+</body>
+</html>
+<!-- EndDocSection -->
diff --git a/js/hello-world/main.js b/js/hello-world/main.js
@@ -0,0 +1,28 @@
+// DocSection: hello_world_main
+// Initializes the Delivery JS SDK
+var KontentDelivery = window['kontentDelivery'];
+
+// Creates a delivery client for retrieving data from Kontent.ai
+const deliveryClient = new KontentDelivery.createDeliveryClient({
+  // Tip: Use your project ID to display your own content.
+  projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7'
+});
+
+// Retrieves the content item
+deliveryClient
+  .item('hello_headless_world')
+  .elementsParameter(['headline', 'body_text', 'picture'])
+  .toPromise()
+  .then((response) => processData(response));
+
+// Processes the retrieved data and displays it on the page.
+function processData(response) {
+  const bodyText = response.data.item.elements.body_text.value;
+  const headline = response.data.item.elements.headline.value;
+  const picture = response.data.item.elements.picture.value[0].url;
+
+  document.getElementById("bodytext").innerHTML = bodyText;
+  document.getElementById("headline").append(headline);
+  document.getElementById("banner").src = picture;
+}
+// EndDocSection