JavaScript Projects

This guide is intended for people looking to work on projects to get hands-on learning experience but out of ideas. 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. 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.

Projects for Beginners

• Make a Tic Tac Toe Board
• Make a web based calculator
• Make a Todo List with persisting browser storage using localStorage api
• Make a unit converter (time, distance, currency, etc)
• Random Maze Generator as an online game
• Make a web based digital clock
• Update CSS variables with JS
• Make a flying color changing butterfly with JS using the Canavas Api.
• Make a web based Drum with sounds and keyboard input using JS

Intermediate Level Projects

• Make a script which autofills common signup fields using random data
• Use Yahoo! Weather api to build a weather widget
• Integrate SoundCloud on a web page to play a song according to the user's mood
• Use StarWars-API to generate a profile of all the characters and their weapons/vehicles
• Use Unsplash-API to create an image carousel
• Use Paper.js to create amazing graphics.
• Use ParallaxJS to create full page parallax boilerplates

Advanced Level Projects

• Use NASA's Gene Lab API to build a tool to visualize and display data in an interactive manner
• Use USGS's API to visualise legacy data of Earthquakes with various filters(Magnitude, Date, Areas affected, Place of Origin)
• Use Google MAP API and World Bank's Climate Data API to build an interactive tool to visualize historical climate data by countries, regions, etc.
• Use Twitter's API alongwith a sentiment analysis library example to visualise tweets by celebrities and politicians and find trends.

Inspiration

A collection of deployed live projects with code.

• Javascript cloth simulationTearable Cloth v2
• Fireworks animation generatorFireworls in canvas
• Creating performant particles animation30k particles in canvas
• Cool random animation based on cursorDraw Worm
• Spaceship Shooter Game

Contributing

• Those who are new to open source and don't know how to send Pull Request see CONTRIBUTING.md file.