Last active
August 29, 2015 14:27
-
-
Save justin-john/bde5aad5cab870f5a8f2 to your computer and use it in GitHub Desktop.
Semantic HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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