diff --git a/Example Guide.md b/Example Guide.md index 442dfbbb..dab4f04b 100644 --- a/Example Guide.md +++ b/Example Guide.md @@ -8,17 +8,17 @@ Answer to the following questions: ## User Stories -- [ ] first user story -- [ ] second user story -- [ ] third user story -- [ ] forth user story -- [ ] fifth user story +- [ ] User can ... first user story +- [ ] User can ... second user story +- [ ] User can ... third user story +- [ ] User can ... forth user story +- [ ] User can ... fifth user story - etc... ## Bonus features -- [ ] first bonus feature -- [ ] second bonus feature +- [ ] User can ... first bonus feature +- [ ] User can ... second bonus feature - etc... ## Useful links and resources diff --git a/Projects/Markdown-Previewer.md b/Projects/Markdown-Previewer.md new file mode 100644 index 00000000..c6396459 --- /dev/null +++ b/Projects/Markdown-Previewer.md @@ -0,0 +1,24 @@ +# Markdown Previewer + +Convert Github flavored markdown into HTML code. + +## User Stories + +- [ ] User can enter Github flavored markdown into a text area +- [ ] User can see the resulting HTML in another container/box + +## Bonus features + +- [ ] When closing the browser window the markdown formatted text will be stored and when the User returns, the data will be retrieved +- [ ] User can click a button and the content of the box is saved to the clipboard + +## Useful links and resources + +- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) +- [Markdown Guide](https://www.markdownguide.org/basic-syntax/) +- [Marked - A markdown parser](https://github.com/markedjs/marked) +- [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) + +## Example projects + +- [Markdown Live Preview](https://markdownlivepreview.com/) diff --git a/Projects/Markdown-Table-Generator.md b/Projects/Markdown-Table-Generator.md index 56938afe..8ae6d578 100644 --- a/Projects/Markdown-Table-Generator.md +++ b/Projects/Markdown-Table-Generator.md @@ -19,6 +19,7 @@ Create an application that will convert a regular table with data provided by th ## Useful links and resources - [Markdown Guide](https://www.markdownguide.org/) +- [Marked - A markdown parser](https://github.com/markedjs/marked) - [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) ## Example project diff --git a/Projects/Notes-App.md b/Projects/Notes-App.md new file mode 100644 index 00000000..66512927 --- /dev/null +++ b/Projects/Notes-App.md @@ -0,0 +1,25 @@ +# Notes App + +Create and store your notes for later purpose! + +## User Stories + +- [ ] User can create a note +- [ ] User can edit a note +- [ ] User can delete a note +- [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved + +## Bonus features + +- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML +- [ ] User can see the date when he created the note + +## Useful links and resources + +- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) +- [Markdown Guide](https://www.markdownguide.org/basic-syntax/) +- [Marked - A markdown parser](https://github.com/markedjs/marked) + +## Example projects + +- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq) diff --git a/Projects/String-Art.md b/Projects/String-Art.md new file mode 100644 index 00000000..88ed126b --- /dev/null +++ b/Projects/String-Art.md @@ -0,0 +1,45 @@ +# StringArt + +The purpose of String Art is to provide the developer with practice creating a +simple animated graphic, using geometry in the animation algorithm, and +creating something that's visually pleasant to watch. + +String Art draws a single multicolored line which smoothly moves until one +end touches a side of the enclosing window. At the point it touches a "bounce" +effect is applied to change it's direction. + +A ripple effect is created by only retaining 10-20 images of the line as it +moves. Older images are progressively faded until they disappear. + +Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript. + +## User Stories + +- [ ] Start by drawing a multicolored line at a random position within the +boundary of it's enclosing window. +- [ ] Each 20ms draw a new copy of the line at a new position based on a +trajectory - the incremental distance from the previous line based on the +endpoints. +- [ ] When either endpoint of the line touches the boundary of the enclosing +window change it's direction and randomly alter its angle. +- [ ] Progressively fade the intensity of old lines so that only the most +recent 10-20 lines are visible to create the sense of movement or "ripple". + +## Bonus features + +- [ ] User can specify the length of the line and it's velocity +- [ ] User can specify the multiple lines within the window, all +moving along different trajectories and velocities + +## Useful links and resources + +- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/) +- [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations) + +## Example projects + +This project is very close, but has a small enclosing window and is monchromatic. +[Daniel Cortes](https://codepen.io/dgca/pen/dpxreO) + +This project is similar, but contains multiple lines and is monochromatic +[Brendan Mcintosh](https://codepen.io/BrendanMcintosh/pen/eBvRpy) diff --git a/README.md b/README.md index 9e50b56d..0b78e426 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,12 @@ Each project has the following **features**: | ------------------------------------------------------------------ | | [Book Finder App](./Projects/Book-Finder-App.md) | | [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | +| [Markdown Previewer](./Projects/Markdown-Previewer.md) | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | +| [Notes App](./Projects/Notes-App.md) | | [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | | [Slack Archiver](./Projects/Slack-Archiver.md) | +| [String Art](./Projects/String-Art.md) | | [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | ## Contribution