prgrms-web-devcourse · limkhl · Sep 21, 2021 · Sep 21, 2021 · Sep 22, 2021 · Sep 22, 2021
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["google", "plugin:prettier/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "linebreak-style": ["error", "windows"],
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,180 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node,yarn
+
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,yarn
+
+### Node
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variables file
+
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+### yarn
+
+# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
+
+.yarn/\*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+
+# comment the following lines
+
+!.yarn/cache
+
+# and uncomment the following lines
+
+# .pnp.\*
+
+# End of https://www.toptal.com/developers/gitignore/api/node,yarn
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "endOfLine": "lf"
+}
diff --git a/README.md b/README.md
@@ -1,14 +1,22 @@
 # 25 Beginner JavaScript Project Ideas
+
 ## 규칙
+
 - 브랜치명은 JSmini_lia 형식으로 만들어 주세요.
 - 매주 주어진 양의 project를 완성 후 project 단위로 PR해 주세요!
-    - [Project1/리아] 프로젝트명
-    - 예) [Project1/리아] Colors
+  - [Project1/리아] 프로젝트명
+  - 예) [Project1/리아] Colors
 
 ## 1회차(~9/12)
+
 ### Project 1 Colors
+
 ![image](https://user-images.githubusercontent.com/64760270/132218819-23e9edb1-9596-4a31-9618-5e7e6adeecb0.png)
+
 ### Project 2 Hex colors gradient
+
 ![image](https://user-images.githubusercontent.com/64760270/132218843-b12f04ef-8259-43da-8a82-4ae9d48446cb.png)
+
 ### Project 3 Random quote generator
+
 ![image](https://user-images.githubusercontent.com/64760270/132218869-39280963-64e9-4ac6-a074-c8cb4b984927.png)
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <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>JS Mini Project 25</title>
+    <link rel="shortcut icon" href="/src/assets/favicon.ico" type="image/x-icon" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" />
+    <link rel="stylesheet" href="/src/styles/style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "start": "node main.js",
+    "lint": "eslint *.js",
+    "lint:fix": "eslint --fix *.js"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "prettier": "^2.3.2"
+  }
+}
diff --git a/project1-colors/src/Button.js b/project1-colors/src/Button.js
@@ -1,14 +1,12 @@
 export default function Button({ $target, onClick }) {
-  const $button = document.createElement("button");
+  const $button = document.createElement('button');
   $target.append($button);
-  $button.textContent = "Click Me!";
+  $button.textContent = 'Click Me!';
 
-  $button.addEventListener("click", (e) => {
+  $button.addEventListener('click', () => {
     const generateRandomColorCode = () => {
       const randomHex = Math.floor(Math.random() * 16777215).toString(16);
-      return randomHex.length < 6
-        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
-        : randomHex;
+      return randomHex.length < 6 ? `${'0'.repeat(6 - randomHex.length)}${randomHex}` : randomHex;
     };
     onClick(generateRandomColorCode());
   });

diff --git a/project1-colors/src/Project1Page.js b/project1-colors/src/Project1Page.js
@@ -0,0 +1,18 @@
+import Button from './Button.js';
+
+export default function Project1Page({ $target }) {
+  const $page = document.createElement('div');
+
+  $page.className = 'project1 page';
+
+  new Button({
+    $target: $page,
+    onClick: (colorCode) => {
+      $page.style.backgroundColor = `#${colorCode}`;
+    },
+  });
+
+  this.render = () => {
+    $target.append($page);
+  };
+}
diff --git a/project1-colors/src/main.js b/project1-colors/src/main.js
@@ -1,6 +1,6 @@
-import Button from "./Button.js";
+import Button from './Button.js';
 
-const $app = document.querySelector("#app");
+const $app = document.querySelector('#app');
 
 new Button({
   $target: $app,

diff --git a/project2-HexColorsGradient/src/Button.js b/project2-HexColorsGradient/src/Button.js
@@ -1,24 +1,18 @@
 export default function Button({ $target, onClick }) {
-  const $button = document.createElement("button");
+  const $button = document.createElement('button');
   $target.append($button);
-  $button.textContent = "Click Me!";
+  $button.textContent = 'Click Me!';
 
-  $button.addEventListener("click", (e) => {
+  $button.addEventListener('click', (e) => {
     const generateRandomDirection = () => {
       return Math.floor(Math.random() * 2) === 0 ? `right` : `left`;
     };
 
     const generateRandomColorCode = () => {
       const randomHex = Math.floor(Math.random() * 16777215).toString(16);
-      return randomHex.length < 6
-        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
-        : randomHex;
+      return randomHex.length < 6 ? `${'0'.repeat(6 - randomHex.length)}${randomHex}` : randomHex;
     };
 
-    onClick(
-      generateRandomDirection(),
-      generateRandomColorCode(),
-      generateRandomColorCode()
-    );
+    onClick(generateRandomDirection(), generateRandomColorCode(), generateRandomColorCode());
   });
 }
diff --git a/project2-HexColorsGradient/src/Project2Page.js b/project2-HexColorsGradient/src/Project2Page.js
@@ -0,0 +1,26 @@
+import Button from './Button.js';
+import Sign from './Sign.js';
+
+export default function Project2Page({ $target }) {
+  const $page = document.createElement('div');
+
+  $page.className = 'project2 page';
+
+  const signBoard = new Sign({ $target: $page });
+
+  new Button({
+    $target: $page,
+    onClick: (direction, startColor, endColor) => {
+      $page.style.background = `linear-gradient(to ${direction}, #${startColor}, #${endColor})`;
+      signBoard.setState({
+        ...signBoard.state,
+        direction,
+        colorCode: { start: startColor, end: endColor },
+      });
+    },
+  });
+
+  this.render = () => {
+    $target.append($page);
+  };
+}
diff --git a/project2-HexColorsGradient/src/Sign.js b/project2-HexColorsGradient/src/Sign.js
@@ -1,12 +1,12 @@
 export default function Sign({ $target }) {
-  const $signContainer = document.createElement("div");
+  const $signContainer = document.createElement('div');
   $target.append($signContainer);
 
   this.state = {
-    direction: "right",
+    direction: 'right',
     colorCode: {
-      start: "ffffff",
-      end: "ffffff",
+      start: 'ffffff',
+      end: 'ffffff',
     },
   };