Converting dollars to cents would enable you to practice your fundamental knowledge of programming. Loops, if conditions and a simple algorithm will be used.
Your task is to let the user input a dollar value (float), assuming that it can also accept extra cents (ex. $2.75), and convert it into an integer (in this case, if $2.75 = 275). After this, convert into coins with the sub-type of dollars: penny, nickel, dime and quarter. Use an algorithm that would divide the dollar value to the four coin types, and output few coins as possible.
The challenge: Try this without using any frameworks.
(EX. If you have $0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies)
## User Stories
- [ ] User can enter a dollar value
- [ ] User can see the total cents from the converted dollar value
## Bonus features
- [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents
In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx.
You could always refer to the [Regular Expression Library](http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1) for support
For this project, there'd be three required inputs for validation:
- The first would require the user to enter five (5) capital letters, six (6) symbols and two hyphens (-) in any order. This could be used as a password.
- The second which could be used as username would require the user to enter letters without spaces
- The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com).
## User Stories
- [ ] User should be notified of any invalid inputs by error messages displayed on the form.
- [ ] The submit button on the form would never be executed until all entries are validated.
## Useful links and resources
- [Javascript form validation using regular expressions](http://form.guide/snippets/javascript-form-validation-using-regular-expression.html)
- [JavaScript Form Validation Using Regular Expressions](https://study.com/academy/lesson/javascript-form-validation-using-regular-expressions-definition-example.html)
## Example project
- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp)
A weather application to get the temperature, weather condition and whether it is day or night of a particular city using `accuweather`. A free weather api.
## User Stories
- [ ] Enter the name of a city into the `input` field.
- [ ] By pressing enter, the user submits the name of the city which updates the `DOM` with the temperature, weather condition, image of day or night and weather condition icon.
## Bonus features
- [ ] By closing the browser window the city name will be stored in localStorage and when the user returns, the name will be retrieved to make an api call to update the `DOM`.
Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.
## User Stories
- [ ] User can enter a search query into an `input` field
- [ ] User can submit the query. This will call an API that will return an array of books with the corresponding data (**Title**, **Author**, **Published Date**, **Picture**, etc)
- [ ] User can see the list of books appearing on the page
## Bonus features
- [ ] For each item in the list add a link that will send the User to an external site which has more information about the book
- [ ] Implement a Responsive Design
- [ ] Add loading animations
## Useful links and resources
You can use the [Google Books API](https://developers.google.com/books/docs/overview)
- [ ] User can add multiple numbers using `add` command.
- [ ] User can add floating numbers using the `-f` flag.
- [ ] User can add only even/odd numbers using `even`/`odd` sub-command.
- [ ] User can use `--help` or `-h` flag to get all the available commands and flags.
> Note: The stories 1 and 2 are basically for static typed language, where passed arguments must be of same type.
## Bonus Features
- [ ] User can use all the basic arithmetic operations like (addition, subtraction, multiplication and divison).
- [ ] User can use `--help` or `-h` flag to get the sub-commands of command.
- [ ] **Power of** and **Square Root of** operation.
## Useful links and resources
- [5 keys to create a killer CLI in Go](https://blog.alexellis.io/5-keys-to-a-killer-go-cli/)
- [How to build a CLI tool in NodeJS ?](https://www.freecodecamp.org/news/how-to-build-a-cli-tool-in-nodejs-bc4f67d898ec/)
- [Build a Command Line Interface (CLI) Application with Node.js](https://codeburst.io/build-a-command-line-interface-cli-application-with-node-js-59becec90e28)
- [Building Beautiful Command Line Interfaces with Python](https://codeburst.io/building-beautiful-command-line-interfaces-with-python-26c7e1bb54df)
- [How to create a CLI in golang with cobra](https://schadokar.dev/posts/how-to-create-a-cli-in-golang-with-cobra/)
- [Building a Network Command Line Interface in Go](https://tutorialedge.net/golang/building-a-cli-in-go/)
Build your own customized chrome theme extension. You can also add night light (also known as blue light filter) feature that will automatically turn on during the night time so that user's eye won't get stressed while coding whole night or binge watching netflix 😛
- How chrome extension work(behind the scenes).
- Basic understanding of HTML/CSS, JS, JSON is required.
## User Stories
- [ ] User can make a theme according to their own personal color preference
- [ ] This will extremely benefit the people suffering from color blindness.
- [ ] User can install and set it as the default theme.
## Bonus features
- [ ] Deploy extension to chrome store
- [ ] Add a toggle button to control the night sight feature manually
- [ ] Create same extension for multiple browsers like firefox, etc.
A currency converter is used to convert an amount in one currency to its corresponding value in another currency using their current exchange rate, for example it can be used to calculate the value of 100 US Dollars in Euros. Current exchange rates are usually provided by banks and other financial service providers, they also (in some cases) offer free and paid APIs for developers to get current and historical exchange rates between two or more currencies.
## User Stories
- [ ] User can enter up to 9 digits to represent the amount to convert in a source input field
- [ ] User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list
- [ ] User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list
- [ ] User views the value (rounded to two decimal places) of the source amount converted to the destination currency in a single output field as soon as either the input value, the source currency, or the destination currency is changed.
- [ ] User must be alerted if the input is not a number
## Bonus features
- [ ] User should be able to swap the values of the source and destination drop-down lists on the click of a button
An app where users can create polls where voters can suggest any games available on [IGDB](https://www.igdb.com/) to play on a stream or a gaming get-together. IGDB (Internet Game Data Base) has a handy [API](https://www.igdb.com/api) for getting games and implementing some kind of AJAX search for it would be necessary.
## User Stories
- [ ] User can create polls
- [ ] User can vote on polls (add games)
- [ ] User can see the poll results as a top 10 or 5 list of the most voted games
## Bonus features
- [ ] Poll admin can restrict the voting to a certain tag or genre
- [ ] User can login and see their old polls
## Useful links and resources
- [IGDB API documentation](https://api-docs.igdb.com/)
## Example projects
- [Strawpoll, one of the most popular polling apps](https://www.strawpoll.me/)
APIs allow you to use the real world data that drives platforms like GitHub. You can communicate with the remote servers and get data that you can use to build an app.
In this project you create a search app that uses GitHub API to retrieve user information when a valid username is input. It should display avatar, username, followers count, repository count, top 4 repositories based on forks and stars.
## User Stories
- [ ] User can enter a username
- [ ] User can click on search button to retrieve information
- [ ] User can see the avatar, username, followers and repository count of searched user
- [ ] User can see the top 4 repositories of searched user
- [ ] User should get an alert if the username is not valid
## Bonus features
- [ ] User can toggle dark/light mode
- [ ] Selected mode should persist when user comes back to the app again
## Useful links and resources
To get the data you need to communicate with GitHub API. you can either
- [Read Docs](https://developer.github.com/v3/)
- [Check API directly](https://api.github.com/users/chaharshivam)
To get data from API you can check [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) in javascript
Name Generation is nothing more than a sequence of letters that follow certain patterns to create a certain probability density for choosing the next letter in a name.
This App should utilize a RNN model with LSTM/GRUs to ensure highly likeable naming patterns
## User Stories
- [ ] User can specify the first 2 to 3 letters to be used for the initial name
- [ ] Use can see the generated name and use it accordingly
## Useful links and resources
- [RNN for Pokemon names](https://towardsdatascience.com/generating-pok%C3%A9mon-names-using-rnns-f41003143333)
- [RNN for Dinosaur names](https://datascience-enthusiast.com/DL/Dinosaurus_Island_Character_level_language_model.html)
An app (desktop or web) which you can use to edit different kinds of math formulas. The app will be particularry useful for doing your math homework digitally.
The app will probably use a math markup system such as LaTeX.
## User Stories
- [ ] User can write to a text document
- [ ] User can add a math formula to that text document
- [ ] User can save the document either to a database or as a file locally
- [ ] User can load the file and all the formulas should be still intact
## Bonus features
- [ ] User can change the font size of text
- [ ] User can change other attributes of text (color, bold, etc.)
- [ ] User can add images to the document
## Useful links and resources
- [Mathquill](http://mathquill.com/)
## Example projects
- [L'math, a math editor for finnish high school students, change the language on the top left corner](https://www.lehtodigital.fi/lmath/?p=download)
- [Online demo of a simple math editor](https://math-demo.abitti.fi)
- [ ] User can start a game by entering `bb start` into the chat
- [ ] User can start a game by entering `bb start` into the chat
- [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted.
- [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted.
- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken
- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken
- [ ] User can see an congratulations message after the shot that sinks the last remaining ship.
- [ ] User can see a congratulations message after the shot that sinks the last remaining ship.
In the [GitHub Status](./GitHub-Status-App.md) and [Podcast Directory](./Podcast-Directory-App.md) you learned what web scraping is and how you can
In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can
use it as an alternative data source when API's and backend databases aren't
use it as an alternative data source when API's and backend databases aren't
available. The _My Podcast Library_ app merges your newfound knowledge of
available. The _My Podcast Library_ app merges your newfound knowledge of
web scraping with your frontend skills to extend the simple Podcast Directory
web scraping with your frontend skills to extend the simple Podcast Directory
Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.
## User Stories
- [ ] User can enter a search query into an `input` field
- [ ] User can submit the query. This will call an API that will return an array of books with the corresponding data (**Title**, **Author**, **Published Date**, **Picture**, etc)
- [ ] User can see the list of books appearing on the page
## Bonus features
- [ ] For each item in the list add a link that will send the User to an external site which has more information about the book
- [ ] Implement a Responsive Design
- [ ] Add loading animations
## Useful links and resources
You can use the [Google Books API](https://developers.google.com/books/docs/overview)
@ -24,6 +24,8 @@ Each project has the following **features**:
3. A list of bonus features that not only improve the base project, but also your skills at the same time (these are optional and should be attempted only after you have completed the required user stories)
3. A list of bonus features that not only improve the base project, but also your skills at the same time (these are optional and should be attempted only after you have completed the required user stories)
4. All the resources and links to help you find what you need to complete the project
4. All the resources and links to help you find what you need to complete the project
Here you can [watch a video about this repository](https://www.youtube.com/watch?v=TNzCfgwIDCY).
## Projects
## Projects
Projects are divided into three tiers based on the knowledge and experience
Projects are divided into three tiers based on the knowledge and experience
| [JS Input Validation](./Projects/1-Beginner/Javascript-Validation-With-Regex.md) | Script to validate inputs entered by a user using RegEx | 1-Beginner |
| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner |
As a bonus, I created the [#100Days100Projects challenge](https://www.florin-pop.com/blog/2019/09/100-days-100-projects). You can find in there 100 more ideas of smaller projects. Enjoy! 😄
## Stars history
As a bonus, there's a Weekly Coding Challenge where you can learn more by practicing your skills on real-world projects. Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how you can participate! 😄
[](https://starchart.cc/florinpop17/app-ideas)
Rohan j
5 years ago
committed by
GitHub