❗ Ongoing.
This repository contains mini projects developed as part of the JavaScript30 course. JavaScript30 is a 30-day challenge to build 30 different projects using vanilla JavaScript.
- Project 1: Keyboard Music
- Project 2: Clock
- Project 3: Playing with CSS Variables and JS
- Project 4: JavaScript Arrays
- Project 5: Flex Panels Image Gallery
This project plays the music of different nature themes when clicked on the respective keyboard keys.
- 💻 Interactive and user-friendly interface
- ⌨️ Music played after clicking the keys on the keyboard
- ⏱️ Real-time updates
- 🚶 Animation added
- 🎵 Can play different music according to the key pressed
This is a simple analog clock program that displays the time with a transparent clock.
- 🕙 Displays real time
- ⌨️ Code for analog clock
- 🎨 Transparent css added
- 🚶 Transitions for clock movement added
This program demonstrates how to create and manipulate CSS variables using JavaScript. It features interactive controls for adjusting the spacing, blur, and base color of an image, showcasing the dynamic capabilities of CSS variables.
- ⏩ Spacing Control: Adjust the padding around the image
- ⭕ Blur Control: Apply a blur filter to the image
- 🎨 Base Color Control: Change the background color behind the image
🔗 Playing with CSS variables and JS Project
It includes some array methods that help us to simplify tasks by providing concise and expressive ways to manipulate and transform array data, reducing the need for complex loops and manual iteration.
- 🔍 Includes filter()
- ➡️ Includes map()
- 🔃 Includes sort()
- ➖ Includes reduce()
This program creates a responsive layout with four panels, each displaying a different background image. The panels use a flexbox layout and animate transitions when their state changes. When a panel is activated, it expands, increases its font size, and reveals hidden content with smooth animations.
- 🖼️ Responsive panels with background images and centered text.
- 💫 Smooth transitions and animations for expanding and revealing content.
- 📐 Inner shadow effect and flexible layout using flexbox.
This repository is licensed under the MIT License. See the LICENSE file for more information.
You can clone this repository using the following command:
git clone https://github.com/5Rashmi/JavascriptMiniPrograms.git