vishal-raj-1 / awesome-javascript-projects

This Repository contain awesome vanilla JavaScript projects.

Hi there, I am Vishal Rajput

You like what you see? Nominate me for GitHub Stars!

🚀 About me

I'm founder of Reboot Tech Community. Where I mentored 1000+ students regarding web development, data structure and algorithms, open source, interview preperation for free of cost. Do check out my free courses at my youtube channel.

💼 Professional Experience

Frontend Developer Intern Ukom - Improved the catalogue and developed more filters for catalogue. worked on React & Redux

Software Developer Intern Castled Data - Re-designed a interactive web portal providing an operational analytics platform for businesses for sky rocketing their sales ROI. worked on Next.JS, TypeScript, React-Bootstrap, SCSS

Frontend Developer Intern Career Leap - Developed admin panel of UpSkill India app, from where educational content is pushed to the app. Crossed 10K+ learners in community with over 100k+ Learning minutes. Worked on React.JS, Firebase, React-Bootstrap, APIs Integration.

Web Developer Intern at GirlScript - I worked on leaderboard of GirlScript Summer of Code 21. It was fully automated leaderboard built using github api. I have also work on website layout.

🧑🏻‍💻 Open Source Experience

Project Admin at GirlScript Summer of Code 21 & Cross Winter of Code - I guided 4 mentors and 300++ open source enthusiasts about the open source. I was the Project admin of Awesome JavaScript Projects. The aim of this project to guide participants how they can make lot of stuff using simple vanilla JavaScript.

Open Source Developer at NJACK Winter of Code 20 & Kharagpur Winter of Code 20 - I worked on more than 10 projects during this programs. The main project I was working on is Awesome Portfolio Website. In December 2020, I have raised more than 50 Pull Requests and solved 70++ issues. NWOC'21 was my first open source program and I ranked 1 in this program check leaderboard here.

⚙️ Tech Stack I am Familiar With:

🏆 Github Status

awesome-javascript-projects's Issues

Whack-a-mole

Describe the solution you'd like

It is a game in which moles will pop up and when we will select it our points will increase.

Extra space between about us para and projects

Describe the bug

A clear and concise description of what the bug is.

In the browser, there is extra space seen between about us and project details. Please have a look.

Add Contributing.md and Code of Conduct Files

Removing GIFs from readme files

As we know that,
A readme file lets you know about the repo as well as attracting contributors to contribute in it.
But, readme file included in your repo is loosing grip in both of the roles, because of the GIFs mentioned in it,
They create an informal image of your repo, which is not good,
In order to maintain formality of your readme file,
Let me remove the gifs and insert some catching sentences instead.
This is under crosswoc,

Valentine Special

Heart It

Many many hearts to all people who are trying to code & want to become a better version of oneself

JS developer's Valentine

Simple yet elegant creative application using JS. The project is about to create multiple hearts with different timeouts + a single heart creation on every click anywhere in the window ( Drizzle of Hearts )

Demo ( Keep an eye on cursor )

Search Bar

Deliverables:

• Add search functionality to the existing Search bar so that projects can be found easily.
• Ignore case sensitivity(means if anyone searches for counter or Counter) he/she will get the Counter project.

Replace the card images of the project section with GIFs

Replace the card images of the project section with GIFs like the animated counter project

Image Slider

Build a carousel using vanilla javascript.

Todo List: Implementation

Make a todolist from scratch

features

• Add task/remove task/ marks as done
  

• When all task is done do hurrah celebration like

Calculator: make it scientific calculator

Try to implement as many function as you can !!

Interest Calculator

Ask Initial Amount, Rate, Time and print interest amount !!

P.S : Only for First Time User !!

Music Player

Is your feature request related to a problem? Please describe.

Yes

Describe the solution you'd like

Would like to make a javascript music player game made using html, css, js

Additional context

Add any other context about the feature request here.
It wiil be having a good background animation

Website Logo

Design logos for the website!!

Show the samples here before making a PR!!

Create Code of Conduct

I would like to add code of conduct file as code of conduct is a necessary file which the contributors need to follow so that everyone follows a decorum.

Dark Theme Toggler

Describe the solution you'd like

A clear and concise description of what you want to happen.
Make dark theme for this project using Javascript.

Text Generator

Tired of boring lorem ipsum?

Ever ran out of words or tired enough of having same lorem ipsum all over the website. Yess??

Proposal

Here is a thing for you, a text generator in JS to help you generate random text paragraphs

Event

Participating as a part of GSSOC

Demo

Stopwatch

Deliverables:

• Make a decent stopwatch using Vanilla Javascript with start, stop and reset button.

There is an issue in the footer section

Describe the bug

The Date mentioned in the footer section is still showing 2020 instead of 2021.

To Reproduce

Steps to reproduce the behavior:

1. Updation required

Expected behaviour

Footer section should have the latest Year to be shown, i can do that and also afterwards there is no manual updation required for the same.

Environment (please complete the following information):

• OS: Mac
• Browser: Chrome

Bug in Project Section after recent PR

Describe the bug

A clear and concise description of what the bug is.
Spacing between project section and about section is increased. Project section has bug.

Expected behavior

A clear and concise description of what you expected to happen.

• Reduce the spacing between About and project section.
• Make all the cards as same as the cards in first row.

Screenshots

Environment (please complete the following information):

• OS: Windows 10
• Browser: Chrome

Additional context

Add any other context about the problem here.

• Please check the whole website before sending a PR(including responsiveness)

Light Switch on/off

On clicking the light of bulb will be on/off.

Edit button in "Magic notes" app

Describe the solution you'd like

There should be an edit button alongside the delete button

Animated Counter

Animated Counter in JavaScript.

An animated counter that counts up to any number using JavaScript with HTML & CSS on page load.

Useful to use in any website to show/display statistics of particular stuff. (Ex., social media followers, ranks, number of projects, etc )

New feature-- 2D breakout game

Describe the solution you'd like

We can add a 2D breakout game, which is an intermediate javascript project

2D.breakout.game.mp4

Website Favicon

Design favicons for the website and show the demo here before making a PR!!

JavaScript Clock

Build Analog and digital clock both.

Calculator : Change the UI of calculator !!

Maze game in js

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
YES

Describe the solution you'd like

A clear and concise description of what you want to happen.
Would like to add a maze game that will be having different levels and built using js, html, css

Additional context

Add any other context about the feature request here.
would like to work n this as part of crossWoc

Add Issue(For feature and bug Report) and Pull request Templates

Guess the word game in js

Add Cross WOC Banner or Poster

Is your feature request related to a problem? Please describe.

Add Cross WOC Banner or Poster

Describe the solution you'd like

Add Cross WOC to Banner or Poster

PR template is not in place

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Yes

Describe the solution you'd like

A clear and concise description of what you want to happen.
When I try to make a pr it does not show me the pr template

Additional context

Add any other context about the feature request here.

[Enhancement]: Mole-game-project

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

• Overflow in horizontal direction.
• Start button is too small and don't have any designs.

Describe the solution you'd like

A clear and concise description of what you want to happen.

• Remove the Overflow(scroll bar) in horizontal direction.
• Give styling to the start button.

Digital Clock

Digital Clock in JS

Here is what you have been asking for .. The Digital Clock with stop & start features

Approach

Use of Date & Time of JS with classlist & attribute functions

Event

Participating as a part of GSSOC

Demo

Doc: README

We can do several changes in README. Like we can add the preview of the projects, website. We can add some gifs or images to make this readme more attractive.

Footer Updation

Add github repo link to the footer using github icon.

Note App : Implementation of more features

Features :

• Add title for note app
• Add tags if required
• Add time stamp if required( will give notification )

Searching 👍🏻

• On the basis of tags
• On the basis of content (means title or notes)
• On the basis of time stamp(recent or older)

Styling 👍🏻

• You can come with your own design.

Have more idea ?

• Be creative, try to add as many features we can add to this app. Comment down your ideas

Space between Home and About Section

Deliverables:

• Remove the extra space present between Home and About section(Reduce the space).

Screenshot of the bug

Day of the Week

P.S : Only for First time User !!

Change UI of the Project Section

Remove Visit button from here and make image clickable which redirect to the project. Increase the Image size.

JavaScript drum-kit

vanilla javascript project: 'javascript drum kit'

I made this project during 30 days of vanilla javascript challenge by WES BOS.

live preview link: https://agitated-mccarthy-b9d840.netlify.app/

Click-And-Drag

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.
in this project when we drag sideways it will show more pictures and no.s like in netflix when we click and drag it shows more movies.

Additional context

Add any other context about the feature request here.
It is very useful in many places

Calculator: Allow typing on the keyboard

Either make the textfield editable, or mark it as readonly and setup keyboard listeners to react to the keypresses.

Important to keep the code short and easy to understand.

Dynamic quote generator

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Additional context

Add any other context about the feature request here.

Counter: Give style to button

netflix clone using vanilla javascript

Netflix clone using vanilla javascript:

It is not exactly like Netflix but I use the same color contrast as the original Netflix website to depict something like that.

This project also has search functionality and also I use some APIs (for images, loading movies, rating, etc) in this project which may help a beginner to start with APIs.

Creation of url shortener

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Creation of url shortener

Describe the solution you'd like

A clear and concise description of what you want to happen.
This js code will be able to make shorter the provided link

Additional context

Add any other context about the feature request here.

Integrate Welcome Bot

I can add a welcome bot config file having a proper message that will show up when any user will open up an issue or pull-request for the first time.
For reference, check out: https://github.com/apps/welcome

Please assign it to me as a part of Cross Woc.

bug in counter app

Scroll to Top Button

Is your feature request related to a problem? Please describe.

• Make a scroll to top button using html css and Javascript.

Describe the solution you'd like

• Button should be visible at every part of the page(not only at the bottom).

add sidenav

Is your feature request related to a problem? Please describe.

Yes, this feature is useful for any websites to simply access the menu

Describe the solution you'd like

I would like to add a Sidenav .made by JAVASCRIPT, HTML, CSS

Additional context

Useful to show/hide the menu in any website

Demo