-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
66 lines (66 loc) · 2.11 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Change The Colors!
const colors = [
{
name: "red",
motto: "Rose Red",
},
{
name: "blue",
motto: "Ocean Blue",
},
{
name: "gray",
motto: "Smoke Gray",
},
{
name: "green",
motto: "Grass Green",
},
{
name: "purple",
motto: "Deep Purple",
},
];
const randomColorButton = document.querySelector("#randomColorButton");
const addColorButton = document.querySelector("#setColorButton");
addColorButton.addEventListener("click", addColor);
randomColorButton.addEventListener("click", changeColors);
// randomColorButton.addEventListener("click", () => changeColors());
// randomColorButton.addEventListener("click", function () {
// changeColors();
// });
// 1) Arrayden rastgele element seçmek
function changeColors() {
const randomIndex = Math.floor(Math.random() * colors.length);
document.querySelector("#colorName").textContent = colors[randomIndex].name;
document.querySelector("#colorDesc").textContent = colors[randomIndex].motto;
document.querySelector("body").style.backgroundColor =
colors[randomIndex].name;
}
// 2) Kullanıcının girdiği string'i renk listesine eklemek ve arkaplanı o renk ile güncellemek
function addColor() {
const userInput = document.querySelector(".colorInput");
const colorData = userInput.value.split(":");
const colorObject = {
name: colorData[0],
motto: colorData[1],
};
// indexOf SADECE flat array (["red", "blue"] / [1, 2, 3]) geçerlidir.
// findIndex object arraylerde geçerlidir.
const searchedColorIndex = colors.findIndex(
(myColor) => myColor.name === colorObject.name
);
if (searchedColorIndex === -1) {
document.querySelector("body").style.backgroundColor = colorObject.name;
document.querySelector("#colorName").textContent = colorObject.name;
document.querySelector("#colorDesc").textContent = colorObject.motto;
colors.push(colorObject);
userInput.value = "";
userInput.focus();
} else {
alert("Renk zaten mevcut!");
}
}
// Kullanıcı boş bir değer girerse?
// Kullanıcı geçersiz bir değer girerse?
// Bir input daha ekleyin: kullanıcıdan hex'a değer #ECEFF1?