Yugal 👩‍💻🏅 Profile picture
Sep 1, 2021 27 tweets 14 min read Read on X
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 .

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Yugal 👩‍💻🏅

Yugal 👩‍💻🏅 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(