From ce62c55f9f403732a31cd1bc4072ed02a4792c07 Mon Sep 17 00:00:00 2001 From: eastjun Date: Wed, 1 Jan 2020 00:53:35 +0900 Subject: [PATCH 1/8] feat(form): create form to input user info --- mission003/eastjun/css/index.css | 38 +++++++++++++++++ mission003/eastjun/index.html | 71 ++++++++++++++++++++++++++++++++ package.json | 32 ++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 mission003/eastjun/css/index.css create mode 100644 mission003/eastjun/index.html create mode 100644 package.json diff --git a/mission003/eastjun/css/index.css b/mission003/eastjun/css/index.css new file mode 100644 index 0000000..79e63c8 --- /dev/null +++ b/mission003/eastjun/css/index.css @@ -0,0 +1,38 @@ +.signup-card { + max-width: 400px; + margin: 100px auto; +} + +.signup-card h2{ + margin-top: 32px; +} + +form.signup { + padding: 24px; +} + +.text-center { + text-align: center; +} + +.mdc-text-field { + /*width: 300px;*/ + width: 100%; + margin: 10px auto; +} + +.field-container { + max-width: 320px; + margin: 0 auto; +} + +.mdc-card__actions { + padding: 0; +} + +:root { + --mdc-theme-primary: #333; +} +.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { + background-color: var(--mdc-theme-primary,#333); +} diff --git a/mission003/eastjun/index.html b/mission003/eastjun/index.html new file mode 100644 index 0000000..9bbe0b5 --- /dev/null +++ b/mission003/eastjun/index.html @@ -0,0 +1,71 @@ + + + + + mission003 + + + + + + + + + + +
+

mission003 회원가입

+ +
+ + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f5029c0 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "frontend", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/EastjunDev/frontend.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/EastjunDev/frontend/issues" + }, + "homepage": "https://github.com/EastjunDev/frontend#readme", + "devDependencies": { + "babel-eslint": "^10.0.3", + "eslint": "^5.16.0", + "eslint-config-airbnb-base": "^14.0.0", + "eslint-config-standard": "^14.1.0", + "eslint-plugin-html": "^6.0.0", + "eslint-plugin-import": "^2.19.1", + "eslint-plugin-node": "^10.0.0", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-standard": "^4.0.1", + "eslint-plugin-vue": "^6.0.1" + } +} From cf379ed5521f8e7bde703b8e0613076d419b1493 Mon Sep 17 00:00:00 2001 From: eastjun Date: Wed, 1 Jan 2020 01:58:24 +0900 Subject: [PATCH 2/8] feat(privacyChecbokc): show privacy checkbox when has value in phone or email input field --- mission003/eastjun/css/style.css | 112 +++++++++++++++++++++++ mission003/eastjun/index.html | 52 +++++++---- mission003/eastjun/js/App.js | 16 ++++ mission003/eastjun/js/components/Form.js | 43 +++++++++ 4 files changed, 207 insertions(+), 16 deletions(-) create mode 100644 mission003/eastjun/css/style.css create mode 100644 mission003/eastjun/js/App.js create mode 100644 mission003/eastjun/js/components/Form.js diff --git a/mission003/eastjun/css/style.css b/mission003/eastjun/css/style.css new file mode 100644 index 0000000..6e7725d --- /dev/null +++ b/mission003/eastjun/css/style.css @@ -0,0 +1,112 @@ +.msf_hide{ + display: none; +} + +.msf_show{ + display: block; +} + +.msf_bullet_o{ + display: flex; + flex-flow: row wrap; + justify-content: center; +} + +.msf_bullet_o > div{ + height: 15px; + width: 15px; + margin: 20px 10px; + border-radius: 100px; + z-index: 2; +} + +.msf_bullet{ + background-color: lightgrey; + +} + +.msf_bullet_active{ + background-color: darkgrey !important; +} + +body{ + background-color: #fff; + display: flex; + justify-content: center; +} + +.msf_line{ + opacity: 0.3; + background: lightgrey; + height: 3px; + width: 70px; + display: block; + left: 50%; + margin-top: -29px; + margin-left: -35px; + position: absolute; + z-index: 1; +} + +.form_wrapper{ + min-width: 300px; + position: absolute; + top: 50%; + margin-top: -160px; +} + +fieldset{ + display: flex; + flex-flow: row wrap; + justify-content: center; + box-shadow: rgba(0,0,0,0.1) 0px 1px 30px; + border-radius: 0px; + border: none; + padding: 10px 20px !important; +} + +input{ + display: block; + width: 100%; + height: 20px; + margin: 15px 0px; +} + +input[type="text"], input[type="email"]{ + outline: none; + border: none; + background-color: lightgrey; + padding: 5px 0px!important; + text-align: center; + transition: all 250ms; +} + +input[type="text"]:focus, input[type="email"]:focus{ + opacity: 0.5; +} + +input[type="button"], input[type="submit"]{ + margin-top: 20px !important; + cursor: pointer; + outline: none; + border: none; + padding: 15px !important; + line-height: 0px; + background-color: #fff; + transition: all 150ms; + box-shadow: rgba(0,0,0,0.2) 0px 1px 5px; +} + +input[type="button"]:hover, input[type="submit"]:hover{ + background-color: darkgrey; + color: white; +} + +h2{ + text-align: center; + font-size: 22px; + font-family: opensans; + font-weight: 400; + display: block; + margin-bottom: 25px !important; +} diff --git a/mission003/eastjun/index.html b/mission003/eastjun/index.html index 9bbe0b5..82b1c04 100644 --- a/mission003/eastjun/index.html +++ b/mission003/eastjun/index.html @@ -12,6 +12,10 @@ .field-container { width: 320px; } + + .hidden { + display: none; + } @@ -27,16 +31,18 @@

mission003 회원가입

-
- - -
-
+
+
+ + +
+
-
- - -
+
+ + +
+
@@ -51,21 +57,35 @@

mission003 회원가입

+ +
+
- - - - - + diff --git a/mission003/eastjun/js/App.js b/mission003/eastjun/js/App.js new file mode 100644 index 0000000..2e8d769 --- /dev/null +++ b/mission003/eastjun/js/App.js @@ -0,0 +1,16 @@ +import Form from './components/Form.js' + +function FormApp() { + + new Form() + + const materialDesignInit = () => window.mdc.autoInit() + + this.init = () => { + materialDesignInit() + } + + this.init() +} + +new FormApp() diff --git a/mission003/eastjun/js/components/Form.js b/mission003/eastjun/js/components/Form.js new file mode 100644 index 0000000..87d6f93 --- /dev/null +++ b/mission003/eastjun/js/components/Form.js @@ -0,0 +1,43 @@ +import validator from '../utils/validator.js' + +export default function Form() { + const $email = document.querySelector('#email') + const $phone = document.querySelector('#phone') + + this.name = '' + this.email = '' + this.phone = '' + this.password = '' + this.introduce = '' + this.agreement = '' + + + const initEventListener = () => { + $email.addEventListener('keyup', (event) => { + const value = event.target.value + this.email = value + togglePrivacyCheckbox(this.email) + }) + + $phone.addEventListener('keyup', (event) => { + const value = event.target.value + this.phone = value + togglePrivacyCheckbox(this.phone) + }) + } + + const togglePrivacyCheckbox = (value) => { + const $agreementContainer = document.querySelector('.privacy-policy-agree-container') + + if (validator.isNotEmptyString(event.target.value)) { + $agreementContainer.classList.remove('hidden') + } + + if (validator.isEmptyString(value) && validator.isEmptyString(value)) { + $agreementContainer.classList.add('hidden') + } + } + + initEventListener() + +} From 87dbd4efbb882167f69bf2c56c596b8ac50ea8bb Mon Sep 17 00:00:00 2001 From: eastjun Date: Wed, 1 Jan 2020 02:29:59 +0900 Subject: [PATCH 3/8] feat(dialog): create form dialog --- mission003/eastjun/index.html | 130 ++++++++++++++++++---------------- mission003/eastjun/js/App.js | 6 +- 2 files changed, 74 insertions(+), 62 deletions(-) diff --git a/mission003/eastjun/index.html b/mission003/eastjun/index.html index 82b1c04..c11e18b 100644 --- a/mission003/eastjun/index.html +++ b/mission003/eastjun/index.html @@ -9,81 +9,89 @@ - -