Update GCSE CS blog

computer-science-blog/index.html

@@ -68,10 +68,8 @@
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--fixed-adjust">
                     <p>The current date is: <span id="current_date">unknown</span></p>
-					<div class="blog-insert"></div>
+					<div id="blog-insert"></div>
 					<iframe src="pages/blog.html"></iframe>
-					<h1>_____AREA_OF_STUDY_____ Presentation</h1>
-					<iframe src="" id ="iframe"></iframe>
                     <!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
                     <div class="mdc-text-field-container">
                         <div class="mdc-text-field mdc-text-field--outlined"  data-mdc-auto-init="MDCTextField">
@@ -88,6 +86,10 @@
                         <p class="mdc-text-field-helper-text" aria-hidden="true">
                             Validate with the Luhn Algorithm
                         </p>
+                    </div>
+					<h1>_____AREA_OF_STUDY_____ Presentation</h1>
+					<div id="presentation">
+						
 					</div>
                     <!-- button to go to previous slide -->
                     <button class="validation_button mdc-button mdc-button--outlined" onclick="previousPage()" data-mdc-auto-init="MDCRipple">

computer-science-blog/scripts/scripts.js

@@ -1,6 +1,36 @@
 // set page title
 window.page_title = "Computer Science Blog | Matthew Grove";
+
+function nextPage() {
+	// if there are more slides to come, display the next one
+	if (window.current_blog_page < window.pages.length) {
+		displayPage(window.pages[window.current_blog_page + 1]);
+	} else {
+		// if end of presentation has been reached, display the first slide
+		displayPage(window.pages[0]);
+	}
+}
+
+function previousPage() {
+	// if there are more slides before the current one, display the previous slide
+	if (window.current_blog_page >= 1) {
+		displayPage(window.pages[window.current_blog_page - 1]);
+	} else {
+		// if end of presentation has been reached, display the first slide
+		displayPage(window.pages[window.pages.length - 1]);
+	}
+}
+
+function displayPage(page) {
+	// document.getElementById("iframe").src = "pages/" + page + ".html";
+	$("#presentation").load(page);
+}
+
+var pages = ["page_01", "page_02", "page_03"];
+var pageIndex = 0;
+
 window.onload = function() {
+	
 	// set the current date
     var date = new Date();
 
@@ -13,23 +43,22 @@ window.onload = function() {
 	// display date
     $("#current_date").html(current_date);
 	
-    // include navbar
+	// define variables for blog pages
-    $(".blog-insert").load("pages/blog.html", function(){
+	window.pages = [];
-        
+	var page_exists = true;
+	var page_number = 1;
+	// gets all blog pages and add them to an array (pages[])
+	while (page_exists) {
+		var page = "pages/page_" + page_number + ".html";
+		$.get("pages/page_" + page_number + ".html").done(function() { 
+			window.pages.append(page);
+		}).fail(function() {
+			page_exists = false;
 		});
+		page_number ++;
+	}
+	// displays first blog page
+	window.current_blog_page = 0;
+	$("#presentation").load(window.pages[window.current_blog_page]);
+	$("#blog-insert").load("pages/blog.html");
 }
-
-function nextPage() {
-	displayPage(pages[0]);
-}
-
-function previousPage() {
-	
-}
-
-function displayPage(page) {
-	document.getElementById("iframe").src = "pages/" + page + ".html";
-}
-
-var pages = ["page_01", "page_02", "page_03"];
-var pageIndex = 0;

computer-science-blog/scripts/scripts.js~

@@ -1,31 +0,0 @@
-// set page title
-window.page_title = "Computer Science Blog | Matthew Grove";
-
-window.onload = function() {
-	// set the current date
-    var date = new Date();
-
-    // ternary operator: if the date < 10 then add 0 to the start of it, else display the date
-    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-	
-	// set current date
-    var current_date = day + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
-	
-	// display date
-    document.getElementById("current_date").innerHTML = current_date;
-}
-
-function nextPage() {
-	displayPage(pages[0]);
-}
-
-function previousPage() {
-	
-}
-
-function displayPage(page) {
-	document.getElementById("iframe").src = "pages/" + page + ".html";
-}
-
-var pages = ["page_01", "page_02", "page_03"];
-var pageIndex = 0;