prgrms-web-devcourse · datalater · Sep 7, 2021 · Sep 7, 2021 · Sep 8, 2021 · Sep 14, 2021
diff --git a/02-hex-colors-gradient/.eslintrc.js b/02-hex-colors-gradient/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb-base',
+  ],
+  plugins: [
+    'html',
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  rules: {
+  },
+};
diff --git a/02-hex-colors-gradient/.gitignore b/02-hex-colors-gradient/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.vscode
diff --git a/02-hex-colors-gradient/README.md b/02-hex-colors-gradient/README.md
@@ -0,0 +1,23 @@
+# TIL
+
+## 랜덤 색상값 추출 방법 변경
+
+이전:
+
+* 10진수 rgba 사용
+* rbga의 개별 값을 모두 랜덤으로 추출
+
+```js
+const randomColorValue = () => Math.floor(Math.random() * 256);
+
+const randomColor = () => `rgba(${randomColorValue()}, ${randomColorValue()}, ${randomColorValue()}`;
+```
+
+변경:
+
+- 16진수 hex color 사용
+- 전체 값(`256**3`)에서 한번에 랜덤으로 추출
+
+```js
+const randomHexColor = () => `#${Math.floor(Math.random() * (256 ** 3)).toString(16)}`;
+```
diff --git a/02-hex-colors-gradient/index.html b/02-hex-colors-gradient/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>02 Hex Colors Gradient</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="guide-message">
+      CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR
+      COMBINATION
+    </div>
+    <div>
+      <div class="current-style"></div>
+      <button id="button">Click Me</button>
+    </div>
+    <script src="./main.js"></script>
+  </body>
+</html>
diff --git a/02-hex-colors-gradient/main.js b/02-hex-colors-gradient/main.js
@@ -0,0 +1,24 @@
+const INITIAL_BODY_BACKGROUND = 'linear-gradient(to right, #ffffff, #ffffff)';
+
+const $body = document.querySelector('body');
+$body.style.background = INITIAL_BODY_BACKGROUND;
+
+const $currentStyle = document.querySelector('.current-style');
+$currentStyle.textContent = $body.style.background;
+
+const $button = document.getElementById('button');
+
+const randomHexColor = () => `#${Math.floor(Math.random() * (256 ** 3)).toString(16).padStart(6, 0)}`;
+
+$button.addEventListener('click', () => {
+  const currentColor = `linear-gradient(to right, ${randomHexColor()}, ${randomHexColor()})`;
+  $body.style.background = currentColor;
+  $currentStyle.textContent = currentColor;
+});
+
+const $guideMessage = document.querySelector('.guide-message');
+
+setInterval(() => {
+  $guideMessage.classList.toggle('change-color');
+  $currentStyle.classList.toggle('change-color');
+}, 2000);