Welcome to your first code challenge! This is a chance for you to share what you know with the instructors.
- This is not our way of outing imposters. You belong here.
- This is not a chance to ask neighbors for help. At least not during the challenge. We're looking for an accurate assessment of where the class is at individually, so we know what to review.
- This is not a chance to bang your head against a wall. Some things (like environment setup, internet connectivity, etc) aren't what the challenge is about. You can ask for help, but we might decline if it is, in fact, related to the challenge.
- This is not an opportunity to spiral into despair. No assessment (including this one) is a measure of your self-worth. You're awesome.
- This is a chance for us to see what you have learned (and notice class trends, things we might not have covered super well and should review).
- This is a chance to take small steps and commit when you get stuck (before deleting things) so we can try to understand your thought process.
- This is an opportunity to use lecture notes, past code, and google to create a solution to a problem you haven't seen before.
- This is a chance to realize just how much you've learned in such a short time. Seriously, you're awesome!
First, Fork and Clone this repo to your computer.
There is a gif below that shows what these instructions ask you to build.
Follow the steps below to complete the code challenge:
-
Create a
<button>element on the DOM, you may do this in jQuery, or write it directly in the HTML code. Have the button text read "Generate". -
Using jQuery, append a
<div>element when you click the button. It should append a new div each time you click the button. -
Inside the
<div>element you created in the previous step, create a<p>element that shows how many times you have clicked the "Generate" button from the first step. It should reflect the count for that step - the first div you made should be 1, the second 2, etc. (You can use the same append from the previous step) -
Inside the
<div>element created in step two, append two<button>elements with text of "Yellow" & "Delete". (You can use the same append from the previous step) -
In a CSS file, any
<div>created using the "Generate" button should start with red as it'sbackground-color. -
Clicking a "Yellow"
<button>should change its parentbackground-colorfrom red to yellow. -
Clicking a "Delete"
<button>should remove its parent<div>and that<div>schildren (including the clicked on "Delete" button).
No need to do anything beyond the challenge described above. Once you are complete, check your code into a GitHub repo and submit via this application.
See the linked video below for a demo of what the app should do: