Skip to content

Instantly share code, notes, and snippets.

@justin-john
Last active August 29, 2015 14:27
Show Gist options
  • Save justin-john/bde5aad5cab870f5a8f2 to your computer and use it in GitHub Desktop.
Save justin-john/bde5aad5cab870f5a8f2 to your computer and use it in GitHub Desktop.
Semantic HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Frontend</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<header>
<h1 id="header">Company name</h1>
</header>
<nav id="menu">
<ul>
<li><a href="#item1">Menu item 1</a></li>
<li><a href="http://www.google.com">Menu item 2</a></li>
<li><a href="http://www.bing.com">Menu item 3</a></li>
<li><a href="#item4">Menu item 4</a></li>
<li><a href="#item5">Menu item 5</a></li>
</ul>
</nav>
<section id="content">
<article id="article">
<header>
<h2 id="title">Title of the article</h2>
</header>
<div id="body">
First paragraph.
<br><br>
Second paragraph.
<br><br>
Third paragraph, when she said:
<br>
"Every time a developer writes non semantic markup
a panda is murdered." - Jane Doe
<br><br>
Written by John Doe at 07/12/2015 19:01
</div>
</article>
<aside id="other">
<ul>
<li><a href="#article1" data-article="1">Link to another article 1</a></li>
<li><a href="#article2" data-article="2">Link to another article 2</a></li>
<li><a href="#article3" data-article="3">Link to another article 3</a></li>
<li><a href="#article4" data-article="4">Link to another article 4</a></li>
<li><a href="#article5" data-article="5">Link to another article 5</a></li>
</ul>
</aside>
</section>
<footer id="footer">
<address id="address">
Foobar GmbH.<br>
Musterstr 57<br>
12000 Berlin<br>
</address>
</footer>
</body>
</html>
* {
font-size: 16px;
font-family: Arial;
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
}
#header {
font-size: 32px;
background: red;
color: white;
text-align: center;
padding: 30px;
}
#menu {
margin: 15px 0;
height: 15px;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li{
list-style: none;
float: left;
width: 20%;
text-align: center;
border-right: 1px solid grey;
}
#menu li:last-child {
border: 0;
width: 19.5%;
}
#menu li a {
text-decoration: none;
color: green;
}
#content {
margin: 10px 0;
width: 100%;
float: left;
}
#article, #other {
float: left;
}
#article {
width: 75%;
background: grey;
color: white;
position: relative;
clear: both;
}
#article > * {
margin: 10px;
}
#other {
width: 25%;
}
#other ul {
text-align: center;
}
#other li {
list-style: none;
text-decoration: none;
margin: 5px 0;
}
#other li a {
text-decoration: none;
color: green;
}
.visitors {
position: absolute;
top: 0;
right: 0;
}
#footer {
clear: both;
}
window.onload = function() {
var visitCount
, articles
, articleSelectors
, template
, articleArrIndex
, i = 0;
sessionStorage.articleCounter++ || (sessionStorage.articleCounter = 1);
visitCount = document.createElement('div');
visitCount.className = 'visitors';
visitCount.innerHTML = 'Number of visitors: ' + sessionStorage.articleCounter;
document.getElementById('article').appendChild(visitCount);
/**
* A sample JSON to change the article on click of article links
*/
articles = [
{ title: 'Title of the article', content: 'First paragraph. <br><br> Second paragraph. <br><br> Third paragraph, when she said: <br> "Every time a developer writes non semantic markup a panda is murdered." - Jane Doe <br><br> Written by John Doe at 07/12/2015 19:01'},
{ title: 'Article 2', content: 'Content of Article 2 <br><br> Written by Jenny Shown at 07/12/2015 18:01'},
{ title: 'Article 3', content: 'Content of Article 3 <br><br> Written by Ericka Davis at 07/12/2015 17:26'},
{ title: 'Article 4', content: 'Content of Article 4 <br><br> Written by Shran Doe at 07/11/2015 16:44'},
{ title: 'Article 5', content: 'Content of Article 5 <br><br> Written by Jo Elet at 07/11/2015 15:37'}
];
articleSelectors = document.querySelectorAll('#other a');
template = document.querySelector('#article');
for (; i < articleSelectors.length; i++) {
articleSelectors[i].addEventListener('click', function(e) {
articleArrIndex = this.dataset.article - 1;
template.querySelector('#title').innerText = articles[articleArrIndex].title;
template.querySelector('#body').innerHTML = articles[articleArrIndex].content;
});
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment