"30 Days of JavaScript: HTML, CSS, and JavaScript Mastery Challenge"

HTML, CSS and JavaScript projects from basic to advance level

This web app calculates BMI using height and weight inputs. It displays the BMI value and weight condition. Built using HTML, CSS, and JavaScript, it's a useful tool for quickly determining BMI and weight condition.

I created a sidebar menu using HTML, CSS, and JS. JS adds event listeners to show/hide the sidebar. It's a simple project demonstrating basic web development skills.

A dark-mode toggle effect created using HTML, CSS & JS. Also when we switch on and off, these modes are saved inside the local storage of the browser.

This project is a webpage that displays the X and Y position of the user's mouse cursor in real-time. The JavaScript code updates the values in the boxes as the user moves their mouse. This project demonstrates dynamic HTML updates with user interaction.

A simple web application that generates random multiplication problems and asks the user to solve them. The app keeps track of the user's score and updates it based on their answers. It also uses local storage to persist the score across multiple sessions.

This project creates a social media selector menu using HTML, CSS, and JavaScript. Clicking the button shows a list of social media platforms and selecting one updates the button text.

The code creates an animated search bar using HTML, CSS, and JavaScript, with a stylish design that includes a shadow effect, magnifier and microphone icons, and a transparent input field.

The webpage contains a container with a background image and a button that, when clicked, displays a popup window with a blurred background.

A simple web animation that uses the mouse movement of the user to generate heart icons that float around the screen.

Created a button with a ripple effect using HTML, CSS, and JavaScript. This adds interactivity to the webpage and uses CSS ::before pseudo-elements and transform to create the ripple circle, while JavaScript calculates the position of the user's mouse and updates the CSS custom properties used for the ripple animation.

I've created a mini calendar with a simple and minimalist design using HTML, CSS, and JavaScript. This calendar displays the current date, which is dynamically updated using JavaScript's Date object.

A really cool feature that allows me to showcase a set of images on my website in a continuous loop, rotating them one by one.

In this project, I created a stylish analog clock with the Rolex logo using HTML, CSS, and JavaScript. It dynamically retrieves the time from the user's browser to accurately represent the current time. This allowed me to practice my front-end skills while learning about working with the DOM, handling user events, and creating animations.

The project is a New Year's countdown created using HTML, CSS, and JavaScript. It features a dynamic countdown that updates every second, displaying the exact amount of time left until the new year. The project offers a fun and interactive experience for users.

This digital clock was built using HTML, CSS, and JavaScript, with no external libraries or frameworks. The clock displays the current time with hours, minutes, and seconds, and updates in real-time. The design is sleek and minimalistic, making it easy to read and use.

Animações diárias em CSS utilizando pré-processador SASS, criadas durante um desafio de 30 dias. O projeto explora propriedades e tópicos como responsividade, variáveis, nesting, partials, módulos e mixins, com foco no aprendizado e compartilhamento diário no LinkedIn.

📊 Repositório dedicado a 30 dias de CSS