Merge pull request #7 from liam-ng/v3

V3
liam-ng · Oct 9, 2023 · f431581 · f431581
2 parents 9c0688b + 8a91eee
commit f431581
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/client/html/assets/API Flow Diagram.png b/client/html/assets/API Flow Diagram.png
diff --git a/client/html/assets/Paypal high-level API flow.png b/client/html/assets/Paypal high-level API flow.png
diff --git a/client/html/assets/variable list.jpg b/client/html/assets/variable list.jpg
diff --git a/client/html/index.html b/client/html/index.html
@@ -11,7 +11,7 @@
   <body>
     <header class="device-content">
       <section class="left">
-        <a href="#left">Left</a>
+        <a href="overview.html" target="_self">Overview of API workflow</a>
 			</section>
 
       <section class="right">

diff --git a/client/html/overview.html b/client/html/overview.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<title>Liam Demo</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<style>
+.mySlides {display:none}
+.w3-left, .w3-right, .w3-badge {cursor:pointer;color:black;}
+.w3-badge {height:13px;width:13px;padding:0;background-color:black;}
+body {font-family: 'Inter', Arial;}
+</style>
+<body>
+
+<div class="w3-container">
+<a href="/" target="_self"><button type="button" name="back">Go back</button></a>
+  <h2>PayPal Subscription API high-level workflow</h2>
+  <p>API-first approach was adopted in this project. After testing on Postman and documenting the API requirements, I started to construct the website.</p>
+</div>
+
+<div class="w3-content w3-display-container" style="max-width:800px">
+  <img class="mySlides" src="assets/API Flow Diagram.png" style="width:100%">
+  <img class="mySlides" src="assets/Paypal high-level API flow.png" style="width:100%">
+  <img class="mySlides" src="assets/variable list.jpg" style="width:100%">
+  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
+    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
+    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
+    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
+    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
+    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
+  </div>
+</div>
+<h2>Reference for this project</h2>
+<a href="https://web.postman.co/documentation/27629820-e8d86ff7-7df6-4a74-9027-f11d5fdc681a"><p>PayPal APIs Postman Library</a> <small>- you can use PayPal example to simulate API workflow here</small></p>
+<a href="https://developer.paypal.com/dashboard/applications/sandbox"><p>PayPal Developer Sandbox</a>  <small>- you can build your PayPal Application (ID & Secret) here</small></p>
+<a href="https://developer.paypal.com/api/rest/current-resources/"><p>PayPal Developer Documentation</a> <small>- you can find all API specifications here</small></p>
+<a href="https://github.com/paypaldev/PayPal-JS-FullStack-Advanced-Checkout-Sample"><p>PayPal JS FullStack Advanced Checkout Sample</a> <small>- you can find some useful sample JavaScript for reference here</small></p>
+
+<script>
+var slideIndex = 1;
+showDivs(slideIndex);
+
+function plusDivs(n) {
+  showDivs(slideIndex += n);
+}
+
+function currentDiv(n) {
+  showDivs(slideIndex = n);
+}
+
+function showDivs(n) {
+  var i;
+  var x = document.getElementsByClassName("mySlides");
+  var dots = document.getElementsByClassName("demo");
+  if (n > x.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = x.length}
+  for (i = 0; i < x.length; i++) {
+    x[i].style.display = "none";  
+  }
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" w3-white", "");
+  }
+  x[slideIndex-1].style.display = "block";  
+  dots[slideIndex-1].className += " w3-white";
+}
+</script>
+
+</body>
+</html>