As you may have heard, @no-stack-dub-sack, @paycoguy, and @Christian-Paul have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.
This is a brand-new project that should be a ton of fun to build: a drum kit! Note that the test suite may not yet work in browsers other than Chrome.
The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.
If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.
Thanks, and happy coding!
Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO
Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/bgpXyK
For this project, we will be visualizing the data that is found in this dataset: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json. Good luck and happy coding!
- I can see a title element that has a corresponding
- I can see an x-axis that has a corresponding
- I can see a y-axis that has a corresponding
- I can see dots, that each have a
"dot", which represent the data being plotted.
- Each dot should have the properties
data-yvaluecontaining their corresponding x and y values.
data-yvalueof each dot should be within the range of the actual data.
data-xvalueand its corresponding dot should align with the corresponding point/value on the x-axis.
data-yvalueand its corresponding dot should align with the corresponding point/value on the y-axis.
- I can see multiple tick labels on the y-axis with “%M:%S” time format.
- I can see multiple tick labels on the x-axis that show the year.
- I can see that the range of the x-axis labels are within the range of the actual x-axis data.
- I can see that the range of the y-axis labels are within the range of the actual y-axis data.
- I can see a legend that has a corresponding
- I can mouse over any dot and see a tooltip with corresponding
id="tooltip"which displays more information about the data.
- My tooltip should have a
data-yearproperty that corresponds to the given year of the active dot.