Update GCSE CS blog

assets/global.css

@@ -1,7 +1,9 @@
-/* change them */
 :root {
+    /* change theme */
     --mdc-theme-primary: #00adb4;
     --mdc-theme-secondary: #d84315;
+    /* ensure Bootstrap doesn't alter any font sizes set in rem */
+    font-size: initial;
 }
 
 /* implement colour theme on elements that don't have it applied by default */
@@ -11,6 +13,9 @@
 .mdc-fab {
    background-color: var(--mdc-theme-secondary);
 }
+.material-icons:hover {
+    text-decoration: none;
+}
 
 /* hide unwanted overflow from mdc-text-field :before & :after */
 .mdc-text-field-container {

computer-science-blog/css/main.css

@@ -1,4 +1,7 @@
 /* Reading School 2018, CSS*/
+.carousel-inner {
+	height: 500px;
+}
 .carousel-inner .item {
 	height: 100%;
 }
@@ -7,30 +10,34 @@
 	border: none;
 	height: 100%;
 }
-.carousel-indicators {
+.carousel-indicators li {
-	background: black;
+	border: 1px solid var(--mdc-theme-secondary);
 }
-.mdc-top-app-bar--fixed-adjust {
+.carousel-indicators .active {
+	background-color: var(--mdc-theme-secondary);
+}
+.presentation-button-left {
+	float: left;
+}
+.presentation-button-right {
+	float: right;
+}
+#main-content {
 	text-align: left;
-	margin: 0 15%;
+	margin: 20px 15%;
 }
 @media screen and (max-width: 1000px) {
-	.mdc-top-app-bar--fixed-adjust {
+	#main-content {
-		margin: 0 10%;
+		margin: 20px 10%;
 	}
 }
 @media screen and (max-width: 800px) {
-	.mdc-top-app-bar--fixed-adjust {
+	#main-content {
-		margin: 0 5%;
+		margin: 20px 5%;
 	}
 }
 @media screen and (max-width: 600px) {
-	.mdc-top-app-bar--fixed-adjust {
+	#main-content {
-		margin: 0 2%;
+		margin: 20px;
-	}
-}
-@media screen and (max-width: 400px) {
-	.mdc-top-app-bar--fixed-adjust {
-		margin: 0 1%;
 	}
 }

computer-science-blog/index.html

@@ -34,15 +34,15 @@
         <!-- 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 Bootstrap -->
+        <script src="/assets/bootstrap.min.js" type="text/javascript"></script>
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
         <!-- import local styling & scripts -->
         <script src="/assets/global.js" type="text/javascript"></script>
         <link href="/assets/global.css" rel="stylesheet" type="text/css">
@@ -74,41 +74,57 @@
                <div class="mdc-top-app-bar--fixed-adjust">
                    <p>The current date is: <span id="current_date">unknown</span></p>
 					<div id="blog-insert"></div>
-					<h1>_____AREA_OF_STUDY_____ Presentation</h1>
+					<h1>HTTP Introduction</h1>
 
-                    <div id="presentation" class="carousel slide" data-ride="carousel">
+                   <div id="http_presentation" class="carousel slide" data-interval="false" 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="carousel-inner">
-                            <div class="item">
+                           <!--<div class="item">-->
-                                <img src="la.jpg" alt="Los Angeles" style="width:100%;">
+                           <!--    <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
-                            </div>
+                           <!--</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>
+                   <div class="presentation-buttons-container">
                        <!-- button to go to previous slide -->
-                    <a class="left carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                       <button class="presentation-button-left 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
-                    </a>
+                       </button>
                        <!-- button to go to next slide -->
-                    <a class="right carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                       <button class="presentation-button-right 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>
-                    </a>
+                        </button>
+                    </div>
+                    
+                    <!-- HTML presentation -->
+                    <h1>HTML, CSS & JS Introduction</h1>
+
+                    <div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
+                        <!-- Indicators -->
+                        <ol class="carousel-indicators">
+                        </ol>
+
+                        <!-- Wrapper for slides -->
+                        <div class="carousel-inner">
+                        </div>
+                    </div>
+                    <div class="presentation-buttons-container">
+                        <!-- button to go to previous slide -->
+                        <button class="presentation-button-left 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>
+                        <!-- button to go to next slide -->
+                        <button class="presentation-button-right 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>
+                    </div>
 
                     <!-- 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/cookies.html

@@ -0,0 +1,19 @@
+<!-- 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>Cookies</h1>
+		Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, usually one-line long, which store relevant information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use cookies to store passwords that are set to ‘remember’. Thus cookies need a lot of security and the id of each one must be unfathomably difficult to find without permission so that hackers cannot find someone’s cookie. Cookies are stored on the computer, as opposed to the website. Whenever you visit a browser, the browser accesses the relevant cookie and your information is there. Also, whenever a website uses cookies, they must announce the fact and give an option to refuse them, for data privacy/security reasons.
+	</body>
+</html>

computer-science-blog/pages/http.html

@@ -0,0 +1,19 @@
+<!-- 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>HTTP</h1>
+		HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests, the server and request must both follow this protocol.
+	</body>
+</html>

computer-science-blog/pages/https.html

@@ -13,8 +13,7 @@
 		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
 	</head>
 	<body>
-		<h1>Page 01</h1>
+		<h1>HTTPS</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>
+		HTTPS is the secure hypertext transfer protocol, which means that it is a variation on the HTTP protocol - except it uses a secure socket layer (SSL), which is an encryption protocol invoked by an HTTPS request. SSL is essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or ‘miscommunicated' data, because this increases security.
-		<h1>END</h1>
 	</body>
 </html>

computer-science-blog/pages/hyperlinks.html

@@ -0,0 +1,23 @@
+<!-- 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>Hyperlinks</h1>
+		A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
+		The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
+		Some website owners wish to reserve the right to not be hyperlinked without permission.
+		Creating a hyperlink in html:
+		<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
+	</body>
+</html>

computer-science-blog/scripts/scripts.js

@@ -39,22 +39,32 @@ window.onload = function() {
 	// display date
     $("#current_date").html(current_date);
 
-	// define variables for blog pages
+	// define variables for HTTP presentation pages
-	pages = ["pages/page_1.html"];
+	http_pages = ["pages/hyperlinks.html"];
-	var page_exists = true;
+	// displays HTTP presentation pages
-	var page_number = 1;
+	http_pages.forEach(function(item, index) {
-	// gets all blog pages and add them to an array (pages[])
-	pages.forEach(function(item, index) {
 		if (index == 0) {
-			$(".carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
+			$("#http_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
-			$(".carousel-indicators").append('<li data-target="#presentation" class="active" data-slide-to="' + index + '"></li>')
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
 		} else {
-			$(".carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
+			$("#http_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
-			$(".carousel-indicators").append('<li data-target="#presentation" data-slide-to="' + index + '"></li>')
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
+		}
+	});
+	
+   	// define variables for HTML presentation pages
+   	html_pages = ["pages/page_1.html"];
+   	// displays HTML presentation pages
+   	html_pages.forEach(function(item, index) {
+   		if (index == 0) {
+   			$("#html_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
+   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
+   		} else {
+   			$("#html_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
+   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
    		}
    	});
 
 	// displays first blog page
-	window.current_blog_page = 0;
 	$("#blog-insert").load("pages/blog.html");
 }