me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update GCSE CS blog

Browse Source
This commit is contained in:
Matthew Grove
2018-12-06 20:57:30 +00:00
parent 939e5205f8
commit 7695f54ac6
9 changed files with 128 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
assets/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
computer-science-blog/css/main.css
View File

@@ -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;

41
computer-science-blog/index.html
View File

@@ -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>

16
computer-science-blog/pages/blog.html
View File

@@ -1,18 +1,4 @@
<!-- 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>HTML Basics</h1>
<p>I know that:
<ul>
@@ -47,5 +33,3 @@
<li>To add another page, one can use an <code>&lt;iframe&gt;</code> or the jQuery <code>.load()</code> method.</li>
</ul>
</p>
</body>
</html>

18
computer-science-blog/pages/page_01.html
View File

@@ -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>

20
computer-science-blog/pages/page_1.html Normal file
View File

@@ -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>

26
computer-science-blog/scripts/scripts.js
View File

@@ -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) {
// 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 ++;
// }
pages.forEach(function(item, index) {
if (index == 0) {
$(".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>')
} else {
$(".carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
$(".carousel-indicators").append('<li data-target="#presentation" data-slide-to="' + index + '"></li>')
}
});
// displays first blog page
window.current_blog_page = 0;
// $("#presentation").load(window.pages[window.current_blog_page]);
$("#blog-insert").load("pages/blog.html");
}