loading...
Cover image for 30 Javascript Projects Add To Your Portfolio and Get Hired

30 Javascript Projects Add To Your Portfolio and Get Hired

hj profile image OccludeJS Updated on ・5 min read

30 Apps (2 Part Series)

1) 30 React Apps 2) 30 Javascript Projects Add To Your Portfolio and Get Hired

Building 30 Javascript apps!

It would be a really nice idea to Build 30 Apps with Vanilla Javascript and learn Javascript like a Pro.

In this series of 30 Apps, this is the second post which suggests the 30 Javascript Apps, to build and learn Javascript like a Pro and land on your Dream Internship /Job.


Mentioning

I can't add links to all 30 Apps, due to DevTo code of conduct policy, mentioning links is considered as spamming and copyright issue would take my account down.

Below is my Github👇 feel free to follow and 🌟 me.



About Me

I am an 18-year-old Developer who loves Javascript And Mern and currently learning React Js and really love System designing.



Begin

These are 30 Javascript Apps, which will build your Javascript Skills and algorithms

The best way to share these apps are by sorting them into Beginners and Advanced with proper order to let you decide your Todo

30 JS Apps:


Begginers

1. Clock With Changing Background.

At 12 PM, the background will be Sunshine styled.
🌄
And After 12 AM, the background will be Sunset/ Night Time styled.
🌃

By building this project you can learn the basics of CSS and Javascript, it would hardly take, 1-2 hours to build as a beginner.

2. Form Validator

A styled form built-in Vanilla JS, which would have input and on typing it would suggest you the requirement, like when you type the password it would show Password
must be having @ or #

🔑

Building Form Validator would let you learn the skills to have which would be required for Real-Time user interacted application.

3. Relaxer App

There would be a timer runner, it would be showing breathing animation for 8 Seconds.
👃
And for the next 4 seconds, it would show exhale.
🏭
And for the next 2 seconds, it would show hold.
💁‍♂️

This would be the best way to practice statements in Javascript.

4. Calculator

A simple but powerful calculator that would deal with basic maths operations.
🧮

This is the must build an application to deal with Basics of javascript.

5. Color Picker

A color picker is the most important tool for a developer and building your own. Isn't it a great idea?
🎨

This would help you with creating effects in Javascript.

6. A Onclick Popup Modal

Most important to build, it would help you in frontend skills.
Not a Simple Popup, a calculator embedded in the modal.
🎉

Very important to build the modal as a must-know skill.

7. Battery Charging

When your device would be plugged into the power supply, the application would show the battery status and charging icon.
🔋

Must try this to deal with the Javascript functions to work with device access.

8. Copy To Clipboard

Making a form and anything that would be typed on the form, with a button below and on-click the text would be saved to clipboard.
📋

This is the must build as the Real-time user application deals with this stuff.

9. Image Slider And Zoom

A image slider, a gallery type and it would automatically slide the images and on a pinch, with 2 fingers it would zoom.
🖼️

Must build to deal with realtime applications, like maps zoom feature.

10. Video Player

A play, pause and fast-forward option in the video player, these would be buttons with speed up to 2X.
🎥

Building a Video player will help in javascript basics and functions.

11. Eating Out Bill Splitter

Form with the amount of the bill and the number of people eating out, and it would simply show the amount each one needs to pay.
🧾

Bill Splitter would let you learn with objects in javascript.

12. Grocery List

Build a form that would input the grocery list and a buy and buyer option init.
📝
This is the best part where there would be a button to save.

13. Login Authentication

Something as simple as a website’s login authentication bar is another part of JavaScript’s domain.

This is required by every website, the basic auth.

14. OAuth

The new method to make the website/ application faster is applying jwt free auth.

This is the next step to the real productive app

15. Quiz

JavaScript is particularly handy for coding interactive lists that let users add, remove, and group items—something you can’t do with HTML and CSS alone.


Advanced

16. Tik-Tac-Toe

Building a tic tac toe game would be a good idea that would help you to learn objects and conditional handling in Javascript.
🙅

17. Flappy-Birds

Flappy-Bird is the game in which you have to deal with gravity and speed, and it will help you in object-oriented programming.
🐦

18. Fetching Data From Api

The most important feature of the realtime application is connecting with the database, by the use of API's.
🚁

19. Todo

A todo list will deal with CRUD operations, and you will a lot by dealing with crud operations.
🥡

20. Google Calendar Clone

Use the Google Calendar API to update the database and fetch the data, and it would have a add to the calendar option.
📆

21. Markdown

Markdown, Just like the DevTo editor, this will help you with conditional rendering in JS.🈚

22. CLI

A CLI similar to Ubuntu Terminal, which would be inbuilt with compiling the different languages
🧾.

23. Rock Paper Scissor

A similar game to we play physically, the option to select rock paper or scissor, and the system would display the output of rock, paper or scissor.
✂️

24. Web Speech And Timer

If you would say next, the counter would raise by 1 and back the could should decrease by 1.

25. User Profile

Use OAuth and get the data from the Google server, regarding the account used to OAuth, and create a routed page with data displayed.
👥

26. Crud Application

Create, delete , read and update using fetch in JavaScript or use Axios.
🎛️

27. Terminalizer

Terminalizer is a snappy, open-source JavaScript project used to record your terminal screen and then turn that recording into an animated gif—perfect for terminal demos and tutorials.
🔲

28. Tone.js

Tone.js is a JavaScript framework for creating interactive web browser music. This includes advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API.
🔧

29. Youtube-Clone

Use youtube Data Api V3 to get data from the YouTube server, and then using javascript fetch the data and display in a block.
📽️

30. Covid-19 Tracker

Most important app to build, in 2020 is a covid 19 tracker, which would be built by using API from who officals.
🐾



Hope you all enjoyed the project ideas

Do remember to follow me on github I share stuffs related to javascript and react there

My github : https://github.com/8bithemant

Thank you for reaching the post!

30 Apps (2 Part Series)

1) 30 React Apps 2) 30 Javascript Projects Add To Your Portfolio and Get Hired

Posted on by:

Discussion

markdown guide
 

If you really want to make a javascript program to get hired, solve a personal problem in your life. I don’t want to see something you could do from a tutorial. Identify a problem, design a solution, implement a working program, and then support it.

 

Hii Ben, you are absolutely right but,
As you begin with anything, initailly you need to build something to know basics, it isn't like you will complete a tutorial, and then solve a daily life probelm with the same amount of knowledge.

Mentioning: You are 100% Right, and respect for your advice, but I too tackled this is my life and now I too started to watch leactured to build this or that and then I try to make something good out of it❤️.

Thank you for Commenting ❤️❤️❤️❤️❤️