From 79f88de83383d407403131049d6ec92d48786d9d Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Thu, 2 May 2019 14:47:37 -0500 Subject: [PATCH] Feature: Add QRCode Badge Generator app specification Add QRCode Badge Generator app specification Resolves: N/a See also: N/a --- Projects/QRCode-Badge-App.md | 70 ++++++++++++++++++++++++++++++++++++ README.md | 3 +- 2 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 Projects/QRCode-Badge-App.md diff --git a/Projects/QRCode-Badge-App.md b/Projects/QRCode-Badge-App.md new file mode 100644 index 00000000..2a7cc573 --- /dev/null +++ b/Projects/QRCode-Badge-App.md @@ -0,0 +1,70 @@ +# QRCode Badge Generator + +**Tier:** 2-Intermediate + +At some point in your career you will probably find yourself involved helping +to coordinate a company-sponsored event or a local technical Meetup. It's not +uncommon in these types of gatherings for attendees to want to exchange contact +information between themselves. + +But how to do that? Attendees could always exchange business cards or write +down each others email or social media account names, but that can be slow and +error prone. Wouldn't it be nice to be able to scan a each others badges to +capture this type of information quickly and more dependably? + +If you answered 'Yes!" to this question then QRCode Badge Generator is an +app you will be interested in creating. The objective of this application is +to collect a meeting attendee's name, email address, Twitter, and GitHub +account names and print a name badge with a QRcode that can be scanned using +a smartphone. + +### Requirements & Constraints + +- For this app you'll want to use the NPM package +[QRCode Generator](https://www.npmjs.com/package/qrcode-generator) to encode +the information you collect from the attendee in a QR code. + +- To test your implementation you'll need to download a QR code reader onto +your smartphone or tablet. There are many such readers that are free of charge. +Check the app store for your device to find the one that best suites your needs. + +## User Stories + +- [ ] User can see an input panel containing input fields for the attendee +name, email address, Twitter account name, GitHub account name, and 'Cancel' +and 'Create' buttons. +- [ ] User can enter data into these input fields. Note that attendee name +and email address are required, but the Twitter and GitHub account names are +optional fields. +- [ ] User can click the 'Cancel' button to clear all input fields as well as +the badge panel (see below) if it has been created. +- [ ] User can click the 'Create' button to generated an image of the +attendees name badge. +- [ ] User can see an error message if any of the following are true: + - Required fields are empty + - A first name and last name have not been entered + - Email input field isn't a properly formatted email address + - Twitter account name doesn't start with '@' +- [ ] User can see an badge panel displayed on screen containing this +information, plus a QR code encoded with this information. + +## Bonus features + +- [ ] User can see a 'Print' button below the badge panel. +- [ ] User can see the 'Print' button enabled only after the input fields +have been validated and the badge is displayed in the badge panel. +- [ ] User can make corrections to the input fields and click 'Create' to +update the contents of the badge panel. +- [ ] User can click the 'Print' button to reproduce the badge panel on a +label or hardcopy. +- [ ] User can see the '@' symbol automatically prepended to the Twitter +account name so it doesn't have to be manually entered. + +## Useful links and resources + +- [QR code (Wikipedia)](https://en.wikipedia.org/wiki/QR_code) +- [QRCode Generator](https://www.npmjs.com/package/qrcode-generator) + +## Example projects + +[QRCode Generator](https://kazuhikoarase.github.io/qrcode-generator/js/demo/) diff --git a/README.md b/README.md index f56124fe..8e3e5d21 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ required to complete them. | [Recipe App](./Projects/Recipe-App.md) | Recipe | 1-Beginner | | [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | | [Slider Design](./Projects/Slider-Design.md) | Display images using a slider control | 1-Beginner | -| [:star2: Stopwatch App](./Projects/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | +| [🌟Stopwatch App](./Projects/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | | [TrueOrFalse](./Projects/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Wind Chill](./Projects/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | | [🌟Word Frequency](./Projects/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner | @@ -85,6 +85,7 @@ required to complete them. | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate | | [Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate | | [🌟Podcast Directory](./Projects/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediate | +| [🌟QR Code Badge Generator](./Projects/QRCode-Badge-App.md) | Encode badge info in a QRcode | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [🌟Simple Online Store](./Projects/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate | | [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate |