This repository contains my solutions to the JavaScript 30 coding challenges by Wes Bos. Each challenge focuses on a specific JavaScript topic and helps to improve coding skills by building real projects.
JavaScript 30 is a free coding course created by Wes Bos. It consists of 30 days of hands-on coding challenges that cover a wide range of JavaScript topics and techniques. The challenges are designed to be completed within 30 days, with each day dedicated to a new project. --> Go to the Course
Below is a list of the challenges I have completed so far:
-
Javascript Drum Kit - Day 1 🥁
Description: Create a virtual drum kit that plays different sounds when corresponding keys are pressed.- Solution & Explanation --> Go to file
- Demo --> Live demo
- Solution & Explanation --> Go to file
-
Javascript Clock - Day 2 ⏰
Description: Create a dynamic clock using JavaScript that displays the current time and updates in real-time. Extract the hour, minute, and second values from the date object and manipulate CSS styles to visually represent a clock.- Solution & Explanation --> Go to file
- Demo --> Live demo
- Solution & Explanation --> Go to file
-
CSS Variable - Day 3 📊
Description: Create an interactive interface using CSS variables and JavaScript. Utilize JavaScript to capture user input from various elements such as sliders or color pickers and dynamically update CSS variable values.- Solution & Explanation --> Go to file
- Demo --> Live demo
- Solution & Explanation --> Go to file
-
JS Array Cardio - Day 4 💪
Description: Day 4 introduces functional programming in JavaScript, covering essential functions such asreduce()
,map()
,filter()
, andsort()
.- Solution & Explanation --> Go to file
- Solution & Explanation --> Go to file
-
Flex Panel Gallery - Day 5 🖼️
Description: Create an interactive gallery with expanding panels using CSS transitions and JavaScript event handling. Clicking on a panel smoothly expands or collapses it, while applying visual effects to enhance user interaction.- Solution & Explanation --> Go to file
- Demo --> Live demo
- Solution & Explanation --> Go to file
-
Ajax Type Ahead - Day 6 👀
Description: Create a basic JavaScript application that allows users to search for and filter cities and states using AJAX.- Solution & Explanation --> Go to file
- Demo --> Live demo
- Solution & Explanation --> Go to file
-
JS Array Cardio 2 - Day 7 💪
Description: On day 7, Wes Bos reintroduces useful array methods for manipulating data, namely:some()
,every()
,find()
, and the spread syntax (...
) .- Solution & Explanation --> Go to file
- Solution & Explanation --> Go to file
Twitter: @jfmartinz
LinkedIn: @jfmartinz
Github: @jfmartinz