Task 1 Introduction
Page has a carousel, and a details pane. The carousel has a list of people (avatars) and you choose one from this list.
How to organise better the code that has already been written. How to improve the code with modules.
Task: Attach event handlers for the header. Starts with
$(document).ready(function(){..}) The links on the page already work, but he wants to turn them into opening a modal.
We need to set up a click handler. What should we attach it to?
The html fragment:
<header rel="js-header">
<div class="logo">My Cool Page</div>
<div class="controls" rel="js-controls">
<a href="register.html" rel="nofollow js-register">register</a> |
<a href="login.html" rel="nofollow js-login">login</a>
</div>
</header>
He uses the rel attributes. There are many different schools of how the js code should determine and find the element you want to interact with:- using the
id attribute (look up by id) - doesn't like it. He argues, id's are more often used in the CSS (my note: not really). On big projects the id's can change through (CSS) refactoring - add a
data- attribute (some people use this) - he prefers the
rel attribute. It's valid on almost very element on the page, but doesn't have a meaning on the elements. It's original meaning was relationship. Likenofollow on aa element. It means no relationship at all between the current page and linked page. Common on the SEO world (to not to endorse other pages). On alink tag it explains the relationship for examplestylesheet.
rel further to define the relationship between the page element and his JavaScript. He use the js- prefix. He says you can use any form you prefer.