Topics:
- Constructors with ES6 class syntax
data
attributes
In this project, our design team has already built an HTML/CSS web page for us, our job is to add javascript functionality.
Follow these steps to set up and work on your project:
- Create a forked copy of this project.
- Add your project manager as collaborator on Github.
- Clone your OWN version of the repository (Not Lambda's by mistake!).
- Create a new branch:
git checkout -b <firstName-lastName>
. - Implement the project on your newly created
<firstName-lastName>
branch, committing changes regularly. - Push commits:
git push origin <firstName-lastName>
.
Follow these steps for completing your project.
- Submit a Pull Request to merge branch into master (student's Repo). Please don't merge your own pull request
- Add your project manager as a reviewer on the pull request.
- Your project manager will count the project as complete by merging the branch back into master.
Once you load the page, you will notice a dropdown menu in the upper left side of the page. Currently, when you click on it nothing happens. We will build out the functionality to allow a dropdown menu to open and close when a user clicks on the dropdown button.
- Study the HTML in the index.html file corresponding to the dropdown component.
- Study the LESS file in the Dropdown folder.
- With your knowledge of the HTML and CSS, complete the
Dropdown.js
file. You will be creating a dropdown component.
-
Now that we have an idea of how to create a component with a single class, we will be creating a complex component made up of itself and a sub-component. The greater component wrapper will be called
TabLink
and the smaller component it will create will be calledTabItem
.- The
TabLink
component will be the overall wrapper of the sub-component. This higher level component will find and create the sub-component within it. This component will be on each of what we may consider thetabs
on top of the box. These links will control the associated item, as well as selecting and de-selecting themselves. - The
TabItem
component will be the text displayed when a tab is selected. It will share a data attribute with it's corresponding tab and should only show when its tab has been selected.
- The
-
The
Tabs.js
file starts at the bottom of the page and then jumps around. Pay attention to what is being called and when. Study the corresponding HTML and LESS to get a better idea of how the tabs were built. -
Once you have completed the above, add a couple Tabs to the HTML in order to see first hand how great building webpages with components is!
- Create a Single
Tabs
component that creates all instances ofTabLink
. It will also hold the currently selected tab.- Add a
deselect
method to each theTabItem
andTabLink
classes. This will deselect that specific tab. - Remove the code deselecting all
TabLink
s andTabItem
s, only relying on the deselect method. Tabs
should deselect the currently selected tab each time a new tab is selected.
- Add a
- Animations. (Use the animation library of your choice)
- Get the dropdown to slide in and out, rather than just appearing and disappearing.
- Get the TabsItem text to fade in and out, or slide in and out.
- Look through the LESS code and see where you can refactor using animations to achieve similar results.
- Add styling using the LESS files.
- Remove the boxes on the top card and replace them with an image carousel. This will have to be done from scratch, and should be pretty difficult, but it uses the same techniques as the
Tabs
component. Give it a left and right button, and a number of images that scroll as the buttons are pressed.