Since I decided to learn JavaScript I also made my daily exercise about that. Next you see what I got from ChatGPT, and as always my code is below 😄⬇️
Exercise: Create a Digital Color Mixer
Imagine you're creating a basic digital color mixer. This exercise will help you understand variables, user input, and basic functions in JavaScript.
- Objective: Allow the user to input three primary colors (Red, Green, Blue) in varying intensities (0 to 255) and display the resulting color.
- Steps:
- Create three variables to store the values for Red, Green, and Blue.
- Use prompt dialogs to let the user input values for each color (make sure they are numbers between 0 and 255).
- Combine these values to create a final color (you'll later learn this is done through CSS or canvas in HTML).
- Display the resulting color to the user. For a start, you could just console.log the final color in RGB format (e.g., "rgb(255, 100, 50)").
- Challenges:
- Add validation to ensure that the user inputs numbers only within the 0-255 range.
- Try to show the resulting color in a more visual way (this might require some HTML and CSS).
My Code
On my own I was able to define the variables and console.log the result.
The function and then background color change is still from ChatGPT, but looks all very logical to me so I should be able to get a better grasp of it soon enough 😊
Will need to see if I can get used to do…while, as I never used this kind of concept in Python
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Mixer</title> </head> <body> <script> // Function to get valid color input function getColorInput(colorName) { let color; do { color = parseInt(prompt(`Enter a value for ${colorName} (0-255): `), 10); } while (isNaN(color) || color < 0 || color > 255); return color; } // Initializing color variables let red = getColorInput('Red'); let green = getColorInput('Green'); let blue = getColorInput('Blue'); // Creating the RGB color string let rgbColor = `rgb(${red}, ${green}, ${blue})`; // Displaying results in the console console.log(rgbColor); // Changing the background color of the body document.body.style.backgroundColor = rgbColor; </script> </body> </html> 
Top comments (0)