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-09 21:12:37 +00:00
parent 40abbac2a7
commit 6c8aaacda2
13 changed files with 313 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/global.css
View File

@@ -52,6 +52,10 @@ body {
overflow: auto; overflow: auto;
} }
.app-bar {
position: absolute;
}
.main-content, footer { .main-content, footer {
margin: 20px; margin: 20px;
} }

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

@@ -36,6 +36,9 @@
} }
.carousel-inner .item { .carousel-inner .item {
height: 100%;
width: 100%;
border: none;
padding: 15px; padding: 15px;
} }
@@ -46,24 +49,13 @@
.carousel-indicators .active { .carousel-indicators .active {
background-color: var(--mdc-theme-secondary); background-color: var(--mdc-theme-secondary);
} }
/* ensure content below buttons doesn't cover them */
.presentation-buttons-container {
width: 100%;
min-height: 32px;
}
/* revert changes made by Bootstrap */ /* revert changes made by Bootstrap */
p {
margin: 0;
}
.carousel-indicators { .carousel-indicators {
margin: 0; margin: 0;
position: initial; position: initial;
width: auto; width: auto;
} }
.carousel h1, .carousel h2, .carousel h3, .carousel .h1, .carousel .h2, .carousel .h3 {
margin-top: 0;
}
/* add side margins depending on screen size */ /* add side margins depending on screen size */
#main-content { #main-content {

12
computer-science-blog/css/presentation-imports.css Normal file
View File

@@ -0,0 +1,12 @@
html, body {
font-family: 'Roboto';
background: transparent;
}
/* revert changes made by Bootstrap */
p {
margin: 0;
}
h1, h2, h3, .h1, .h2, .h3 {
margin-top: 0;
}

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

@@ -72,8 +72,7 @@
<main class="main-content" id="main-content"> <main class="main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust"> <div class="mdc-top-app-bar--fixed-adjust">
<p>The current date is: <span id="current_date">unknown</span></p> <p>The current date is <span id="current_date">unknown</span>.</p>
<div id="blog-insert"></div>
<h1>HTTP Introduction</h1> <h1>HTTP Introduction</h1>
<div class="presentation-container"> <div class="presentation-container">
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel"> <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
@@ -84,7 +83,6 @@
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
</ol> </ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- button to go to previous slide --> <!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i> <i class="material-icons mdc-button__icon">navigate_before</i>
@@ -95,7 +93,6 @@
Next Next
<i class="material-icons mdc-button__icon">navigate_next</i> <i class="material-icons mdc-button__icon">navigate_next</i>
</button> </button>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -111,7 +108,6 @@
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
</ol> </ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- button to go to previous slide --> <!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i> <i class="material-icons mdc-button__icon">navigate_before</i>
@@ -122,18 +118,19 @@
Next Next
<i class="material-icons mdc-button__icon">navigate_next</i> <i class="material-icons mdc-button__icon">navigate_next</i>
</button> </button>
<!-- </div> -->
</div> </div>
</div> </div>
<div class="presentation-buttons-container"> <div id="blog-insert"></div>
</div>
<!-- link to source code on GitHub --> <!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a> <a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div> </div>
</main> </main>
<footer> <footer>
&copy; Matthew Grove 2018 Made in association with Daniel Dunbar
<br>
<br>
&copy; Matthew Grove & Daniel Dunbar 2018
</footer> </footer>
</div> </div>
</body> </body>

26
computer-science-blog/pages/cookies.html
View File

@@ -1,6 +1,24 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>Cookies</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Cookies</h2>
<p>
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, 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 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 strong security and the ID of each one must be unfathomably cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
@@ -9,4 +27,6 @@
visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address. visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies. cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
</p> </p>
</body>
</html>

52
computer-science-blog/pages/css.html
View File

@@ -1,32 +1,64 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>CSS</h2> <!DOCTYPE html>
<p> <html>
Cascading Stylesheets (CSS) are used to style websites - i.e. to make them look pretty. <head>
Whereas a page without CSS is just displayed as plain content: <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
<script src="../scripts/css-presentation-slide.js"></script>
</head>
<body>
<h2>CSS</h2>
<p>
CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
h1 {
Background-color: red;
}
which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
A page without CSS can be very bland and boring:
<br> <br>
<img class="presentation-image" src="images/without_css.jpg"> <img class="presentation-image" src="../images/without_css.jpg">
<br> <br>
One with CSS looks a lot more presentable: But one with CSS looks a lot more presentable:
<br> <br>
<img class="presentation-image" src="images/with_css.jpg"> <img class="presentation-image" src="../images/with_css.jpg">
<br> <br>
CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
the elements on the page in order to style them. IDs are written with a preceding hashtag, the elements on the page in order to style them. IDs are written with a preceding hashtag,
classes are written with a preceding full stop and tag names are written without any preceding characters. classes are written with a preceding full stop and tag names are written without any preceding characters.
The styles themselves (like <code>height</code>) should all end in semicolons. The styles themselves (like <code>height</code>) should all end in semicolons. A comment in CSS is started
with <code>/*</code> and ended with <code>*/</code>.
Here are some example declarations: Here are some example declarations:
<br> <br>
<code> <code>
p {<br> p {<br>
/* this changes the font size of all p elements */<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br> &nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
}<br> }<br>
.class_name {<br> .class_name {<br>
/* this changes the height of all elements with the class name 'class_name' */<br>
&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br> &nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
}<br> }<br>
#id_name {<br> #id_name {<br>
/* this changes the font of all elements with the ID 'id_name' */<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br> &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
}<br> }<br>
</code> </code>
<br> <br>
A comment in CSS is started with <code>/*</code> and ended with <code>*/</code>. <span id="css_attribute_list_link"></span>
</p> </p>
</body>
</html>

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

@@ -1,6 +1,24 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>HTML</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>HTML</h2>
<p>
Hypertext Markup Language is the standard language used by browsers to display webpages. Hypertext Markup Language is the standard language used by browsers to display webpages.
HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>, an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>,
@@ -12,4 +30,6 @@
<br> <br>
HTML is closely linked with CSS and JavaScript; a comment in HTML is started with HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
<code>&lt;!--</code> and ended with <code>--&gt;</code>. <code>&lt;!--</code> and ended with <code>--&gt;</code>.
</p> </p>
</body>
</html>

26
computer-science-blog/pages/http.html
View File

@@ -1,9 +1,29 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>HTTP</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>HTTP</h2>
<p>
HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. 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 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 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, 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. the server and request must both follow this protocol.
</p> </p>
</body>
</html>

26
computer-science-blog/pages/https.html
View File

@@ -1,8 +1,28 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>HTTPS</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>HTTPS</h2>
<p>
HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is (SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or 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. ‘miscommunicated' data, because this increases security.
</p> </p>
</body>
</html>

26
computer-science-blog/pages/hyperlinks.html
View File

@@ -1,6 +1,24 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>Hyperlinks</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Hyperlinks</h2>
<p>
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.  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. 
<br> <br>
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. 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.
@@ -9,4 +27,6 @@
<br> <br>
Creating a hyperlink in html: Creating a hyperlink in html:
<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code> <code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
</p> </p>
</body>
</html>

26
computer-science-blog/pages/js.html
View File

@@ -1,6 +1,24 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>JavaScript</h2> <!DOCTYPE html>
<p> <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,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>JavaScript</h2>
<p>
JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
(rather than, for example, binary) and runs on the end user's computer. It is used for many purposes, (rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
including editing content on a webpage, performing mathematical operations and storing variables. including editing content on a webpage, performing mathematical operations and storing variables.
@@ -13,4 +31,6 @@
<br> <br>
A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
is started with <code>/*</code> and ended with <code>*/</code>. is started with <code>/*</code> and ended with <code>*/</code>.
</p> </p>
</body>
</html>

4
computer-science-blog/scripts/css-presentation-slide.js Normal file
View File

@@ -0,0 +1,4 @@
window.onload = function() {
var year = new Date().getFullYear();
document.getElementById("css_attribute_list_link").innerHTML = 'All of the CSS style attributes are listed <a href="https://www.w3.org/TR/css-' + year + '/#properties">here</a>.';
}

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

@@ -9,7 +9,7 @@ window.onload = function() {
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
// set current date // set current date
var current_date = day + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); var current_date = day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
// display date // display date
$("#current_date").html(current_date); $("#current_date").html(current_date);
@@ -21,29 +21,25 @@ window.onload = function() {
var http_pages = ["hyperlinks", "http", "https", "cookies"]; var http_pages = ["hyperlinks", "http", "https", "cookies"];
// displays HTTP presentation pages // displays HTTP presentation pages
http_pages.forEach(function(item, index) { http_pages.forEach(function(item, index) {
$.get("pages/" + item + ".html", function(content) {
if (index == 0) { if (index == 0) {
$("#http_presentation .carousel-inner").append('<div class="item active">' + content + '</div>'); $("#http_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_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 { } else {
$("#http_presentation .carousel-inner").append('<div class="item">' + content + '</div>'); $("#http_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_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 // define variables for HTML presentation pages
var html_pages = ["html", "css", "js"]; var html_pages = ["html", "css", "js"];
// displays HTML presentation pages // displays HTML presentation pages
html_pages.forEach(function(item, index) { html_pages.forEach(function(item, index) {
$.get("pages/" + item + ".html", function(content) {
if (index == 0) { if (index == 0) {
$("#html_presentation .carousel-inner").append('<div class="item active">' + content + '</div>'); $("#html_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>') $("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
} else { } else {
$("#html_presentation .carousel-inner").append('<div class="item">' + content + '</div>'); $("#html_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>') $("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
} }
}); });
});
} }