30Days_JSProjectChallenge

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #machine-learning #rust #linux #macos #java #nodejs #windows #cli #awesome-list #mcp #open-source

30Days_JSProjectChallenge

(★ 23)

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

30Days_JSProjectChallenge 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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[<a href="https://twitter.com/Aakash_onLand" target="_blank">@Aakash_onLand</a>] or LinkedIn[<a href="https://www.linkedin.com/in/aakash-garg-84092b1b7/" target="_blank">@AakashGarg</a>].
5. Then write important part of code in starter file. 
6. And Last but not the least Follow me on Twitter[<a href="https://twitter.com/Aakash_onLand" target="_blank">@Aakash_onLand</a>] and LinkedIn[<a href="https://www.linkedin.com/in/aakash-garg-84092b1b7/" target="_blank">@AakashGarg</a>] 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.
<a href="https://keycode-mentor.netlify.app/">Click here</a>

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

30Days_JSProjectChallenge

30Days_JSProjectChallenge 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

30Days_JSProjectChallenge

30Days_JSProjectChallenge 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README