<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link href='style.css' rel='stylesheet'>
<style>
header.row {
position: relative;
}
nav {
font: 500 24px/1.5 Verdana;
position: absolute;
bottom: 0;
left: 6em;
display: inline-table;
}
h2,
a {
display: table-cell
}
</style>
</head>
<body>
<form class='container' id='form1' name='form1'>
<header class='row '>
<hgroup class='col-md-12'>
<h1 class='col-md-6'>Blah Blog</h1>
<nav class='col-md-6 pull-right'>
<h2>Home Page</h2>
<a href='page2.html'>Page 2</a></nav>
</hgroup>
</header>
<main class='container'>
<section class='sec row'>
<header class='col-md-12'>
<h3 class='cat col-md-6'>Adventure</h3>
<output name='adv' class='adv qty col-md-6 pull-left'></output>
</header>
<div class='col-md-12'>
<article>
<p>Adventerous content</p>
<p>More adventerous content</p>
</article>
<article>Adventure</article>
<article>Adventure</article>
<article>Adventure</article>
<article>Adventure</article>
</div>
</section>
<section class='sec row'>
<header class='col-md-12'>
<h3 class='cat col-md-6'>Culture</h3>
<output name='cul' class='cul qty col-md-6 pull-left'></output>
</header>
<div class='col-md-12'>
<article>
<p>Cultural content</p>
<p>More boring cultural content</p>
</article>
</div>
</section>
<section class='sec row'>
<header class='col-md-12'>
<h3 class='cat col-md-6'>Science-Fiction</h3>
<output name='scf' class='scf qty col-md-6 pull-left'></output>
</header>
<div class='col-md-12'>
<article>
<p>Awesome content</p>
<p>More awesome content</p>
</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
<article>Science-Fiction</article>
</div>
</section>
<section class='sec row'>
<header class='col-md-12'>
<h3 class='cat col-md-6'>Mystery</h3>
<output name='mys' class='mys qty col-md-6 pull-left'></output>
</header>
<div class='col-md-12'>
<article>
<p>Mysterious content</p>
<p>More mysterious content</p>
</article>
<article>Mystery</article>
<article>Mystery</article>
<article>Mystery</article>
</div>
</section>
</main>
<footer class='row'>
<address>
<p>Contact: bytemy@ss.com</p>
</address>
</footer>
</form>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
/* Collect and count how many...
|| <article>s there are in each
|| <section>
*/
// Collect each <section>
$('.sec').each(function() {
// In each <section> find all of it's <article>s
var articles = $(this).find('article');
// Get the total number of <article>s in each section
var total = articles.length;
/* In each <section> find <...class='qty'>
|| and set it's content to the value of TOTAL
*/
$(this).find('.qty').text(total);
});
/* Collect the data on index.html...
||...storing it in an array then...
||...set the array in localStorage...
||...Get the array from localStorage...
||... and apply it to <outputs>s in page2.html
*/
// When a link is clicked...
$('a').on('click', function() {
/* Collect the contents of each...
||...<output> into an array
*/
var data = [];
$('.qty').each(function() {
var txt = $(this).text();
data.push(txt);
});
/* Store array into localStorage...
|| ...stringify array into a string
*/
localStorage.setItem("data", JSON.stringify(data));
});
/* Get the array from localStorage...
|| ...parse array from a string
*/
var dataTxt = JSON.parse(localStorage.getItem("data"));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link href='style.css' rel='stylesheet'>
<style>
header.row {
position: relative;
}
nav {
font: 500 24px/1.5 Verdana;
position: absolute;
bottom: 0;
left: 6em;
display: inline-table;
}
h2,
a {
display: table-cell
}
ul {
list-style: none;
display: inline-table;
}
li {
display: table-row;
line-height: 2;
}
li * {
display: table-cell;
}
label {
position: relative;
top: -10px;
}
</style>
</head>
<body>
<div class='container'>
<header class='row'>
<hgroup class='col-md-12'>
<h1 class='col-md-6'>Blah Blog</h1>
<nav class='col-md-6 pull-right'>
<a href='index.html'>Home Page</a>
<h2>Page 2</h2></nav>
</hgroup>
</header>
<main class='container'>
<section class='row'>
<form id='frm2' name='frm2'>
<ul class='col-md-4 pull-right'>
<li>
<output name='adv' class='adv qty pull-left'></output>
<label>Adventure</label>
</li>
<li>
<output name='cul' class='cul qty pull-left'></output>
<label>Culture</label>
</li>
<li>
<output name='scf' class='scf qty pull-left'></output>
<label>Science-Fiction</label>
</li>
<li>
<output name='mys' class='mys qty pull-left'></output>
<label>Mystery</label>
</li>
</ul>
</form>
<article class='col-md-8'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</article>
</section>
</main>
<footer class='row'>
<address>
<p>Contact: bytemy@ss.com</p>
</address>
</footer>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
/* Get the array from localStorage...
|| ...Set each value of the array...
|| ...to the index equivalent matched...
|| ...to it's forms.elements collection
*/
var dataTxt = JSON.parse(localStorage.getItem("data"));
var F = document.forms[0];
var total = F.elements.length;
for (let i = 0; i < total; i++) {
F.elements[i].value = dataTxt[i];
}
</script>
</body>
</html>
html,
body {
background: #222;
color: #FddCFF;
}
main {
margin: 0 auto;
padding: 0 10px 20px;
}
header {
display: table;
}
hgroup,
h3,
nav {
display: table-cell;
}
nav a {
font-size: 30px;
white-space: nowrap;
padding: 0 50px 5px;
}
h1,
h2,
h3 {
color: #fc1;
white-space: nowrap;
}
footer {
border-top: 3px solid grey;
padding: 10px 20px;
}
section {
border-top: 5px ridge gold;
padding-bottom: 15px;
}
.qty {
font-size: 24px;
color: cyan;
position: relative;
top:10px;
}
.adv::before {
content: '\1f4a5'
}
.cul::before {
content: '\1f4a4'
}
.scf::before {
content: '\1f916'
}
.mys::before {
content: '\1f575'
}