|
1 | 1 | # JavaScript Projects |
| 2 | + |
2 | 3 | This guide is intended for people looking to work on projects to get hands-on learning experience but out of ideas. |
3 | 4 | JavaScript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that it is JavaScript. |
4 | 5 | It works on web users’ computers — even when they are offline and allows you to create highly responsive interfaces that improve the user experience and provide dynamic functionality, without having to wait for the server to react and show another page. |
5 | 6 |
|
6 | 7 | ### Projects for Beginners |
7 | 8 |
|
8 | | -* Make a Tic Tac Toe Board |
9 | | -* Make a web based [calculator](https://github.com/Cybros/JavaScriptProjects/tree/master/calculator) |
10 | | -* Make a Todo List with persisting browser storage using localStorage api |
11 | | -* Make a unit converter (time, distance, currency, etc) |
12 | | -* Random Maze Generator as an online game |
13 | | -* Make a web based digital clock |
14 | | -* [Update CSS variables](https://github.com/Cybros/JavaScriptProjects/tree/master/change-css-with-js) with JS |
15 | | -* Make a [flying color changing butterfly](https://github.com/Cybros/JavaScriptProjects/tree/master/Butterfly_) with JS using the Canavas Api. |
16 | | -* Make a web based [Drum](https://github.com/Cybros/JavaScriptProjects/tree/master/drums) with sounds and keyboard input using JS |
17 | | -* Make a product carousel |
18 | | -* Make XO game. |
| 9 | +- Make a Tic Tac Toe Board |
| 10 | +- Make a web based [calculator](https://github.com/Cybros/JavaScriptProjects/tree/master/calculator) |
| 11 | +- Make a Todo List with persisting browser storage using localStorage api |
| 12 | +- Make a unit converter (time, distance, currency, etc) |
| 13 | +- Random Maze Generator as an online game |
| 14 | +- Make a web based digital clock |
| 15 | +- [Update CSS variables](https://github.com/Cybros/JavaScriptProjects/tree/master/change-css-with-js) with JS |
| 16 | +- Make a [flying color changing butterfly](https://github.com/Cybros/JavaScriptProjects/tree/master/Butterfly_) with JS using the Canavas Api. |
| 17 | +- Make a web based [Drum](https://github.com/Cybros/JavaScriptProjects/tree/master/drums) with sounds and keyboard input using JS |
| 18 | +- Make a product carousel |
| 19 | +- Make XO game. |
| 20 | +- [Create a pixel editor](https://codeclubprojects.org/en-GB/webdev/pixel-art/) |
| 21 | +- [Build a simple website using HTML, CSS and JavaScript](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/?WT.mc_id=none-twitter-buhollan) |
| 22 | +- [Create fun robot stickers](https://codeclubprojects.org/en-GB/webdev/stickers/) |
| 23 | + |
19 | 24 | ### Intermediate Level Projects |
20 | 25 |
|
21 | | -* Make a script which autofills common signup fields using random data |
22 | | -* Use Yahoo! Weather api to build a weather widget |
23 | | -* Integrate SoundCloud on a web page to play a song according to the user's mood |
24 | | -* Use [StarWars-API](https://swapi.co/) to generate a profile of all the characters and their weapons/vehicles |
25 | | -* Use [Unsplash-API](https://source.unsplash.com/) to create an image carousel |
26 | | -* Use [Paper.js](http://paperjs.org/showcase) to create amazing graphics. |
27 | | -* Use [ParallaxJS](http://matthew.wagerfield.com/parallax/) to create full page parallax boilerplates |
28 | | -* Use [Football data API](https://www.football-data.org/index) to build a web page that will allow you retrive all tables of free leagues. |
| 26 | +- Make a script which autofills common signup fields using random data |
| 27 | +- Use Yahoo! Weather api to build a weather widget |
| 28 | +- Integrate SoundCloud on a web page to play a song according to the user's mood |
| 29 | +- Use [StarWars-API](https://swapi.co/) to generate a profile of all the characters and their weapons/vehicles |
| 30 | +- Use [Unsplash-API](https://source.unsplash.com/) to create an image carousel |
| 31 | +- Use [Paper.js](http://paperjs.org/showcase) to create amazing graphics. |
| 32 | +- Use [ParallaxJS](http://matthew.wagerfield.com/parallax/) to create full page parallax boilerplates |
| 33 | +- Use [Football data API](https://www.football-data.org/index) to build a web page that will allow you retrive all tables of free leagues. |
| 34 | +- Create a [Night and day switcher](https://googlecreativelab.github.io/coder-projects/projects/night_and_day/) |
| 35 | +- Create a [Todo app](https://github.com/florinpop17/app-ideas/blob/master/Projects/To-Do-App.md) |
| 36 | +- Create a [Notes app](https://github.com/florinpop17/app-ideas/blob/master/Projects/Notes-App.md) |
29 | 37 |
|
30 | 38 | ### Advanced Level Projects |
31 | 39 |
|
32 | | -* Use [NASA's Gene Lab API](https://api.nasa.gov/api.html#genelab) to build a tool to visualize and display data in an interactive manner |
33 | | -* Use [USGS's API](https://earthquake.usgs.gov/fdsnws/event/1/) to visualise legacy data of Earthquakes with various filters(Magnitude, Date, Areas affected, Place of Origin) |
34 | | -* Use [Google MAP API](https://developers.google.com/maps/) and [World Bank's Climate Data API](https://datahelpdesk.worldbank.org/knowledgebase/articles/902061-climate-data-api) to build an interactive tool to visualize historical climate data by countries, regions, etc. |
35 | | -* Use [Twitter's API](https://developer.twitter.com/en/docs) alongwith a sentiment analysis library [example](https://www.npmjs.com/package/sentiment) to visualise tweets by celebrities and politicians and find trends. |
36 | | - |
| 40 | +- Use [NASA's Gene Lab API](https://api.nasa.gov/api.html#genelab) to build a tool to visualize and display data in an interactive manner |
| 41 | +- Use [USGS's API](https://earthquake.usgs.gov/fdsnws/event/1/) to visualise legacy data of Earthquakes with various filters(Magnitude, Date, Areas affected, Place of Origin) |
| 42 | +- Use [Google MAP API](https://developers.google.com/maps/) and [World Bank's Climate Data API](https://datahelpdesk.worldbank.org/knowledgebase/articles/902061-climate-data-api) to build an interactive tool to visualize historical climate data by countries, regions, etc. |
| 43 | +- Use [Twitter's API](https://developer.twitter.com/en/docs) alongwith a sentiment analysis library [example](https://www.npmjs.com/package/sentiment) to visualise tweets by celebrities and politicians and find trends. |
| 44 | +- [Build the game of life](https://www.freecodecamp.org/learn/coding-interview-prep/take-home-projects/build-the-game-of-life) |
| 45 | +- [Chart the stock market](https://www.freecodecamp.org/learn/coding-interview-prep/take-home-projects/chart-the-stock-market) |
| 46 | +- [Build a voting app](https://www.freecodecamp.org/learn/coding-interview-prep/take-home-projects/build-a-voting-app) |
37 | 47 |
|
38 | 48 | ### Inspiration |
39 | 49 |
|
40 | 50 | A collection of deployed live projects with code. |
41 | 51 |
|
42 | | -* Javascript cloth simulation[Tearable Cloth v2](https://codepen.io/dissimulate/pen/KrAwx) |
43 | | -* Fireworks animation generator[Fireworls in canvas](https://codepen.io/jackrugile/pen/acAgx) |
44 | | -* Creating performant particles animation[30k particles in canvas](https://codepen.io/soulwire/pen/Ffvlo) |
45 | | -* Cool random animation based on cursor[Draw Worm](https://codepen.io/tholman/pen/EpfLs) |
46 | | -* [Spaceship Shooter Game](https://codepen.io/mecarter/pen/BnpsD) |
| 52 | +- Javascript cloth simulation[Tearable Cloth v2](https://codepen.io/dissimulate/pen/KrAwx) |
| 53 | +- Fireworks animation generator[Fireworls in canvas](https://codepen.io/jackrugile/pen/acAgx) |
| 54 | +- Creating performant particles animation[30k particles in canvas](https://codepen.io/soulwire/pen/Ffvlo) |
| 55 | +- Cool random animation based on cursor[Draw Worm](https://codepen.io/tholman/pen/EpfLs) |
| 56 | +- [Spaceship Shooter Game](https://codepen.io/mecarter/pen/BnpsD) |
47 | 57 |
|
48 | 58 | ## Contributing |
49 | 59 |
|
50 | | -* Those who are new to open source and don't know how to send Pull Request see [CONTRIBUTING.md](CONTRIBUTING.md) file. |
| 60 | +- Those who are new to open source and don't know how to send Pull Request see [CONTRIBUTING.md](CONTRIBUTING.md) file. |
0 commit comments