diff --git a/portfolio/pom.xml b/portfolio/pom.xml index 7944daf..c7d31ad 100644 --- a/portfolio/pom.xml +++ b/portfolio/pom.xml @@ -17,6 +17,12 @@ + + com.google.code.gson + gson + 2.8.6 + + javax.servlet javax.servlet-api @@ -41,4 +47,4 @@ - \ No newline at end of file + diff --git a/portfolio/src/main/java/com/google/sps/servlets/DataServlet.java b/portfolio/src/main/java/com/google/sps/servlets/DataServlet.java index dca6ec3..eb903cc 100644 --- a/portfolio/src/main/java/com/google/sps/servlets/DataServlet.java +++ b/portfolio/src/main/java/com/google/sps/servlets/DataServlet.java @@ -14,19 +14,28 @@ package com.google.sps.servlets; +import com.google.gson.Gson; import java.io.IOException; +import java.util.ArrayList; +import java.util.List; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; -/** Servlet that returns some example content. TODO: modify this file to handle comments data */ +/** Servlet that returns some example content. */ @WebServlet("/data") public class DataServlet extends HttpServlet { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { - response.setContentType("text/html;"); - response.getWriter().println("

Hello world!

"); + List messages = new ArrayList<>(); + messages.add("This is brought to you by JSON"); + messages.add("JSON is JavaScript Object Notation"); + messages.add("It is great for storing data like this"); + + response.setContentType("application/json;"); + String json = new Gson().toJson(messages); + response.getWriter().println(json); } } diff --git a/portfolio/src/main/webapp/index.html b/portfolio/src/main/webapp/index.html index 6f5b6f1..d22d2dc 100644 --- a/portfolio/src/main/webapp/index.html +++ b/portfolio/src/main/webapp/index.html @@ -6,7 +6,7 @@ - +

Ihsan Olawale's Portfolio

This is Ihsan Olawale's portfolio.

@@ -19,6 +19,7 @@

Ihsan Olawale's Portfolio

After seeing what I look like, you might be interested to know more about me. Don't worry, I considered this during the design phase, and presented an opportunity to cycle through assorted facts.

+
diff --git a/portfolio/src/main/webapp/script.js b/portfolio/src/main/webapp/script.js index 4fed33c..160b549 100644 --- a/portfolio/src/main/webapp/script.js +++ b/portfolio/src/main/webapp/script.js @@ -44,3 +44,17 @@ function addRandomFact() { const factContainer = document.getElementById('fact-container'); factContainer.innerText = fact; } + +/** + * Fetches messages from the server and adds them to the webpage + */ +function displayMessages() { + fetch('/data').then(response => response.json()).then((messages) => { + console.log(messages); + const messageContainer = document.getElementById('messages-container'); + messageContainer.innerText = ''; + for (const message of messages) { + messageContainer.innerText += message + '\n'; + } + }); +}