diff --git a/Colors/Colors.gif b/Colors/Colors.gif
new file mode 100644
index 0000000..25c17b6
Binary files /dev/null and b/Colors/Colors.gif differ
diff --git a/Colors/README.md b/Colors/README.md
new file mode 100644
index 0000000..9ec01c6
--- /dev/null
+++ b/Colors/README.md
@@ -0,0 +1,5 @@
+## Colors
+
+### DEMO
+
+
diff --git a/Colors/assets/index.css b/Colors/assets/index.css
new file mode 100644
index 0000000..1c3199d
--- /dev/null
+++ b/Colors/assets/index.css
@@ -0,0 +1,24 @@
+.main-container {
+ background-color: white;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.color-event-button {
+ background-color: transparent;
+ border: 1px solid black;
+ color: black;
+ border-radius: 5px;
+ padding: 14px 12.5px;
+ font-size: 20px;
+ transition: all 0.15s;
+}
+
+.color-event-button:hover {
+ background-color: black;
+ color: white;
+ padding: 15px 12.5px;
+}
diff --git a/Colors/assets/reset.css b/Colors/assets/reset.css
new file mode 100644
index 0000000..45a05ec
--- /dev/null
+++ b/Colors/assets/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/Colors/index.html b/Colors/index.html
new file mode 100644
index 0000000..930fac3
--- /dev/null
+++ b/Colors/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/Colors/src/components/App.js b/Colors/src/components/App.js
new file mode 100644
index 0000000..69a68bf
--- /dev/null
+++ b/Colors/src/components/App.js
@@ -0,0 +1,40 @@
+import Button from "./Button.js";
+
+const COLOR_LIST = [
+ "Orangered",
+ "Blue",
+ "Yellow",
+ "Green",
+ "Orange",
+ "Cyan",
+ "DodgerBlue",
+ "Violet",
+ "Navy",
+ "Purple",
+ "YellowGreen",
+ "OrangeRed",
+ "SlateBlue",
+ "Salmon",
+ "Crimson",
+ "HotPink",
+ "Magenta",
+];
+
+export default function App({ $target }) {
+ const $main = document.createElement("div");
+ $main.className = "main-container";
+ $target.appendChild($main);
+
+ let ColorListIndex = 0;
+
+ new Button({
+ $target: $main,
+ text: "Click Me!",
+ onClick: () => {
+ if (ColorListIndex > COLOR_LIST.length - 1) {
+ ColorListIndex = 0;
+ }
+ $main.style.backgroundColor = COLOR_LIST[ColorListIndex++];
+ },
+ });
+}
diff --git a/Colors/src/components/Button.js b/Colors/src/components/Button.js
new file mode 100644
index 0000000..296f033
--- /dev/null
+++ b/Colors/src/components/Button.js
@@ -0,0 +1,9 @@
+export default function Button({ $target, text, onClick }) {
+ const $button = document.createElement("button");
+ $button.className = "color-event-button";
+ $target.appendChild($button);
+ $button.textContent = text;
+ $button.addEventListener("click", (e) => {
+ onClick();
+ });
+}
diff --git a/Colors/src/main.js b/Colors/src/main.js
new file mode 100644
index 0000000..a86ede4
--- /dev/null
+++ b/Colors/src/main.js
@@ -0,0 +1,4 @@
+import App from "./components/App.js";
+const $app = document.querySelector("#App");
+
+new App({ $target: $app });
diff --git a/Hex-Colors-Gradient/README.md b/Hex-Colors-Gradient/README.md
new file mode 100644
index 0000000..a6d734e
--- /dev/null
+++ b/Hex-Colors-Gradient/README.md
@@ -0,0 +1,5 @@
+## Colors
+
+### DEMO
+
+
diff --git a/Hex-Colors-Gradient/assets/index.css b/Hex-Colors-Gradient/assets/index.css
new file mode 100644
index 0000000..1f29909
--- /dev/null
+++ b/Hex-Colors-Gradient/assets/index.css
@@ -0,0 +1,41 @@
+.main-container {
+ background: linear-gradient(to right, #ffffff, #ffffff);
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+}
+
+.background-text {
+ font-size: 45px;
+ animation: 2s linear 1.5s infinite alternate colorChange;
+ margin: 5vh;
+}
+
+.color-event-button {
+ background-color: transparent;
+ border: 1px solid black;
+ color: black;
+ border-radius: 5px;
+ padding: 14px 12.5px;
+ font-size: 20px;
+ transition: all 0.15s;
+}
+
+.color-event-button:hover {
+ background-color: black;
+ color: white;
+ padding: 15px 12.5px;
+}
+
+@keyframes colorChange {
+ from {
+ color: #000000;
+ }
+ to {
+ color: #ffffff;
+ }
+}
diff --git a/Hex-Colors-Gradient/assets/reset.css b/Hex-Colors-Gradient/assets/reset.css
new file mode 100644
index 0000000..45a05ec
--- /dev/null
+++ b/Hex-Colors-Gradient/assets/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/Hex-Colors-Gradient/hex-colors.gif b/Hex-Colors-Gradient/hex-colors.gif
new file mode 100644
index 0000000..05932af
Binary files /dev/null and b/Hex-Colors-Gradient/hex-colors.gif differ
diff --git a/Hex-Colors-Gradient/index.html b/Hex-Colors-Gradient/index.html
new file mode 100644
index 0000000..930fac3
--- /dev/null
+++ b/Hex-Colors-Gradient/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/Hex-Colors-Gradient/src/components/App.js b/Hex-Colors-Gradient/src/components/App.js
new file mode 100644
index 0000000..a6cbcc6
--- /dev/null
+++ b/Hex-Colors-Gradient/src/components/App.js
@@ -0,0 +1,30 @@
+import Button from "./Button.js";
+import ColorText from "./ColorText.js";
+
+export default function App({ $target }) {
+ const $main = document.createElement("div");
+ $main.className = "main-container";
+ $target.appendChild($main);
+
+ this.state = {
+ firstColor: "#ffffff",
+ secondColor: "#ffffff",
+ };
+
+ const colorText = new ColorText({ $target: $main, init: this.state });
+
+ new Button({
+ $target: $main,
+ text: "Click Me",
+ onClick: () => {
+ const firstColor = randHexColorCode();
+ const secondColor = randHexColorCode();
+ const nextBackgroundColor = `background: linear-gradient(to right, ${firstColor}, ${secondColor});`;
+ colorText.setState({ firstColor, secondColor });
+ $main.style = nextBackgroundColor;
+ },
+ });
+
+ const randHexColorCode = () =>
+ `#${Math.round(Math.random() * 0xffffff).toString(16)}`;
+}
diff --git a/Hex-Colors-Gradient/src/components/Button.js b/Hex-Colors-Gradient/src/components/Button.js
new file mode 100644
index 0000000..296f033
--- /dev/null
+++ b/Hex-Colors-Gradient/src/components/Button.js
@@ -0,0 +1,9 @@
+export default function Button({ $target, text, onClick }) {
+ const $button = document.createElement("button");
+ $button.className = "color-event-button";
+ $target.appendChild($button);
+ $button.textContent = text;
+ $button.addEventListener("click", (e) => {
+ onClick();
+ });
+}
diff --git a/Hex-Colors-Gradient/src/components/ColorText.js b/Hex-Colors-Gradient/src/components/ColorText.js
new file mode 100644
index 0000000..44bee0f
--- /dev/null
+++ b/Hex-Colors-Gradient/src/components/ColorText.js
@@ -0,0 +1,19 @@
+export default function ColorText({ $target, init }) {
+ const $ColorText = document.createElement("div");
+ $ColorText.className = "background-text";
+ $target.appendChild($ColorText);
+
+ this.state = init;
+ this.setState = (nextState) => {
+ this.state = nextState;
+ this.render();
+ };
+ this.render = () => {
+ $ColorText.innerHTML = `
+ 버튼을 누르면 랜덤 그라데이션 배경이 적용됩니다.
+
+ background: linear-gradient(to right, ${this.state.firstColor}, ${this.state.secondColor});
+ `;
+ };
+ this.render();
+}
diff --git a/Hex-Colors-Gradient/src/main.js b/Hex-Colors-Gradient/src/main.js
new file mode 100644
index 0000000..a86ede4
--- /dev/null
+++ b/Hex-Colors-Gradient/src/main.js
@@ -0,0 +1,4 @@
+import App from "./components/App.js";
+const $app = document.querySelector("#App");
+
+new App({ $target: $app });