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

6
assets/global.js
View File

@@ -1,4 +1,4 @@
$(document).ready(function(){
$(document).ready(function() {
// include navbar
$(".navbar-insert").load("/page-inserts/navbar.html", function(){
// initiate MDC drawer
@@ -24,10 +24,10 @@ $(document).ready(function(){
if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
}
// display title
$(".mdc-top-app-bar__title").html(window.page_title);
// give 'seleted' styling to correct item on navbar
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");

11
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;
@@ -26,4 +33,4 @@ iframe {
.mdc-top-app-bar--fixed-adjust {
margin: 0 1%;
}
}
}

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>

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

@@ -1,51 +1,35 @@
<!-- 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>
<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>
<li>iframes are used to embed documents within other documents.</p>
<li>
CSS files are linked by using the following code:
<br>
<code>&lt;link rel="stylesheet" type="text/css" href="../css/main.css"&gt;</code>
</li>
<li>
JS files are linked by using the following code:
<br>
<code>&lt;script type="text/javascript" src="scripts/scripts.js"&gt;&lt;/script&gt;</code>
</li>
<li>
Adding the date when the window loads:
<br>
<code>
// onload of window
<br>
window.onload = dateInsert;
</code>
</li>
<li>
Ternary operators work by using:
<br>
<code>[condition] ? [value if true] : [value if false]</code>
</li>
<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>
</body>
</html>
<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>
<li>iframes are used to embed documents within other documents.</p>
<li>
CSS files are linked by using the following code:
<br>
<code>&lt;link rel="stylesheet" type="text/css" href="../css/main.css"&gt;</code>
</li>
<li>
JS files are linked by using the following code:
<br>
<code>&lt;script type="text/javascript" src="scripts/scripts.js"&gt;&lt;/script&gt;</code>
</li>
<li>
Adding the date when the window loads:
<br>
<code>
// onload of window
<br>
window.onload = dateInsert;
</code>
</li>
<li>
Ternary operators work by using:
<br>
<code>[condition] ? [value if true] : [value if false]</code>
</li>
<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>

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>

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

@@ -26,39 +26,35 @@ 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();
// 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
$("#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");
}
}