// switch: if
// Перепишите пример ниже, используя if.

// switch (color){
//     case "red": document.write("<div style='background-color: red;'>красный</div>");
//     case "black": document.write("<div style='background-color: black; color: white;'>черный</div>");
//                 break;
//     case "blue": document.write("<div style='background-color: blue;'>синий</div>");
//     case "green": document.write("<div style='background-color: green;'>зеленый</div>");
//                 break;
//     default: document.write("<div style='background-color: gray;'>Я не понял</div>");
// }
const f2 = (rootId) => {
const task02block = document.createElement('div');
const task02title = document.createElement('h2');
task02title.innerText = 'Task-02 Switch: if';
const chooseColorBtn = document.createElement('button');
chooseColorBtn.innerText = "Choose color";
chooseColorBtn.style = 'margin-bottom:20px';

rootId.appendChild(task02block); 
task02block.appendChild(task02title); 
task02block.appendChild(chooseColorBtn); 
chooseColorBtn.onclick = () => {
    let color = prompt("Введите один цвет: red, black, blue или green", "");
     if (color === 'red' || color === 'black') {
        if (color === 'red') {
        task02block.insertAdjacentHTML("beforeend", "<div style='background-color: red;'>красный</div>")
        }
        task02block.insertAdjacentHTML("beforeend", "<div style='background-color: black; color: white;'>черный</div>")
    
    } else {
        if (color === 'blue') {
        task02block.insertAdjacentHTML("beforeend", "<div style='background-color: blue;'>синий</div>")
        }
        if (color === 'blue' || color === 'green') {
        task02block.insertAdjacentHTML("beforeend", "<div style='background-color: green;'>зеленый</div>")
             
        } else {
        task02block.insertAdjacentHTML("beforeend", "<div style='background-color: gray;'>Я не понял</div>")
        }
    }
}
}
f2(root);
export default f2;