diff --git a/challenges/01-responsive-web-design/responsive-web-design-projects.json b/challenges/01-responsive-web-design/responsive-web-design-projects.json index 9843328230..14c759c21c 100644 --- a/challenges/01-responsive-web-design/responsive-web-design-projects.json +++ b/challenges/01-responsive-web-design/responsive-web-design-projects.json @@ -174,8 +174,17 @@ "id": "bd7158d8c442eddfaeb5bd18", "title": "Build a Tribute Page", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: My tribute page should have an element with a corresponding id=\"main\", which contains all other elements.", + "User Story #2: I should see an element with a corresponding id=\"title\", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. \"Dr. Norman Borlaug\").", + "User Story #3: I should see a div element with a corresponding id=\"img-div\".", + "User Story #4: Within the img-div element, I should see an img> element with a corresponding id=\"image\".", + "User Story #5: Within the img-div element, I should see an element with a corresponding id=\"img-caption\" that contains textual content describing the image shown in img-div.", + "User Story #6: I should see an element with a corresponding id=\"tribute-info\", which contains textual content describing the subject of the tribute page.", + "User Story #7: I should see an a element with a corresponding id=\"tribute-link\", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target=\"_blank\").", + "User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js.", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -202,8 +211,25 @@ "id": "587d78af367417b2b2512b03", "title": "Build a Survey Form", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/VPaoNP.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I can see a title with id=\"title\" in H1 sized text.", + "User Story #2: I can see a short explanation with id=\"description\" in P sized text.", + "User Story #3: I can see a form with id=\"survey-form\".", + "User Story #4: Inside the form element, I am required to enter my name in a field with id=\"name\".", + "User Story #5: Inside the form element, I am required to enter an email in a field with id=\"email\".", + "User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.", + "User Story #7: Inside the form, I can enter a number in a field with id=\"number\".", + "User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.", + "User Story #9: If I enter numbers outside the range of the number input, I will see an HTML5 validation error.", + "User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=\"name-label\", id=\"email-label\", and id=\"number-label\".", + "User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.", + "User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id=\"dropdown\".", + "User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.", + "User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.", + "User Story #15: Inside the form element, I am presented with a textarea at the end for additional comments.", + "User Story #16: Inside the form element, I am presented with a button with id=\"submit\" to submit all my inputs.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -220,8 +246,24 @@ "id": "587d78af367417b2b2512b04", "title": "Build a Product Landing Page", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/RKRbwL.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: My product landing page should have a header element with a corresponding id=\"header\".", + "User Story #2: I can see an image within the header element with a corresponding id=\"header-img\". A company logo would make a good image here.", + "User Story #3: Within the #header element I can see a nav element with a corresponding id=\"nav-bar\".", + "User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.", + "User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.", + "User Story #6: I can watch an embedded product video with id=\"video\".", + "User Story #7: My landing page has a form element with a corresponding id=\"form\".", + "User Story #8: Within the form, there is an input field with id=\"email\" where I can enter an email address.", + "User Story #9: The #email input field should have placeholder text to let the user know what the field is for.", + "User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.", + "User Story #11: Within the form, there is a submit input with a corresponding id=\"submit\".", + "User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.", + "User Story #13: The navbar should always be at the top of the viewport.", + "User Story #14: My product landing page should have at least one media query.", + "User Story #15: My product landing page should utilize CSS flexbox at least once.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -238,8 +280,24 @@ "id": "587d78b0367417b2b2512b05", "title": "Build a Technical Documentation Page", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/NdrKKL.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I can see a main element with a corresponding id=\"main-doc\", which contains the page's main content (technical documentation).", + "User Story #2: Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.", + "User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.", + "User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header \"Javascript and Java\" should have a corresponding id=\"Javascript_and_Java\").", + "User Story #5: The .main-section elements should contain at least 10 p elements total (not each).", + "User Story #6: The .main-section elements should contain at least 5 code elements total (not each).", + "User Story #7: The .main-section elements should contain at least 5 li items total (not each).", + "User Story #8: I can see a nav element with a corresponding id=\"navbar\".", + "User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation.", + "User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.", + "User Story #11: The header element in the navbar must come before any link (a) elements in the navbar.", + "User Story #12: Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a \"Hello world\" section/header, your navbar should have an element which contains the text \"Hello world\").", + "User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text \"Hello world\", the page navigates to a section element that has that id and contains the corresponding header.", + "User Story #14: On regular sized devices (laptops, desktops), the element with id=\"navbar\" should be shown on the left side of the screen and should always be visible to the user.", + "User Story #15: My Technical Documentation page should use at least one media query.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -256,8 +314,20 @@ "id": "bd7158d8c242eddfaeb5bd13", "title": "Build a Personal Portfolio Webpage", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNBOYG.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: My portfolio should have a welcome section with an id of welcome-section.", + "User Story #2: The welcome section should have an h1 element that contains text.", + "User Story #3: My portfolio should have a projects section with an id of projects.", + "User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.", + "User Story #5: The projects section should contain at least one link to a project.", + "User Story #6: My portfolio should have a navbar with an id of navbar.", + "User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.", + "User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.", + "User Story #9: My portfolio should have at least one media query.", + "User Story #10: The height of the welcome section should be equal to the height of the viewport.", + "User Story #11: The navbar should always be at the top of the viewport.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." diff --git a/challenges/03-front-end-libraries/front-end-libraries-projects.json b/challenges/03-front-end-libraries/front-end-libraries-projects.json index 7b524b22f5..cc15a1011d 100644 --- a/challenges/03-front-end-libraries/front-end-libraries-projects.json +++ b/challenges/03-front-end-libraries/front-end-libraries-projects.json @@ -8,8 +8,20 @@ "id": "bd7158d8c442eddfaeb5bd13", "title": "Build a Random Quote Machine", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/qRZeGZ.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I can see a wrapper element with a corresponding id=\"quote-box\".", + "User Story #2: Within #quote-box, I can see an element with a corresponding id=\"text\".", + "User Story #3: Within #quote-box, I can see an element with a corresponding id=\"author\".", + "User Story #4: Within #quote-box, I can see a clickable element with a corresponding id=\"new-quote\".", + "User Story #5: Within #quote-box, I can see a clickable element with a corresponding id=\"tweet-quote\".", + "User Story #6: On first load, my quote machine displays a random quote in the element with id=\"text\".", + "User Story #7: On first load, my quote machine displays the random quote's author in the element with id=\"author\".", + "User Story #8: When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.", + "User Story #9: My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.", + "User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the \"twitter.com/intent/tweet\" path in it's href attribute to tweet the current quote.", + "User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -31,8 +43,17 @@ "id": "bd7157d8c242eddfaeb5bd13", "title": "Build a Markdown Previewer", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/GrZVVO.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I can see a textarea element with a corresponding id=\"editor\".", + "User Story #2: I can see an element with a corresponding id=\"preview\".", + "User Story #3: When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea.", + "User Story #4: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked).", + "User Story #5: When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.", + "User Story #6: When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element.", + "Optional Bonus (you do not need to make this test pass): When I click a link rendered by my markdown previewer, the link is opened up in a new tab (HINT: read the Marked.js docs for this one!).", + "Optional Bonus (you do not need to make this test pass): My markdown previewer interprets carriage returns and renders them as br (line break) elements.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -55,8 +76,16 @@ "id": "587d7dbc367417b2b2512bae", "title": "Build a Drum Machine", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/MJyNMd.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I should be able to see an outer container with a corresponding id=\"drum-machine\" that contains all other elements.", + "User Story #2: Within #drum-machine I can see an element with a corresponding id=\"display\".", + "User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.", + "User Story #4: Within each .drum-pad, there should be an HTML5 audio element which has a src attribute pointing to an audio clip, a class name of clip, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=\"Q\", id=\"W\", id=\"E\" etc.).", + "User Story #5: When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.", + "User Story #6: When I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string \"Q\", pressing the W key should trigger the drum pad which contains the string \"W\", etc.).", + "User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." @@ -79,8 +108,24 @@ "id": "bd7158d8c442eddfaeb5bd17", "title": "Build a JavaScript Calculator", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/wgGVVX.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: My calculator should contain a clickable element containing an = (equal sign) with a corresponding id=\"equals\".", + "User Story #2: My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: id=\"zero\", id=\"one\", id=\"two\", id=\"three\", id=\"four\", id=\"five\", id=\"six\", id=\"seven\", id=\"eight\", and id=\"nine\".", + "User Story #3: My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: id=\"add\", id=\"subtract\", id=\"multiply\", id=\"divide\".", + "User Story #4: My calculator should contain a clickable element containing a . (decimal point) symbol with a corresponding id=\"decimal\".", + "User Story #5: My calculator should contain a clickable element with an id=\"clear\".", + "User Story #6: My calculator should contain an element to display values with a corresponding id=\"display\".", + "User Story #7: At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of display.", + "User Story #8: As I input numbers, I should be able to see my input in the element with the id of display.", + "User Story #9: In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit =, the correct result should be shown in the element with the id of display.", + "User Story #10: When inputting numbers, my calculator should not allow a number to begin with multiple zeros.", + "User Story #11: When the decimal element is clicked, a . should append to the currently displayed value; two . in one number should not be accepted.", + "User Story #12: I should be able to perform any operation (+, -, *, /) on numbers containing decimal points.", + "User Story #13: If 2 or more operators are entered consecutively, the operation performed should be the last operator entered.", + "User Story #14: Pressing an operator immediately following = should start a new calculation that operates on the result of the previous evaluation.", + "User Story #15: My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like 2 / 7 with reasonable precision to at least 4 decimal places).", "Note On Calculator Logic: It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.", "EXAMPLE: 3 + 5 x 6 - 2 / 4 =
", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", @@ -101,8 +146,37 @@ "id": "bd7158d8c442eddfaeb5bd0f", "title": "Build a Pomodoro Clock", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/XpKrrW.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", + "User Story #1: I can see an element with id=\"break-label\" that contains a string (e.g. \"Break Length\").", + "User Story #2: I can see an element with id=\"session-label\" that contains a string (e.g. \"Session Length\").", + "User Story #3: I can see two clickable elements with corresponding IDs: id=\"break-decrement\" and id=\"session-decrement\".", + "User Story #4: I can see two clickable elements with corresponding IDs: id=\"break-increment\" and id=\"session-increment\".", + "User Story #5: I can see an element with a corresponding id=\"break-length\", which by default (on load) displays a value of 5.", + "User Story #6: I can see an element with a corresponding id=\"session-length\", which by default displays a value of 25.", + "User Story #7: I can see an element with a corresponding id=\"timer-label\", that contains a string indicating a session is initialized (e.g. \"Session\").", + "User Story #8: I can see an element with corresponding id=\"time-left\". NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).", + "User Story #9: I can see a clickable element with a corresponding id=\"start_stop\".", + "User Story #10: I can see a clickable element with a corresponding id=\"reset\".", + "User Story #11: When I click the element with the id of reset, any running timer should be stopped, the value within id=\"break-length\" should return to 5, the value within id=\"session-length\" should return to 25, and the element with id=\"time-left\" should reset to it's default state.", + "User Story #12: When I click the element with the id of break-decrement, the value within id=\"break-length\" decrements by a value of 1, and I can see the updated value.", + "User Story #13: When I click the element with the id of break-increment, the value within id=\"break-length\" increments by a value of 1, and I can see the updated value.", + "User Story #14: When I click the element with the id of session-decrement, the value within id=\"session-length\" decrements by a value of 1, and I can see the updated value.", + "User Story #15: When I click the element with the id of session-increment, the value within id=\"session-length\" increments by a value of 1, and I can see the updated value.", + "User Story #16: I should not be able to set a session or break length to <= 0.", + "User Story #17: I should not be able to set a session or break length to > 60.", + "User Story #18: When I first click the element with id=\"start_stop\", the timer should begin running from the value currently displayed in id=\"session-length\", even if the value has been incremented or decremented from the original value of 25.", + "User Story #19: If the timer is running, the element with the id of time-left should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).", + "User Story #20: If the timer is running and I click the element with id=\"start_stop\", the countdown should pause.", + "User Story #21: If the timer is paused and I click the element with id=\"start_stop\", the countdown should resume running from the point at which it was paused.", + "User Story #22: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a break has begun.", + "User Story #23: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id=\"break-length\" element.", + "User Story #24: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a session has begun.", + "User Story #25: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=\"session-length\" element.", + "User Story #26: When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id=\"beep\".", + "User Story #27: The audio element with id=\"beep\" must be 1 second or longer.", + "User Story #28: The audio element with id of beep must stop playing and be rewound to the beginning when the element with the id of reset is clicked.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." diff --git a/challenges/04-data-visualization/data-visualization-projects.json b/challenges/04-data-visualization/data-visualization-projects.json index 7dcd9a69bc..898ba0e790 100644 --- a/challenges/04-data-visualization/data-visualization-projects.json +++ b/challenges/04-data-visualization/data-visualization-projects.json @@ -8,8 +8,22 @@ "id": "bd7168d8c242eddfaeb5bd13", "title": "Visualize Data with a Bar Chart", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/GrZVaM.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.", + "User Story #1: My chart should have a title with a corresponding id=\"title\".", + "User Story #2: My chart should have a g element x-axis with a corresponding id=\"x-axis\".", + "User Story #3: My chart should have a g element y-axis with a corresponding id=\"y-axis\".", + "User Story #4: Both axes should contain multiple tick labels, each with the corresponding class=\"tick\".", + "User Story #5: My chart should have a rect element for each data point with a corresponding class=\"bar\" displaying the data.", + "User Story #6: Each bar should have the properties data-date and data-gdp containing date and GDP values.", + "User Story #7: The bar elements' data-date properties should match the order of the provided data.", + "User Story #8: The bar elements' data-gdp properties should match the order of the provided data.", + "User Story #9: Each bar element's height should accurately represent the data's corresponding GDP.", + "User Story #10: The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.", + "User Story #11: The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.", + "User Story #12: I can mouse over an area and see a tooltip with a corresponding id=\"tooltip\" which displays more information about the area.", + "User Story #13: My tooltip should have a data-date property that corresponds to the data-date of the active area.", "Here is the dataset you will need to complete this project: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js.", "Once you're done, submit the URL to your working project with all its tests passing.", @@ -31,8 +45,24 @@ "id": "bd7178d8c242eddfaeb5bd13", "title": "Visualize Data with a Scatterplot Graph", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/bgpXyK.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.", + "User Story #1: I can see a title element that has a corresponding id=\"title\".", + "User Story #2: I can see an x-axis that has a corresponding id=\"x-axis\".", + "User Story #3: I can see a y-axis that has a corresponding id=\"y-axis\".", + "User Story #4: I can see dots, that each have a class of dot, which represent the data being plotted.", + "User Story #5: Each dot should have the properties data-xvalue and data-yvalue containing their corresponding x and y values.", + "User Story #6: The data-xvalue and data-yvalue of each dot should be within the range of the actual data and in the correct data format. For data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects.", + "User Story #7: The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis.", + "User Story #8: The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.", + "User Story #9: I can see multiple tick labels on the y-axis with %M:%S time format.", + "User Story #10: I can see multiple tick labels on the x-axis that show the year.", + "User Story #11: I can see that the range of the x-axis labels are within the range of the actual x-axis data.", + "User Story #12: I can see that the range of the y-axis labels are within the range of the actual y-axis data.", + "User Story #13: I can see a legend containing descriptive text that has id=\"legend\".", + "User Story #14: I can mouse over an area and see a tooltip with a corresponding id=\"tooltip\" which displays more information about the area.", + "User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area.", "Here is the dataset you will need to complete this project: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", @@ -54,8 +84,26 @@ "id": "bd7188d8c242eddfaeb5bd13", "title": "Visualize Data with a Heat Map", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/JEXgeY.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.", + "User Story #1: My heat map should have a title with a corresponding id=\"title\".", + "User Story #2: My heat map should have a description with a corresponding id=\"description\".", + "User Story #3: My heat map should have an x-axis with a corresponding id=\"x-axis\".", + "User Story #4: My heat map should have a y-axis with a corresponding id=\"y-axis\".", + "User Story #5: My heat map should have rect elements with a class=\"cell\" that represent the data.", + "User Story #6: There should be at least 4 different fill colors used for the cells.", + "User Story #7: Each cell will have the properties data-month, data-year, data-temp containing their corresponding month, year, and temperature values.", + "User Story #8: The data-month, data-year of each cell should be within the range of the data.", + "User Story #9: My heat map should have cells that align with the corresponding month on the y-axis.", + "User Story #10: My heat map should have cells that align with the corresponding year on the x-axis.", + "User Story #11: My heat map should have multiple tick labels on the y-axis with the full month name.", + "User Story #12: My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.", + "User Story #13: My heat map should have a legend with a corresponding id=\"legend\".", + "User Story #14: My legend should contain rect elements.", + "User Story #15: The rect elements in the legend should use at least 4 different fill colors.", + "User Story #16: I can mouse over an area and see a tooltip with a corresponding id=\"tooltip\" which displays more information about the area.", + "User Story #16: My tooltip should have a data-year property that corresponds to the data-year of the active area.", "Here is the dataset you will need to complete this project: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", @@ -77,8 +125,20 @@ "id": "587d7fa6367417b2b2512bbf", "title": "Visualize Data with a Choropleth Map", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/EZKqza.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.", + "User Story #1: My choropleth should have a title with a corresponding id=\"title\".", + "User Story #2: My choropleth should have a description element with a corresponding id=\"description\".", + "User Story #3: My choropleth should have counties with a corresponding class=\"county\" that represent the data.", + "User Story #4: There should be at least 4 different fill colors used for the counties.", + "User Story #5: My counties should each have data-fips and data-education properties containing their corresponding fips and education values.", + "User Story #6: My choropleth should have a county for each provided data point.", + "User Story #7: The counties should have data-fips and data-education values that match the sample data.", + "User Story #8: My choropleth should have a legend with a corresponding id=\"legend\".", + "User Story #9: There should be at least 4 different fill colors used for the legend.", + "User Story #10: I can mouse over an area and see a tooltip with a corresponding id=\"tooltip\" which displays more information about the area.", + "User Story #11: My tooltip should have a data-education property that corresponds to the data-education of the active area.", "Here are the datasets you will need to complete this project:
", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", @@ -96,8 +156,20 @@ "id": "587d7fa6367417b2b2512bc0", "title": "Visualize Data with a Treemap Diagram", "description": [ - "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.", - "Here's a working example. Try not to look at its code.", + "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/KaNGNR.", + "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", + "You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.", + "User Story #1: My tree map should have a title with a corresponding id=\"title\".", + "User Story #2: My tree map should have a description with a corresponding id=\"description\".", + "User Story #3: My tree map should have rect elements with a corresponding class=\"tile\" that represent the data.", + "User Story #4: There should be at least 2 different fill colors used for the tiles.", + "User Story #5: Each tile should have the properties data-name, data-category, and data-value containing their corresponding name, category, and value.", + "User Story #6: The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.", + "User Story #7: My tree map should have a legend with corresponding id=\"legend\".", + "User Story #8: My legend should have rect elements with a corresponding class=\"legend-item\".", + "User Story #9: The rect elements in the legend should use at least 2 different fill colors.", + "User Story #10: I can mouse over an area and see a tooltip with a corresponding id=\"tooltip\" which displays more information about the area.", + "User Story #11: My tooltip should have a data-value property that corresponds to the data-value of the active area.", "For this project you can use any of the following datasets:
", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.",