vanilla-js-study · jinn2u · Jan 30, 2022 · Jan 30, 2022 · Feb 2, 2022 · Feb 2, 2022
diff --git a/jinn2u/Color/src/components/Button.js b/jinn2u/Color/src/components/Button.js
@@ -28,7 +28,11 @@ function Button({ $target, text, onBtnClick }) {
     }
     return true;
   };
-  $button.addEventListener('click', this.onBtnClick);
+  $button.addEventListener('click', () => {
+    const randomHexColor = () => `#${Math.round(Math.random()*0xFFFFFF).toString(16)}`
+    this.onBtnClick(randomHexColor(), randomHexColor())
+
+  });
   this.render();
 }
 export default Button;
diff --git a/jinn2u/HexColorsGradient/.eslintrc b/jinn2u/HexColorsGradient/.eslintrc
@@ -0,0 +1,21 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "airbnb-base"
+    ],
+
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+      "import/extensions": 0,
+      "import/no-unresolved": 0,
+      "import/prefer-default-export": 0,
+      "no-underscore-dangle": 0,
+      "implicit-arrow-linebreak": 0
+    }
+}
diff --git a/jinn2u/HexColorsGradient/.prettierrc b/jinn2u/HexColorsGradient/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "endOfLine": "auto"
+}
diff --git a/jinn2u/HexColorsGradient/package.json b/jinn2u/HexColorsGradient/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "HexColorsGradient",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "parcel public/index.html"
+  },
+  "devDependencies": {
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.4",
+    "parcel-bundler": "^1.12.5",
+    "prettier": "^2.5.1",
+    "sass": "^1.49.0"
+  },
+  "dependencies": {}
+}
diff --git a/jinn2u/HexColorsGradient/public/index.html b/jinn2u/HexColorsGradient/public/index.html
@@ -0,0 +1,17 @@
+<!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>Document</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="../src/index.js"></script>
+
+</body>
+
+</html>
diff --git a/jinn2u/HexColorsGradient/src/components/App.js b/jinn2u/HexColorsGradient/src/components/App.js
@@ -0,0 +1,51 @@
+import { isCalledWithNew } from '../utils';
+import Button from './Button';
+import Heading from './Heading';
+import '../styles/index.scss';
+import ColorSpan from './ColorSpan';
+
+function App({ $target }) {
+  isCalledWithNew(new.target);
+
+  this.$target = $target;
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  (() =>
+    new Heading({
+      $target,
+      text: 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION',
+    }))();
+  (() =>
+    new Heading({
+      $target,
+      text: 'background: linear-gradient(to right, <span id="hexcode1"></span>, <span id="hexcode2"></span>);',
+    }))();
+  const $colorSpan1 = new ColorSpan({
+    $target: document.querySelector('#hexcode1'),
+    initialState: '#ffffff',
+  });
+  const $colorSpan2 = new ColorSpan({
+    $target: document.querySelector('#hexcode2'),
+    initialState: '#ffffff',
+  });
+  (() =>
+    new Button({
+      $target,
+      text: 'Click Me',
+      handleBtnClick: (color1, color2) => {
+        this.setState({ ...this.state, colors: [color1, color2] });
+        $colorSpan1.setState({ ...$colorSpan1.state, color: color1 });
+        $colorSpan2.setState({ ...$colorSpan2.state, color: color2 });
+      },
+    }))();
+
+  this.render = () => {
+    document.body.style.background = `linear-gradient(to right, ${this.state.colors[0]}, ${this.state.colors[1]})`;
+  };
+  this.render();
+}
+export default App;
diff --git a/jinn2u/HexColorsGradient/src/components/Button.js b/jinn2u/HexColorsGradient/src/components/Button.js
@@ -0,0 +1,20 @@
+import { isCalledWithNew } from '../utils';
+
+function Button({ $target, text, handleBtnClick }) {
+  isCalledWithNew(new.target);
+  this.$target = $target;
+  this.handleBtnClick = handleBtnClick;
+
+  this.$button = document.createElement('button');
+  this.$target.appendChild(this.$button);
+
+  this.render = () => {
+    this.$button.textContent = text;
+    this.$button.addEventListener('click', () => {
+      const randomHexColor = () => `#${Math.round(Math.random() * 0xffffff).toString(16)}`;
+      this.handleBtnClick(randomHexColor(), randomHexColor());
+    });
+  };
+  this.render();
+}
+export default Button;
diff --git a/jinn2u/HexColorsGradient/src/components/ColorSpan.js b/jinn2u/HexColorsGradient/src/components/ColorSpan.js
@@ -0,0 +1,21 @@
+import { isCalledWithNew } from '../utils';
+
+function ColorSpan({ $target, initialState }) {
+  isCalledWithNew($target);
+
+  this.$target = $target;
+  this.state = {
+    color: initialState,
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+  this.render = () => {
+    this.$target.innerHTML = this.state.color;
+  };
+
+  this.render();
+}
+export default ColorSpan;
diff --git a/jinn2u/HexColorsGradient/src/components/Heading.js b/jinn2u/HexColorsGradient/src/components/Heading.js
@@ -0,0 +1,21 @@
+import { isCalledWithNew } from '../utils';
+
+function Heading({ $target, text }) {
+  isCalledWithNew(new.target);
+
+  this.$target = $target;
+
+  this.$heading = document.createElement('h1');
+  this.$target.appendChild(this.$heading);
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    this.$heading.innerHTML = text;
+  };
+  this.render();
+}
+export default Heading;
diff --git a/jinn2u/HexColorsGradient/src/constants.js b/jinn2u/HexColorsGradient/src/constants.js
@@ -0,0 +1 @@
+export const NO_CONSTRUCTOR = '생성자 함수를 통해 호출해 주세요!';
diff --git a/jinn2u/HexColorsGradient/src/index.js b/jinn2u/HexColorsGradient/src/index.js
@@ -0,0 +1,9 @@
+import App from './components/App.js';
+
+const NO_ENTER_POINT = '진입점이 존재하지 않습니다!';
+const $app = document.querySelector('#app');
+
+if (!$app) {
+  throw Error(NO_ENTER_POINT);
+}
+(() => new App({ $target: $app }))();
diff --git a/jinn2u/HexColorsGradient/src/styles/index.scss b/jinn2u/HexColorsGradient/src/styles/index.scss
@@ -0,0 +1,51 @@
+body {
+  margin: 0;
+}
+#app {
+  margin: 0 auto;
+  width: 95%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1140px;
+  padding: 0 15px;
+  h1 {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    &:last-of-type {
+      margin-top: 15%; 
+    }
+    animation-name: colorChange;
+    animation-duration: 5s;
+    animation-timing-function: ease;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    @keyframes colorChange {
+      0% {
+        color: black;
+      }
+      100% {
+        color: white;
+      }      
+    }
+  }
+  button {
+    cursor: pointer;
+    background-color: #e2e6ea;
+    border: none;padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    &:hover {
+      background-color: #6b6c6d;
+    }
+  }
+}
+
+
+
+
diff --git a/jinn2u/HexColorsGradient/src/utils.js b/jinn2u/HexColorsGradient/src/utils.js
@@ -0,0 +1,7 @@
+import { NO_CONSTRUCTOR } from './constants';
+
+export const isCalledWithNew = (constructor) => {
+  if (!constructor) {
+    throw Error(NO_CONSTRUCTOR);
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const NO_CONSTRUCTOR = '생성자 함수를 통해 호출해 주세요!';