diff --git a/testing/.DS_Store b/testing/.DS_Store
new file mode 100644
index 0000000..06a99a2
Binary files /dev/null and b/testing/.DS_Store differ
diff --git a/testing/ping-test/index.html b/testing/ping-test/index.html
new file mode 100644
index 0000000..5bf22a9
--- /dev/null
+++ b/testing/ping-test/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>JS Ping Widget Test</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>JS Ping Widget Test</h1>
+
+        <div id="pingWidget">
+            <span id="statusCircle">⬤</span>
+            <span id="hostname">hostname</span>
+            <span class="pingTime" id="pingTimeNumber">XX</span>
+            <span class="pingTime">&nbsp; ms</span>
+        </div>
+
+        <div id="outputDiv"></div>
+
+        <script>
+            let hostname = "8.8.8.8";
+            let statusCircleText = document.getElementById("statusCircle");
+            let pingTimeText = document.getElementById("pingTimeNumber");
+            let hostnameText = document.getElementById("hostname");
+
+            // Simulate pings for now. ICMP ping doesn't seem to be possible in JS. Will have to check status codes of regular API calls.
+            
+            let intervalID = setInterval(pingEverySecond, 1000);
+
+            function pingEverySecond() {
+                hostnameText.innerHTML = hostname;
+                pingTimeText.innerHTML = Math.floor(Math.random()*50);
+
+                if (parseInt(pingTimeText.innerHTML) < 25) {
+                    statusCircleText.setAttribute("style","color: green");
+                } else {
+                    statusCircleText.setAttribute("style","color: red");
+                }
+            }
+        </script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/testing/ping-test/style.css b/testing/ping-test/style.css
new file mode 100644
index 0000000..05db896
--- /dev/null
+++ b/testing/ping-test/style.css
@@ -0,0 +1,34 @@
+html {
+    height: 100%;
+    margin: 0;
+    font-family: "Noto Sans Display", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+    background-color: rgb(36, 36, 36);
+    color: white;
+}
+
+body {
+    margin: 2em;
+}
+
+h1 {
+    display: inline-flex;
+    margin: 0px;
+}
+
+#pingWidget {
+    display: inline-flex;
+    margin: 0px 0px 15px 0px;
+    float: right;
+}
+
+#pingWidget #hostname {
+    padding: 0px 1em;
+}
+
+#pingWidget .pingTime {
+    color: grey;
+}
\ No newline at end of file
diff --git a/testing/tab-ui-test/index.html b/testing/tab-ui-test/index.html
new file mode 100644
index 0000000..989573d
--- /dev/null
+++ b/testing/tab-ui-test/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <style>
+    * {
+      box-sizing: border-box
+    }
+
+    /* Set height of body and the document to 100% */
+    html {
+      height: 100%;
+      margin: 0;
+      font-family: "Noto Sans Display", sans-serif;
+      font-optical-sizing: auto;
+      font-weight: 300;
+      font-style: normal;
+      font-variation-settings:
+        "wdth" 100;
+    }
+
+    button {
+      font-family: "Noto Sans Display", sans-serif;
+      font-optical-sizing: auto;
+      font-weight: 300;
+      font-style: normal;
+      font-variation-settings:
+        "wdth" 100;
+    }
+
+    /* Style tab links */
+    .tablink {
+      background-color: #555;
+      color: white;
+      float: left;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      padding: 14px 16px;
+      font-size: 17px;
+      width: 25%;
+    }
+
+    .tablink:hover {
+      background-color: #777;
+    }
+
+    /* Style the tab content (and add height:100% for full page content) */
+    .tabcontent {
+      color: white;
+      display: none;
+      padding: 100px 20px;
+      height: 100%;
+    }
+
+    #Home {
+      background-color: red;
+    }
+
+    #News {
+      background-color: green;
+    }
+
+    #Contact {
+      background-color: blue;
+    }
+
+    #About {
+      background-color: orange;
+    }
+  </style>
+</head>
+
+<body>
+
+  <button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
+  <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
+  <button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
+  <button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
+
+  <div id="Home" class="tabcontent">
+    <h3>Home</h3>
+    <p>Home is where the heart is..</p>
+  </div>
+
+  <div id="News" class="tabcontent">
+    <h3>News</h3>
+    <p>Some news this fine day!</p>
+  </div>
+
+  <div id="Contact" class="tabcontent">
+    <h3>Contact</h3>
+    <p>Get in touch, or swing by for a cup of coffee.</p>
+  </div>
+
+  <div id="About" class="tabcontent">
+    <h3>About</h3>
+    <p>Who we are and what we do.</p>
+  </div>
+
+  <script>
+    function openPage(pageName, elmnt, color) {
+      var i, tabcontent, tablinks;
+      tabcontent = document.getElementsByClassName("tabcontent");
+      for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+      }
+      tablinks = document.getElementsByClassName("tablink");
+      for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].style.backgroundColor = "";
+      }
+      document.getElementById(pageName).style.display = "block";
+      elmnt.style.backgroundColor = color;
+    }
+
+    // Get the element with id="defaultOpen" and click on it
+    document.getElementById("defaultOpen").click();
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
