Giter VIP home page Giter VIP logo

awesome-javascript-projects's Introduction

Awesome JavaScript Projects

Update:

I have launch free mentorship for frontend developer. If you want to learn frontend development, build real world projects, and get jobs in frontend development. So should definetly check out this free mentorship program.

Frontend Developer Mentorship

More Details About Mentorship

Are you a Newbie in Web development and want to dive deep into Javascript? Do checkout this video to learn JS Basics first

JavaScript Tutorial For Beginners

Are you looking for some awesome Javascript Projects in which each and every project will teach you an important Javascript Concept? Let's Learn JS DOM Now

JavaScript Tutorial For Beginners

Do you want to contribute to some Awesome Javascript projects and showcase your Javascript skills through it?🤩

Then, You got here right!!

Awesome Javscript Projects Website contain many awesome Vanilla Javascript Projects in which each and every project will teach you some new and important javscript concepts. It includes concepts like Functional Components, Class Components, Math Objects, Arrow functions, APIs and many more.

The Main Motive of this project is to make you fall❌ rise ✅ in love with Javascript. You will be in love with the beauty of Javascript.

What we have for you here?

So, What are you waiting for?

Resources:

  1. Frontend Development Essential Course
  2. HTML Crash Course - From Beginner to Pro in 40 minutes
  3. CSS Crash Course: Learn CSS in 60 minutes
  4. Learn Flexbox in 25 minutes - The Complete Crash Course
  5. Learn CSS Grid in 35 minutes: The Ultimate Crash Course for Beginners
  6. Learn Git and GitHub basics for Open Source Contribution
  7. JavaScript Tutorial for Beginners
  8. JavaScript DOM Manipulation - Full Course for Beginners
  9. Build a Google Keep Clone with JavaScript
  10. Learn JavaScript by Building a Whack A Mole Game
  11. Master JavaScript Promises, Fetch API, and Async/Await

Tech-Stack :

HTML5 CSS3 JavaScript

Contribution is fun! 💚

In order to make a hassle-free environment, I implore you all (while contributing) to follow the instructions mentioned below!

Happy Submissions 🙂

Contribution Guidelines🏗

Are we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and make it better. To start contributing, follow the below guidelines:

1. Fork this repository.

2. Clone your forked copy of the project.

git clone https://github.com/<your_user_name>/awesome-javascript-projects.git

3. Navigate to the project directory 📁 .

cd awesome-javascript-projects

4. Add a reference(remote) to the original repository.

git remote add upstream https://github.com/vishal-raj-1/awesome-javascript-projects.git 

5. Check the remotes for this repository.

git remote -v

6. Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).

git pull upstream main

7. Create a new branch.

git checkout -b <your_branch_name>

8. Perfom your desired changes to the code base.

9. Track your changes:heavy_check_mark: .

git add . 

10. Commit your changes .

git commit -m "Relevant message"

11. Push the committed changes in your feature branch to your remote repo.

git push -u origin <your_branch_name>

12. To create a pull request, click on compare and pull requests.

13. Add appropriate title and description to your pull request explaining your changes and efforts done.

14. Click on Create Pull Request.

15 Voila ❗ You have made a PR to the awesome-javascript-projects 💥 . Wait for your submission to be accepted and your PR to be merged.

This Project is a part of the following Open Source Program

CrossWoc    GSSOC

Project Admin 😃

Our valuable Contributors👩‍💻👨‍💻 :

awesome-javascript-projects's People

Contributors

991rajat avatar amit366 avatar ankita297 avatar anshikaagrawal5501 avatar anushree71199 avatar atif0604 avatar ayush7614 avatar ayushjain2205 avatar bhavya-sehgal avatar deeksha-rawat avatar girija0707 avatar iamabhii1 avatar jhamadhav avatar joshi-kaushal avatar k-jais avatar mahesh-11102 avatar neha07kumari avatar ridsuteri avatar rizwan-s avatar shivammahajancse avatar siddhi-244 avatar sidmohanty11 avatar silvergraph avatar soma2000-lang avatar sulagna-dutta-roy avatar tidbitsjs avatar vanshikachokhani avatar vedant115 avatar vishal-raj-1 avatar webvishal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

awesome-javascript-projects's Issues

Website Favicon

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

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
Sidenav

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.

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.

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.

Interest Calculator

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

P.S : Only for First Time User !!

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

Website Logo

Design logos for the website!!

Show the samples here before making a PR!!

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.

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 )

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.

Stopwatch

Deliverables:

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

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.

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

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

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.

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).

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

demo

[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.

Todo List: Implementation

Make a todolist from scratch

features

  • Add task/remove task/ marks as done
    todolist

  • When all task is done do hurrah celebration like

star

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.

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 )

demo

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.

netflix clone using vanilla javascript

Netflix clone using vanilla javascript:

netflix

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.

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

Capture1
Capture2

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)

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

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,

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

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.

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

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

demo

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.