I recently completed a JavaScript project where I created a web page with a container that held 30 small color containers, each with a randomly generated hex code. I used JavaScript to create the color containers and loop through them to generate the hex codes and assign them to the containers. I also used JavaScript to style each container to have a background color matching its respective hex code. It was a fun and educational project that helped me develop my JavaScript skills, and I learned about new concepts like createElement() and querySelectorAll().
You can try out the application by visiting this link.
- HTML
- CSS
- JavaScript
To get started with this project, clone the repository and open the index.html file in your preferred web browser.
During this JavaScript project, I had the opportunity to learn some new concepts that are highly useful when working with HTML elements. Specifically, I learned how to use createElement() to dynamically create new HTML elements like **div**s and **p**s and appendChild() to add them to an existing parent element.
Moreover, I was able to utilize querySelectorAll() to select multiple elements with a specified class name and then loop through them using forEach(), performing an action on each element. This allowed me to efficiently update the content and layout of the web page.
Overall, these concepts are highly valuable for creating dynamic and engaging web pages, and I am excited to continue expanding my knowledge of JavaScript and web development.
One of the challenges I faced during this project was creating 30 divs dynamically using JavaScript without assigning them unique class or ID. It was difficult to target specific divs when assigning hex codes or making other changes to the page. I had to find other ways to select the divs, like using querySelectorAll() to uniquely identify each div. It required some experimentation and creative problem-solving, but I was eventually able to find a solution that worked for the project's needs.
