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.