Object

00000000  63 6f 6e 73 74 20 63 6f  6c 6f 72 73 20 3d 20 5b |const colors = [|
00000010  0a 20 20 7b 20 76 61 6c  75 65 3a 20 22 23 36 35 |.  { value: "#65|
00000020  34 36 65 64 22 2c 20 6e  61 6d 65 3a 20 22 50 75 |46ed", name: "Pu|
00000030  72 70 6c 65 22 20 7d 2c  0a 20 20 7b 20 76 61 6c |rple" },.  { val|
00000040  75 65 3a 20 22 23 65 39  34 66 38 37 22 2c 20 6e |ue: "#e94f87", n|
00000050  61 6d 65 3a 20 22 50 69  6e 6b 22 20 7d 2c 0a 20 |ame: "Pink" },. |
00000060  20 7b 20 76 61 6c 75 65  3a 20 22 23 31 35 39 61 | { value: "#159a|
00000070  39 63 22 2c 20 6e 61 6d  65 3a 20 22 54 65 61 6c |9c", name: "Teal|
00000080  22 20 7d 2c 0a 20 20 7b  20 76 61 6c 75 65 3a 20 |" },.  { value: |
00000090  22 23 65 38 37 35 31 61  22 2c 20 6e 61 6d 65 3a |"#e8751a", name:|
000000a0  20 22 4f 72 61 6e 67 65  22 20 7d 2c 0a 5d 3b 0a | "Orange" },.];.|
000000b0  0a 63 6f 6e 73 74 20 62  75 74 74 6f 6e 20 3d 20 |.const button = |
000000c0  64 6f 63 75 6d 65 6e 74  2e 71 75 65 72 79 53 65 |document.querySe|
000000d0  6c 65 63 74 6f 72 28 22  23 63 6f 6c 6f 72 2d 62 |lector("#color-b|
000000e0  75 74 74 6f 6e 22 29 3b  0a 63 6f 6e 73 74 20 73 |utton");.const s|
000000f0  74 61 74 75 73 20 3d 20  64 6f 63 75 6d 65 6e 74 |tatus = document|
00000100  2e 71 75 65 72 79 53 65  6c 65 63 74 6f 72 28 22 |.querySelector("|
00000110  23 63 6f 6c 6f 72 2d 73  74 61 74 75 73 22 29 3b |#color-status");|
00000120  0a 6c 65 74 20 63 6f 6c  6f 72 49 6e 64 65 78 20 |.let colorIndex |
00000130  3d 20 30 3b 0a 0a 66 75  6e 63 74 69 6f 6e 20 73 |= 0;..function s|
00000140  68 6f 77 4e 65 78 74 43  6f 6c 6f 72 28 29 20 7b |howNextColor() {|
00000150  0a 20 20 63 6f 6c 6f 72  49 6e 64 65 78 20 3d 20 |.  colorIndex = |
00000160  28 63 6f 6c 6f 72 49 6e  64 65 78 20 2b 20 31 29 |(colorIndex + 1)|
00000170  20 25 20 63 6f 6c 6f 72  73 2e 6c 65 6e 67 74 68 | % colors.length|
00000180  3b 0a 20 20 63 6f 6e 73  74 20 63 6f 6c 6f 72 20 |;.  const color |
00000190  3d 20 63 6f 6c 6f 72 73  5b 63 6f 6c 6f 72 49 6e |= colors[colorIn|
000001a0  64 65 78 5d 3b 0a 0a 20  20 64 6f 63 75 6d 65 6e |dex];..  documen|
000001b0  74 2e 62 6f 64 79 2e 73  74 79 6c 65 2e 62 61 63 |t.body.style.bac|
000001c0  6b 67 72 6f 75 6e 64 43  6f 6c 6f 72 20 3d 20 63 |kgroundColor = c|
000001d0  6f 6c 6f 72 2e 76 61 6c  75 65 3b 0a 20 20 73 74 |olor.value;.  st|
000001e0  61 74 75 73 2e 74 65 78  74 43 6f 6e 74 65 6e 74 |atus.textContent|
000001f0  20 3d 20 60 24 7b 63 6f  6c 6f 72 2e 6e 61 6d 65 | = `${color.name|
00000200  7d 20 69 73 20 74 68 65  20 63 75 72 72 65 6e 74 |} is the current|
00000210  20 63 6f 6c 6f 72 2e 60  3b 0a 20 20 62 75 74 74 | color.`;.  butt|
00000220  6f 6e 2e 73 65 74 41 74  74 72 69 62 75 74 65 28 |on.setAttribute(|
00000230  22 61 72 69 61 2d 6c 61  62 65 6c 22 2c 20 60 43 |"aria-label", `C|
00000240  68 61 6e 67 65 20 63 6f  6c 6f 72 2e 20 43 75 72 |hange color. Cur|
00000250  72 65 6e 74 20 63 6f 6c  6f 72 3a 20 24 7b 63 6f |rent color: ${co|
00000260  6c 6f 72 2e 6e 61 6d 65  7d 60 29 3b 0a 7d 0a 0a |lor.name}`);.}..|
00000270  62 75 74 74 6f 6e 2e 61  64 64 45 76 65 6e 74 4c |button.addEventL|
00000280  69 73 74 65 6e 65 72 28  22 63 6c 69 63 6b 22 2c |istener("click",|
00000290  20 73 68 6f 77 4e 65 78  74 43 6f 6c 6f 72 29 3b | showNextColor);|
000002a0  0a                                               |.|