30Days_JSProjectChallenge

Hello guys, here I am going to share 30 Cool Projects that you can make using HTML, pure Vanilla JS and Pure CSS. Starting from 1st Nov 2021.

Steps to get best out of this Repositry

1. Read about the project that you are starting in Readme.md.
2. Download Final and Starter code from this Repositry.
3. Have a look at Final Project Code which I tried to make self explainatory by adding Comments.
4. If still having some issue with any line you can feel free to contact me on Twitter[@Aakash_onLand] or LinkedIn[@AakashGarg].
5. Then write important part of code in starter file.
6. And Last but not the least Follow me on Twitter[@Aakash_onLand] and LinkedIn[@AakashGarg] and Like and Retweet my Posts to motivate me for doing such things more.

Basic introduction to these 30 Projects :

1. Analog Clock using HTML,CSS and JS

We will create three files (HTML file, a CSS file, and JavaScript File), we also have an image of the clock that will be used in the background, and on top of that, we will make an hour, minute, and second hand (using HTML and CSS). These hands will rotate as per the system time using JavaScript. Things you will learn from this Project :

1. Transition and Transform Property in CSS.
2. new Date() inbuilt method of JS.

2. Custom HTML Video Player

We will create three files (HTML file, a CSS file, and JavaScript File), we also have a sample video for testing our progress. I included Video slider, Play/Pause button, Volume Slider, Playback Speed slider, Skip Buttons and FullScreen button functionig using JavaScript. Things you will learn from this Project :

1. Methods controling Video in Javascript
2. Playing with Input tag and controling it using JavaScript.

3. CSS Adjuster

In this project, We will make CSS Adjuster which will help us change CSS at runtime. We will create three files (HTML file, a CSS file, and JavaScript File), we also have a sample image for testing our progress. I included Size slider, Visibility slider and Border colour selecter. Things you will learn from this Project :

1. How to add CSS variable in .css file
2. Changing css variable in Javascript
3. Playing with Input tag and controling it using JavaScript.

4. Speech Recognition Typer [Diwali Special]

In this project we will make speech recognition system which will Type as we Talk to it. We will create three files (HTML file, a CSS file, and JavaScript File), we also create DIWALI twist. In which Happy Diwali image will also occur When we will say "Diwali". I made this project without any api or framework. Things you will learn from this Project :

1. Inbuilt Speach Recognition of JavaScript
2. How to perform any actions with speech.

5. Mini_TypeAhead

In this project I have made Type Ahead Prototype. Which is basically a technique which is basically used by search engines to provide real time Search Results. I said my project is a Prototype because it is not very optimised as our search engines, But it performs similar function. I created three files (HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Use of RegExp a JavaScript method.
2. Introduction to Async/Await. But next project will be having more detailed explanation of this topic.

6. Vaccination Site Finder

In this project, I have used Setu API's API to search for vaccination sites. Which you can search using PIN_CODE and DATE.I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Asych/Await for fetching content from API and Rendering it.
2. How to change Input date format of MM-DD-YYYY to DD-MM-YYYY [Trust me it was very brainstorming task].

7. Flex-Box Warmup

Today I created something new. I created a website that provides a Demo of many important CSS properties along with one challenge from Apni Kaksha's solution. I created two files (an HTML file and a CSS file). Things you will learn from this Project :

1. Flex-box in CSS

8. Key-Code Mentor

Most of us know about KeyDown or KeyPress events in JavaScript, and we use event emitted to access e.key or e.code property which gives the name of Key pressed. But the problem arises when we want to use only one Shift or Ctrl because they are present multiple times. The solution to this problem is the e.keyCode property which gives a unique code of key present on the keyboard. Now to know these unique codes I made this project. I created three files (an HTML file, a CSS file, and JavaScript File). and Also published on Netlify. Click here

Things you will get from this Project :

1. You will become aware about the keyCode property.

9 Multicolour Canvas

In this project, I have made a pretty simple canvas in which you can sketch your favorite stuff, with a twist of Multicolour Stroke. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to create a Canvas in HTML
2. Use of HSL for creating Multicolour Stroke.

10 Flex-Pannel Gallery

In this project, I made a Flex-Gallery using Flex-box property and added some transitions of CSS, and Integrated them using Javascript. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Flex Box Property of CSS
2. Transition of CSS
3. How to Integrate CSS using Javascript.

11 Click N Drag

In this project, I created Click and Drag feature of a Webpage. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to create Click and Drag feature.
2. Properties such offsetLeft, offsetRight, scrollLeft, scrollRight and many more. To create similar effects.

12 Weather Forecaster

In this project, I made Weather forecaster using Weather API. I also used try-catch method to catch errors. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Use of Async/Await to fetch API
2. Try-Catch Method to Catch errors

13 Array WarmUP

In this project cum Assignment, I have 1 short assignment to practice javascript array. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Various array method

14 Class log

In this project, I have made a class log maintainer, here data will persist despite of several reloads we make, with the help to local storage Method of Javascript. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Various methods to access local storage.
2. Json method for typeconversion.

15 Dancing shadow effect

In this project, I created Dancing shadow effect of any element of a webpage. In future it can be used on Headings. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to create Dancing shadow effect.
2. Various offset properties and Shadow styling. To create similar effects.

16 Follow Along Navigation -- 1

In this project, I created Follow Along Navigation effect of a webpage. In future it can be used on various websites. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to create Follow along Navigation Menu effect.
2. Various getBoundingClientRect property of an element. To create similar effects.

17 Array WarmUP

In this project cum Assignment, I have 1 short assignment to practice javascript array. I created three files (an HTML file, a CSS file, and JavaScript File). Its Part 2 of my Project 13. Things you will learn from this Project :

1. Various array method

18 Follow Along Navigation -- 2

In this project, I created Follow Along Navigation effect of a webpage. In future it can be used on various websites. I created three files (an HTML file, a CSS file, and JavaScript File). In Part 2 I used some CSS to make it more presentable. Things you will learn from this Project :

1. How to create Follow along Navigation Menu effect.
2. Various getBoundingClientRect property of an element. To create similar effects.

19 To Do Checklist

In this project, I have made a ToDo Checklist, here data will persist despite of several reloads we make, with the help to local storage Method of Javascript. I used Event delegation to add Event listener to object not present in the starting. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Various methods to access local storage.
2. Add Event delegation to add Event listener to object not present in the starting.

20 Password Generator

In this project,I made a random password generator. Using Math.random() function. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to generate randon elements using Math.randon().
2. How to copy content on Clipboard.

20 Password Generator

In this project,I made a random password generator. Using Math.random() function. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to generate randon elements using Math.randon().
2. How to copy content on Clipboard using javascript.

21 Playback Scrubber

In this project,I made a Video Playback Scrubber. With the help of which can change video playback speed using Arrow keys on keyboard. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. How to listen key press event and render it to give smooth sliding effect.
2. To control playback speed of video.

22 Sorting Comparator Demo

In this project,I made a sorting Comparator Demo, I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Comparator Function and how to declare and use it.
2. Spread operator to copy array.

23 Slider Effect

In this project, I created a beautiful slider effect of any element of a webpage. In future it can be used on various Webpages. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. Transform and skewed CSS Property.
2. How to change Css using JS and MouseMove event listener.

24 Speaking Site

In this project, I made a Website that reads out words, which we have written in the text area. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project :

1. SpeechSynthesisUtterance() inBuilt API of browser.

25 Countdown Timmer

In this project, I made a site used to set timmer for Custom and Predefined time. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. New Date Inbuilt API of Javascript to fetch Current time.
2. Many Mathematical tricks to work with Timmer.

26 My Contact

In this project, I made contact list and Typeahead feature. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. DOM Maniuplation
2. Searching method of Array

27 Animative Login Page

In this project, I made one Login page. I included 2 unique items in it, ie Animation while filling details and the Glowing effect after submission. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. This animation effect using CSS and JS
2. Glowing effect using CSS

28 Google Map Clone

In this project, I made this Easiest Google Map Clone. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. Google Map Using MapBox API

29 Stress Relief Balls

In this project, I made a stress relief balls. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. Concepts of OOPs
2. Canvas modifing methods.
3. Different DOM coordinate methods.

30 Face Detector WebApp

In this project, I made a Face Detector WebApp using BlazeFace API by Tenserflow. I created three files (an HTML file, a CSS file, and JavaScript File). Things you will learn from this Project:

1. Async/Await
2. How to use BlazeFace API