JavaScript30 Challenge

Portfolio

Check out my portfolio for all projects and information: My Portfolio

Overview

JavaScript30 is a collection of 30 coding challenges designed to improve your understanding and skills in vanilla JavaScript. These challenges cover a variety of topics, from DOM manipulation to asynchronous JavaScript.

Day 1: Drum Kit

• Project: Drum Kit
• Description: Created a drum kit that plays sounds when keys are pressed.
• Demo: Live Demo

Day 2: CSS + JS Clock

• Project: CSS + JS Clock
• Description: Created a analog clock.
• Demo: Live Demo

Day 3: Playing with CSS and JS

• Project: Playing with CSS and JS
• Description: Created a mini project using CSS Variable.
• Demo: Live Demo

Day 4: Cardio with Array - Part 1

• Project: Cardio with Array - Part 1
• Description: Played with some methods like filter, reduce, map and sort on array.

Day 5: Image Gallery using Flex Panel

• Project: Image Gallery using Flex Panel
• Description: Created a Image Gallery using Flex.
• • Demo: Live Demo

Day 6: Type Ahead

• Project: Type Ahead
• Description: Created a search panel for cities and states.
• Demo: Live Demo

Day 7: Cardio with Array - Part 1

• Project: Cardio with Array - Part 2
• Description: Played with some methods like some(), every(), find(), findIndex() on array.

Day 8: Fun with HTML5 Canvas

• Project: Fun with HTML5 Canvas
• Description: Created a canvas to write on!
• Demo: Live Demo

Day 9: Dev Tools Domination

• Project: Dev Tools Domination
• Description: Learnt about some fun dev tools tricks.
• Demo: Live Demo

Day 10: Hold Shift to Check Multiple Checkboxes

• Project: Hold Shift to Check Multiple Checkboxes
• Description: created a small list where multiple checkboxes are check holding a shift key.
• Demo: Live Demo

Day 11: Custom Video Player

• Project: Custom Video Player
• Description: Created a custom video player with all the video player features.
• Demo: Live Demo

Day 12: Key Sequence Detection

• Project: Key Sequence Detection
• Description: Detection a key sequence and adding a cornify image on the page.
• Demo: Live Demo

Day 13: Slide in on Scroll

• Project: Slide in on Scroll
• Description: Image slides on the screen when we scroll half way through the image.
• Demo: Live Demo

Day 14: Objects & Arrays - Reference VS Copy

• Project: Objects & Arrays - Referenc
• Description: Learnt about Objects and Arrays - Reference VS Copy.

Day 15: LocalStorage

• Project: LocalStorage
• Description: Created a feature of adding items to the list which can be checked or unchecked. Data is stored in LocalStorage.
• Demo: Live Demo

Day 16: Text Shadow Effect

• Project: Text Shadow Effect
• Description: Mouse Move Text shadow effect.
• Demo: Live Demo

Acknowledgments

• Wes Bos for creating the JavaScript30 course.

Connect with Me

Feel free to reach out if you have any questions or just want to connect!

• LinkedIn
• Portfolio

Happy coding! 🚀