Skip to content

[Mission003] 자바스크립트로 Form 과 Modal 에 대한 UI 만들기 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eastjun-dev wants to merge 8 commits into
base: master
Choose a base branch
from
Open

[Mission003] 자바스크립트로 Form 과 Modal 에 대한 UI 만들기 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ce62c55
feat(form): create form to input user info
wmakerjun Dec 31, 2019
cf379ed
feat(privacyChecbokc): show privacy checkbox when has value in phone …
wmakerjun Dec 31, 2019
87dbd4e
feat(dialog): create form dialog
wmakerjun Dec 31, 2019
3ac08b7
feat(nextButton): add validation to show next button when fill all fo…
wmakerjun Dec 31, 2019
6eac8c2
feat(edit-form): add edit form ui & feature
wmakerjun Jan 5, 2020
bdce264
feat(eslint): add eslint config
wmakerjun Jan 5, 2020
9f5dae5
refactor(style.css): remove unused css file
wmakerjun Jan 5, 2020
63afe9f
refactor(bullet): remove unused prefix class name
wmakerjun Jan 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
"env": {
"node": true,
"es6": true,
"browser": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"semi": [2, "never"],
"no-use-before-define": "off",
"no-underscore-dangle": "off",
"no-shadow": "off"
}
}
178 changes: 178 additions & 0 deletions mission003/eastjun/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
/*mdc override*/
:root {
--mdc-theme-primary: #333;
}

.mdc-button__raised:not(:disabled), .mdc-button__unelevated:not(:disabled) {
background-color: var(--mdc-theme-primary,#333);
}

.mdc-dialog__surface {
width: 400px;
}

.mdc-card__actions {
padding: 0;
}

.mdc-text-field {
margin: 10px auto;
}

.mdc-dialog__actions {
padding-right: 0;
}
/*mdc override*/

body {
margin: 0;
}

.background-img {
background-size: cover;
background-image: url("https://user-images.githubusercontent.com/56821976/71782829-d68f7000-3021-11ea-833d-9e286c629503.jpg");
position: fixed;
width: 100%;
height: 50vh;
}

.dark-overlay {
width: 100%;
background-color: rgba(0,0,0,.2);
height: 50vh;
z-index: 10;
}

.signup-card {
max-width: 400px;
margin: 100px auto;
}

.signup-card h2{
margin-top: 32px;
}

form.signup {
padding: 24px;
}

.text-center {
text-align: center;
}

.hidden {
display: none;
}

.bullet-o{
display: flex;
flex-flow: row wrap;
justify-content: center;
}

.bullet-o > div{
height: 15px;
width: 15px;
margin: 20px 10px;
border-radius: 100px;
z-index: 2;
}

.bullet{
background-color: lightgrey;

}

.bullet-active{
background-color: #333 !important;
}

.bullet-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;
}

.pdd-top-0 {
padding-top: 0px !important;
}

.width-100 {
width: 100%;
}

.flex-container {
display: flex;
}

.mrg-right-10 {
margin-right: 10px;
}

#add-family-button {
display: block;
margin: 0 auto;
}

.stepper {
position: relative;
}

.coffee-emoji {
font-size: 100px;
margin: 40px 0 70px 0;
}

.margin-center {
margin: 0% auto;
}

.my-info-view-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.text-bold {
font-weight: bold;
}

.my-info {
padding: 30px;
}

.my-info-card {
width: 400px;
padding: 30px;
position: relative;
}

#my-info-edit-button {
top: 16px;
right: 16px;
position: absolute;
}

.no-margin {
margin: 0px;
}

.margin-16 {
margin: 16px;
}

.margin-8 {
margin: 8px;
}

.text-gray {
color: gray;
}
134 changes: 134 additions & 0 deletions mission003/eastjun/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mission003</title>

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="background-img">
<div class="dark-overlay"></div>
</div>
<div id="my-info-view-card"></div>

<div class="mdc-dialog"
role="alertdialog"
aria-modal="true"
aria-labelledby="my-dialog-title"
aria-describedby="my-dialog-content">
<div class="mdc-dialog__container">
<div class="mdc-dialog__surface">
<h1 class="mdc-dialog__title text-center margin-8" id="my-dialog-title">회원가입</h1>
<div class="stepper">
<div class="bullet-o">
<div class="bullet bullet1 bullet-active"></div>
<div class="bullet bullet2"></div>
<div class="bullet bullet3"></div>
</div>
<div class="bullet-line"></div>
</div>
<div class="mdc-dialog__content pdd-top-0" id="my-dialog-content">
<form class="signup pdd-top-0">
<div class="field-container">
<div id="step1">
<div class="user-primary-info-container">
<div class="mdc-text-field width-100" data-mdc-auto-init="MDCTextField">
<input type="text" class="mdc-text-field__input" type="text" name="name" id="name" required>
<label for="name" class="mdc-floating-label">이름</label>
<div class="mdc-line-ripple"></div>
</div>

<div class="mdc-text-field width-100" data-mdc-auto-init="MDCTextField">
<input type="text" class="mdc-text-field__input" type="text" name="phone" id="phone" required>
<label for="phone" class="mdc-floating-label">전화번호</label>
<div class="mdc-line-ripple"></div>
</div>

<div class="mdc-text-field width-100" data-mdc-auto-init="MDCTextField">
<input type="email" class="mdc-text-field__input" type="text" name="email" id="email" required>
<label for="email" class="mdc-floating-label">이메일</label>
<div class="mdc-line-ripple"></div>
</div>

<div class="mdc-text-field width-100" data-mdc-auto-init="MDCTextField">
<input type="password" class="mdc-text-field__input" type="text" name="name" id="password" required>
<label for="password" class="mdc-floating-label">비밀번호</label>
<div class="mdc-line-ripple"></div>
</div>

<div class="mdc-text-field width-100 mdc-text-field--textarea" data-mdc-auto-init="MDCTextField">
<textarea id="introduce" class="mdc-text-field__input" rows="2" cols="40" required></textarea>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="introduce" class="mdc-floating-label">자기소개</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>

<div class="mdc-form-field width-100 privacy-policy-agree-container hidden">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="agreement"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="agreement">개인정보보호방침에 동의합니다</label>
</div>

<footer class="step1-complete-btn mdc-dialog__actions hidden">
<button class="mdc-button mdc-button--raised dialog__button">
<span class="mdc-button__ripple"></span>다음
</button>
</footer>
</div>
</div>

<div id="step2" class="hidden">
<div class="user-family-form-container">
<div class="user-family-forms"></div>

<button id="add-family-button" class="mdc-icon-button material-icons">add</button>

<footer class="step1-complete-btn mdc-dialog__actions">
<button type="submit" class="mdc-button mdc-button--raised dialog__button">
<span class="mdc-button__ripple"></span>제출
</button>
</footer>
</div>
</div>

<div id="step3" class="hidden">
<p class="text-center coffee-emoji">☕️</p>
<p class="text-center">블랙커피 서비스에 정보가 반영되었습니다.</p>
<footer class="step1-complete-btn mdc-dialog__actions">
<button class="mdc-button mdc-button--raised dialog__button margin-center" data-mdc-dialog-action="close">
<span class="mdc-button__ripple"></span>완료
</button>
</footer>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="mdc-dialog__scrim"></div>
</div>

<script type="module" src="js/app.js"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions mission003/eastjun/js/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Form from './components/Form.js'
import User from './components/User.js'
function FormApp() {
this.user = new User()
this.mdcInit = () => mdc.autoInit()

this.init = () => {
new Form({
mdcInit: this.mdcInit,
user: this.user
})
this.mdcInit()
}

this.init()
}

new FormApp()
Copy link
Collaborator

@YongHoonJJo YongHoonJJo Jan 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.user 를 두지 않고,

new Form({
  //...
  user: new User()
})

위와 같이 하는 방법은 안좋은 방법인가요? this.user 를 활용하는 곳이 여기 말고는 안보여서 질문드립니다..!!

8 changes: 8 additions & 0 deletions mission003/eastjun/js/components/Family.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { familyFormTemplate } from '../utils/templates.js'

export default function Family() {
this.name = ''
this.relations = ''

this.render = (index) => familyFormTemplate(index)
}
Loading