This is one of the coding challenges for Unit 1 - The basics of the web development bootcamp offered by Code Labs Academy. In this unit, we learn the major concepts of HTML, CSS and JavaScript while providing challenges and homeworks for an optimal hands-on learning experience.
This challenge repository contains three different challenges, Each with it's own goals. They all contain starting HTML and CSS code, and you are only required to write javascript to make each website functional.
By solving this challenge you will get more familiar with the concept of DOM manipulation using Javascript. You will also be adding event listeners to elements of the DOM in order to execute a certain function when an action is performed.
The steps to follow are :
- bg-color-changer: In this challenge, you are required to generate a new random color every time the button is clicked. Change the colors and the hex value to match the generated color.
- border-radius-range: In this challenge, you will be manipulating the border of the box using the drop-down menu and the ranges provided.
- the drop-down menu specifies the type of the border to apply.
- the first range specifies the size of the border.
- the second range specifies the border-radius of all corners in %.
- countdown-timer: In this challenge, you are required to create a countdown timer, and start the timer whenever a time button is clicked or when the user inputs a number of minutes into the custom input and hits enter.
Trying to do this project on your own will help you develop yourself in a huge way as you will learn many new concepts.
But to make this experience a bit easier on beginners just starting JavaScript and DOM manipulation, and make it less time consuming, we included a milestone with a list of issues that will walk you through the process of building this project and give you hints and pieces of code to make your life easier.
Feel free to do this project on your own, or take a glance at the provided hints.
Happy coding! 😄