Update GCSE CS blog

assets/global.js

@@ -1,4 +1,4 @@
-$(document).ready(function(){
+$(document).ready(function() {
     // include navbar
     $(".navbar-insert").load("/page-inserts/navbar.html", function(){
         // initiate MDC drawer

computer-science-blog/css/main.css

@@ -1,7 +1,14 @@
 /* Reading School 2018, CSS*/
-iframe {
+.carousel-inner .item {
+	height: 100%;
+}
+.carousel-inner iframe {
 	width: 100%;
 	border: none;
+	height: 100%;
+}
+.carousel-indicators {
+	background: black;
 }
 .mdc-top-app-bar--fixed-adjust {
 	text-align: left;

computer-science-blog/index.html

@@ -29,21 +29,25 @@
         <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
 
         <!-- import jQuery -->
-        <script src="/assets/jquery.min.js"></script>
+        <script src="/assets/jquery.min.js" type="text/javascript"></script>
 
         <!-- import cookie JavaScript -->
         <script src="/assets/cookies.js" type="text/javascript"></script>
 
+        <!-- import Bootstrap -->
+        <script src="/assets/bootstrap.min.js" type="text/javascript"></script>
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
         <!-- import Material Design components & icons -->
         <link href="/assets/material-components-web.min.css" rel="stylesheet" type="text/css">
         <link href="/assets/material_icons.css" rel="stylesheet" type="text/css">
         <script src="/assets/material-components-web.min.js" type="text/javascript"></script>
 
         <!-- import local styling & scripts -->
-        <script src="scripts/scripts.js" type="text/javascript"></script>
         <script src="/assets/global.js" type="text/javascript"></script>
         <link href="/assets/global.css" rel="stylesheet" type="text/css">
         <link href="css/main.css" rel="stylesheet" type="text/css">
+        <script src="scripts/scripts.js" type="text/javascript"></script>
 
         <!-- Global site tag (gtag.js) - Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
@@ -71,17 +75,40 @@
                     <p>The current date is: <span id="current_date">unknown</span></p>
 					<div id="blog-insert"></div>
 					<h1>_____AREA_OF_STUDY_____ Presentation</h1>
-					<iframe src="pages/page_1.html"></iframe>
+
+                    <div id="presentation" class="carousel slide" data-ride="carousel">
+                        <!-- Indicators -->
+                        <ol class="carousel-indicators">
+                            <li data-target="#presentation" data-slide-to="0" class="active"></li>
+                            <li data-target="#presentation" data-slide-to="1"></li>
+                            <li data-target="#presentation" data-slide-to="2"></li>
+                        </ol>
+
+                        <!-- Wrapper for slides -->
+                        <div class="carousel-inner" style="height: 500px;">
+                            <div class="item">
+                                <img src="la.jpg" alt="Los Angeles" style="width:100%;">
+                            </div>
+
+                            <div class="item">
+                                <img src="chicago.jpg" alt="Chicago" style="width:100%;">
+                            </div>
+
+                            <div class="item">
+                                <img src="ny.jpg" alt="New york" style="width:100%;">
+                            </div>
+                        </div>
+                    </div>
                     <!-- button to go to previous slide -->
-                    <button class="validation_button mdc-button mdc-button--outlined" onclick="previousPage()" data-mdc-auto-init="MDCRipple">
+                    <a class="left carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
                         <i class="material-icons mdc-button__icon">navigate_before</i>
                         Previous
-                    </button>
+                    </a>
                     <!-- button to go to next slide -->
-                    <button class="validation_button mdc-button mdc-button--outlined" onclick="nextPage()" data-mdc-auto-init="MDCRipple">
+                    <a class="right carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
                         Next
                         <i class="material-icons mdc-button__icon">navigate_next</i>
-                    </button>
+                    </a>
 
                     <!-- link to source code on GitHub -->
                     <a href="https://github.com/mgrove36/demo-code/blob/master/computer-science-blog/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>

computer-science-blog/pages/blog.html

@@ -1,20 +1,6 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
+<h1>HTML Basics</h1>
-<html>
+<p>I know that:
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
-		
-		<!-- styles -->
-		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
-
-		<!-- scripts -->
-		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
-	</head>
-	<body>
-		<h1>HTML Basics</h1>
-		<p>I know that:
 	<ul>
 		<li>inline styles override all others.</li>
 		<li>index.html is one of the industry standard default file names, as well as index.htm, index.php, index.asp, index.aspx and more.</li>
@@ -46,6 +32,4 @@
 		<li>The later a CSS file is imported, the more power it has over the document - i.e. the last stylesheet imported will overwrite the styling in all of the other stylesheets.</li>
 		<li>To add another page, one can use an <code>&lt;iframe&gt;</code> or the jQuery <code>.load()</code> method.</li>
 	</ul>
-		</p>
+</p>
-	</body>
-</html>

computer-science-blog/pages/page_01.html

@@ -1,18 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
-		
-		<!-- styles -->
-		<link rel="stylesheet" type="text/css" href="../css/pages.css">
-
-		<!-- scripts -->
-		<script type="text/javascript" src="../scripts/scripts.js"></script>
-	</head>
-	<body>
-		<h1>Page 01</h1>
-	</body>
-</html>

computer-science-blog/pages/page_1.html

@@ -0,0 +1,20 @@
+<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
+
+		<!-- styles -->
+		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
+
+		<!-- scripts -->
+		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
+	</head>
+	<body>
+		<h1>Page 01</h1>
+		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+		<h1>END</h1>
+	</body>
+</html>

computer-science-blog/scripts/scripts.js

@@ -26,11 +26,7 @@ function displayPage(page) {
 	$("#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();
 
@@ -44,21 +40,21 @@ window.onload = function() {
     $("#current_date").html(current_date);
 
 	// define variables for blog pages
-	window.pages = [];
+	pages = ["pages/page_1.html"];
 	var page_exists = true;
 	var page_number = 1;
 	// gets all blog pages and add them to an array (pages[])
-	// while (page_exists) {
+	pages.forEach(function(item, index) {
-		// var page = "pages/page_" + page_number + ".html";
+		if (index == 0) {
-		// $.get("pages/page_" + page_number + ".html").done(function() {
+			$(".carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
-			// window.pages.append(page);
+			$(".carousel-indicators").append('<li data-target="#presentation" class="active" data-slide-to="' + index + '"></li>')
-		// }).fail(function() {
+		} else {
-			// page_exists = false;
+			$(".carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
-		// });
+			$(".carousel-indicators").append('<li data-target="#presentation" data-slide-to="' + index + '"></li>')
-		// 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");
 }