This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. This Sprint explored the DOM and the concept of components. During this Sprint, you studied the DOM, DOM Events, and Components, as well as HTTP GET requests, and the axios library. In your challenge this week, you will demonstrate proficiency by creating an online Lambda newspaper called "Lambda Times."
Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.
This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your Tead Lead and Instructor in your cohort help channel on Slack. Your work reflects your proficiency in Applied JavaScript.
You have three hours to complete this challenge. Plan your time accordingly.
Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your Team Lead.
You are going to create a Lambda Newspaper. Your job is going to be to create the components that make up the newspaper's home page. You will do this at first with static data, then you will request data from a server to create dynamic components.
In meeting the minimum viable product (MVP) specifications listed below, you should have a console full of correct responses to the problems given.
Demonstrate your understanding of this week's concepts by answering the following free-form questions.
Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager
-
What is the DOM?
The DOM - or Document Object Model - is an API that allows us to programmatically build or generate webpage content.
-
What is an event?
An event is the DOM's way of responding to various conditions, such as a click, a scroll, or a button press.
-
What is an event listener?
An event listener is something that waits for a given action to occur in order to trigger an event as above. A listener does what it says on the label by listening for a given input, such as a click, scroll, and passing it to the event itself.
-
Why would we convert a NodeList into an Array?
Converting a NodeList to an Array allows one to loop through it using forEach.
-
What is a component?
A component is a function that uses DOM selection and manipulation to dynamically construct webpage elements from a template, data set or API.
- Fork the project into your GitHub user account
- Clone the forked project into a directory on your machine
- Create a pull request before you start working on the project requirements. You will continuously push your updates throughout the project.
- You are now ready to build this project with your preferred IDE
Your finished project must include all of the following requirements:
-
Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled in. DO NOT add any code to the HTML file itself.
-
Following the instructions in the
Header/index.jsfile, create the Header component. -
Following the instructions in the
Tabs/index.jsfile, create individual Tabs components. -
Following the instructions in the
Cards/index.jsfile, create individual Cards components.
Your stretch challenge is to write the functionality of a Carousel component. This is an advanced challenge, so you are not expected to be able to complete it. If you begin and don't finish, you should still submit with what you have. This is going to be a bit different because you are going to need to create some advanced functionality for the carousel. There is no need to request data for this exercise.
-
Complete the carousel functionality in
Carousel.js -
If you complete the Carousel, add functionality so that the carousel slides when the buttons are pressed instead of just appearing.
-
Create an 'infinite loop' carousel. In which as long as you click on an arrow, the array of images will loop over itself.
-
If you have finished the above, research
data attributes. Implement data attributes within your tabs as well as your cards. Give the tabs functionality so that when they are clicked they filter the cards to only display the cards that contain that topic.