{
  "name": "Intermediate Front End Development Projects",
  "order": 0.015,
  "challenges": [
    {
      "id": "bd7158d8c442eddfaeb5bd18",
      "title": "Stylize Stories on Camper News",
      "difficulty": 1.02,
      "challengeSeed": ["126415129"],
      "description": [
        "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/MarufSarker/full/ZGPZLq/' target='_blank'>http://codepen.io/MarufSarker/full/ZGPZLq/</a>.",
        "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
        "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
        "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
        "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
        "<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
        "<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
        "<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
        "<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/news/hot</code>.",
        "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
        "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
      ],
      "type": "zipline",
      "challengeType": 3,
      "tests": [],
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "",
      "descriptionEs": [],
      "namePt": "",
      "descriptionPt": []
    },
    {
      "id": "bd7158d8c442eddfaeb5bd19",
      "title": "Build a Wikipedia Viewer",
      "difficulty": 1.03,
      "challengeSeed": ["126415131"],
      "description": [
        "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/MwgQea' target='_blank'>http://codepen.io/GeoffStorbeck/full/MwgQea</a>.",
        "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
        "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
        "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
        "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
        "<span class='text-info'>User Story:</span> As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
        "<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.",
        "<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.",
        "<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.",
        "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
        "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
      ],
      "type": "zipline",
      "challengeType": 3,
      "tests": [],
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "",
      "descriptionEs": [],
      "namePt": "",
      "descriptionPt": []
    },
    {
      "id": "bd7158d8c442eddfaeb5bd17",
      "title": "Build a JavaScript Calculator",
      "difficulty": 1.05,
      "challengeSeed": ["126411565"],
      "description": [
        "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/zxgaqw' target='_blank'>http://codepen.io/GeoffStorbeck/full/zxgaqw</a>.",
        "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
        "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
        "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
        "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
        "<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
        "<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
        "<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
        "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
        "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
      ],
      "type": "zipline",
      "challengeType": 3,
      "tests": [],
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "",
      "descriptionEs": [],
      "namePt": "",
      "descriptionPt": []
    },
    {
      "id": "bd7158d8c442eedfaeb5bd1c",
      "title": "Build a Tic Tac Toe Game",
      "difficulty": 1.06,
      "challengeSeed": ["126415123"],
      "description": [
        "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/alex-dixon/full/JogOpQ/' target='_blank'>http://codepen.io/alex-dixon/full/JogOpQ/</a>.",
        "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
        "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
        "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
        "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
        "<span class='text-info'>User Story:</span> As a user, I can play a game of Tic Tac Toe with the computer.",
        "<span class='text-info'>Bonus User Story:</span> As a user, I can never actually win against the computer - at best I can tie.",
        "<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
        "<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
        "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
        "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
      ],
      "type": "zipline",
      "challengeType": 3,
      "tests": [],
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "",
      "descriptionEs": [],
      "namePt": "",
      "descriptionPt": []
    },
    {
      "id": "bd7158d8c442eddfaeb5bd1c",
      "title": "Build a Simon Game",
      "difficulty": 1.07,
      "challengeSeed": ["137213633"],
      "description": [
        "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/dting/full/QbRyqq/</a>.",
        "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
        "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
        "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
        "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
        "<span class='text-info'>User Story:</span> As a user, I am presented with a random series of button presses.",
        "<span class='text-info'>User Story:</span> As a user, each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
        "<span class='text-info'>User Story:</span> As a user, I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
        "<span class='text-info'>User Story:</span> As a user, if I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.",
        "<span class='text-info'>User Story:</span> As a user, I can see how many steps are in the current series of button presses.",
        "<span class='text-info'>Bonus User Story:</span> As a user, if I want to restart, I can hit a button to do so, and the game will return to a single step.",
        "<span class='text-info'>Bonus User Story:</span> As a user, I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.",
        "<span class='text-info'>Bonus User Story:</span> As a user, the tempo of the game speeds up incrementally on the 5th, 9th and 13th step.",
        "<span class='text-info'>Bonus User Story:</span> As a user, I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
        "<span class='text-info'>Hint:</span> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
        "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
        "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
      ],
      "type": "zipline",
      "challengeType": 3,
      "tests": [],
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "",
      "descriptionEs": [],
      "namePt": "",
      "descriptionPt": []
    }
  ]
}
