diff --git a/Projects/JSON2CSV-App.md b/Projects/JSON2CSV-App.md new file mode 100644 index 00000000..154b033a --- /dev/null +++ b/Projects/JSON2CSV-App.md @@ -0,0 +1,54 @@ +# JSON2CSV + +**Tier:** 1-Beginner + +Developers and end users are both experts in their own domains and as such, +each speaks using a domain-specific language and terminology. This also extends +to the tools used to manipulate data. Developers have found JSON to be a +universally accepted method for transferring data between applications. End +Users, on the other hand, rely on spreadsheets to organize and analyze data. + +The objective of JSON2CSV is to help bridge the gap between JSON and CSV by +converting JSON to CSV to make it easier to review data in a spreadsheet. It +allows the user to paste JSON into a text box to generate its equivalent CSV. + +### Constraints ### + +- You may not use any libraries or packages designed to perform this type of +conversion. +- If you choose to implement this in JavaScript don't use complicated looping +in your first implementation. Instead, use `Object.keys()` and `Object.values` +to generate CSV for the header and data rows. +- Nested JSON structures are not supported. + +## User Stories + +- [ ] User can paste JSON syntax into a text box +- [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV +- [ ] User can see the converted CSV in another text box +- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON +- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. + +## Bonus features + +- [ ] User can enter the path to the JSON file on the local file system in a text box +- [ ] User can click a 'Open' button to load file containing the JSON into the text box +- [ ] User can see a warning message if the JSON file is not found +- [ ] User can enter the path the CSV file is to be saved to in a text box +- [ ] User can click a 'Save' button to save the CSV file to the local file system +- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. + +## Useful links and resources + +- [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values) +- [JavaScript Object Notation (JSON)](https://www.json.org/) +- [MDN Javascript Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) +- [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb) +- [Reading files in Javascript](https://codepen.io/jduprey/details/xbale) + +## Example projects + +Try to complete your JSON2CSV implementation before reviewing the example +project(s). + +- [JSON to CSV Converter](https://codepen.io/JFarrow/pen/umjGF) diff --git a/README.md b/README.md index 688d7c97..d7f3c27c 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ required to complete them. | [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner | | [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | +| [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner | | [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | | [Notes App](./Projects/Notes-App.md) | Create and online note pad | 1-Beginner | | [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner |