Glam Up My Markup: Camp Activities with stars (particles)
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-29 17:10:22

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
<!-- Tell us what you built and what you were looking to achieve. -->
I build a interface with three principal colors, black, white and purple. The forms is purple, the blackground is black because I like dark theme, and starts white. Next to form there stars - Small circles white that move it-

## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
github: https://github.com/olucascruz/frontendChallengeDevTo
{% codepen https://codepen.io/frenib/pen/mdgBeQw %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

Firstly, I selected a color palette consisting of purple, black, and white. While the form serves as the main element of the interface, I decided to add a new element for me: particles, commonly used in game development. With a basic knowledge of how to implement them, I began by creating a div to store the particles, assigning it the class 'particles', and then created additional divs to represent the particles themselves, with the class 'particle'. Initially, I attempted to position the particles randomly using the 'position: absolute' property and random margins, but soon realized that this did not produce the desired effect. After some research, I discovered that setting the position of the particles as 'position: relative' would allow me to move them using the 'top' and 'left' properties without the need for margins, resulting in the desired behavior.

The generation of random positions was implemented using JavaScript. Additionally, I created two CSS animations: one to simulate the glow of the particles and another for their movement. I noticed that when the particles glowed and moved simultaneously, the effect seemed strange. To correct this, I adjusted the speed of the animation for each particle individually, using JavaScript for this purpose.

Subsequently, I made the interface responsive. To achieve this, I used media queries to center the form when the screen was smaller and to send the particles behind the form. This configuration required that the div with the class 'particles' and the section containing the form had the 'position: absolute' property, allowing them to occupy the same space without issues.

Finally, in the form, I used a purple color with a gradient, and if you hover the mouse over it, there is a white shadow around it. The button also has this behavior, with the addition that it also changes color, and when clicked, the form disappears, and a message appears.


<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->


<!-- We encourage you to consider adding a license for your code. -->
LICENSE CODE: MIT

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->