Thread by @Stranger2477

Are you looking for Javascript Projects and Tutorial including HTML , CSS ?

👉Here is 30 Day Vanilla JS challenge
Build 30 things 30 Days with 30 Tutorial ⬇️

Link of Github for codes 🔗github.com/YUG2477

#100DaysOfCode #javascript30 #DEVCommunity #html

Threads 🧵🧵👇

Day 1
▶️ Javascript Drum Kit 🥁
Learn 👉
how to build drumkit , dealing with Event key and keycode for keyboard and how to link sound to particular key entered.

Link🔗github.com/YUG2477/30-Day…

Final look ⬇️

Day 2
▶️ Built Clock with js and css 🕐

Learn 👉 how to move the different hands of clock with particular angles .
👉 Maths for calculating mins Degree , seconds Degree and hour Degree link them using js by setInterval.

Link🔗github.com/YUG2477/30-Day…

Final look ⬇️

Day 3
▶️ Update CSS variable with JS(Photo Edit)
Learn👉 how to change border space (Margin)
👉 How to change effect like blur , base color and spacing of photo
Link🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 4
▶️ Array Cardio
Learn👉 how to deal with Array properties and function in JS like
✍️Array.prototype.filter()
✍️ Array.prototype.map()
✍️Array.prototype.sort()
✍️ Array.prototype.reduce(). Etc

Code Link🔗
github.com/YUG2477/30-Day…

Day 5
▶️ Flex Panel Gallery
Learn✍️ how to display one by one photo of gallery if presented on one page .
✍️ Transform photo when click on it , size of photo get increased and click again then get to original position .
Code Link🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 6
▶️ Ajax Type Ahead
Learn✍️ how to fetch data from file (.json), push all data of file into array amd display it
✍️ example - Calculate no. for person name of john from file and display it .
✍️ replacing the string with another string
Code Link🔗github.com/YUG2477/30-Day…

Day 7
▶️ Array Cardio Part 2
Learn✍️ Dealing with array functions like
✍️ Array.prototype.some()
✍️Array.prototype.every()
✍️Array.prototype.find()
✍️ array.prototype.findindex()
Code Link🔗github.com/YUG2477/30-Day…

Day 8
▶️ Fun with html HTML CANVAS (Paint box)

Learn✍️How to draw something with cursor of mouse .
✍️ How to change shape of cursor and color of drawings automatically as we continues draw.
Code Link🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 9
▶️ Important Dev Tools Domination
Learn✍️ interpolated replace %s with emoji
✍️ How to showWarning in console.
✍️ How show Error in console .
✍️ Information in console .
✍️ How to grouping particular by name .
Code Link🔗github.com/YUG2477/30-Day…

Day 10
▶️ Hold shift to check multiple checkbox .

Learn
✍️ how to checked multiple checkbox by click once using shift💻 key .
Code Link🔗github.com/YUG2477/30-Day…

Final look⬇️

Day 11
▶️ Video Player
💻Learn
✍️ how to play video at click and pause it .
✍️ How to skip forward and backward of video .
✍️ How change playback rate of Video and volumes.
Code Link🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 12
▶️ Key Sequence Detection
💻Learn
✍️ If you write passage or eassy and in-between that if you found specific word like (your name ) it will show emoji on screen everytime when they found that word.

Code Link🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 13
▶️ Slide in on scroll
💻Learn
✍️ here we learn how to slide in and out an image when we scroll the page up and down with Transform properties.

Code Link 🔗github.com/YUG2477/30-Day…
Final look ⬇️

Day 14
▶️ JavaScript reference VS copying

💻Learn about Array and Objects

👉 How to change the variables value of an array with and without changing original array .
Code link 🔗github.com/YUG2477/30-Day…

Day 15
▶️ Local Storage
💻Learn
👉We will focus to add item in menu and Remain added even we reload the page.
👉 if we checked checkbox it still remain checked even after reload the page.
👉 Like menu in hotel
Code link 🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 16
▶️ Mouse move Shadow
💻Learn
👉 As we move our mouse cursors aside of word its shadow will move along with cursor of Mouse .
Code link 🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 17
▶️ Sort Without Articles
💻Learn
👉 In this tutorial we will learn about how to sort the string without article or ignoring the articles like "an" , "the", " a".
Code link 🔗github.com/YUG2477/30-Day…

Day 18
▶️ Adding Up Times with reduce
💻Learn
👉 Here we learn how to add Total time stamp of particular playlist in youtube or video playlist , display it by adding up.

Code link 🔗github.com/YUG2477/30-Day…

Day 19
▶️ webcom fun -
💻Learn
✍️ taking photo , adding effects .
Day 20
▶️ speech Detection
💻Learn
👉 What we will speak it will convert it into a words and display it .
Code link 🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 21
▶️ Geolocation
💻Learn
👉 Calculating your location with compus direction and angle linked with mobiles map
Day 22
▶️ Follow along link Highlighter
💻Learn
👉 How to highlight link attribute when hover over it .
Code link 🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 23
▶️ Speech synthesis
💻Learn
👉 What we will write , it will speak it in different language and voice
Code link 🔗github.com/YUG2477/30-Day…
Final look⬇️

Day 24
▶️ sticky navbar
💻Learn
👉 Hiw to stick navigation bar on top while scrolling page .

Day 25
✍️Learn
▶️ Event capture , propagation bubbling in - out.
Code link 🔗github.com/YUG2477/30-Day…

Day 26
Learn💻
▶️ Stripe Follow along with navigation

Day 27
▶️ click and drag function on Slide
💻Learn
👉 How to drag the slider with mouse
Code link🔗 github.com/YUG2477/30-Day…

Final look⬇️

Day 28
💻Learn
▶️ Video speed Controlling from scroll bar

Day 29
▶️ Countdown Timer
💻 Learn ✍️ how to set fix time for lunch , snack etc and what timw we will back display it
Code Link 🔗 github.com/YUG2477/30-Day…
Final look⬇️

Day 30
▶️ whack A mole (Game)
💻Learn
👉 set randow time interval and connect that time const to mole photo and add css for poping it out at randow time
Code link 🔗 github.com/YUG2477/30-Day…
Final look⬇️

Thank yo so much guys , here is end of thread if you like it then its humble request to retweet the first tweet of thread to reach out others , like and follow me for more surprising content .
Peace out .