[유튜브 클론코딩] 2.20 Change Profile HTML
2021. 2. 22. 18:59ㆍProjects/유튜브 클론코딩
728x90
반응형
2.20 Change Profile HTML
이번 파트에서는 editProfile.pug , changePassword.pug, upload.pug, editVideo.pug를 만들 것이다.
(form으로 된 페이지 몰아서 만드는 거임)
join과 login은 했고
User Detail은 form 페이지가 아님
Edit Profile은 form 페이지야. --> 이거 작업하기
editProfile.pug 작성하기
join에서 사용한 것과 같은 클래스 그대로 쓴다.
.form__container 이걸 모든 곳에 그대로 쓸 것이다.
그리고 이 안에 form 태그를 추가한다.
extends layouts/main
block content
.form-container
form(action=`/users${routes.editProfile}`, method="post")
label(for="avatar") Avatar
input(type="file", id="avatar", name="avatar")
input(type="text",name="name", placeholder="Name")
input(type="email", name="name", placeholder="Email")
input(type="submit", value="Update Profile")
a.form-container__link(href=`/users${routes.changePassword}`) Change Password
↑ editProfile.pug
changePassword.pug 작성하기
extends layouts/main
block content
.form-container
form(action=`/users${routes.changePassword}`, method="post")
input(type="password", name="oldPassword", placeholder="Current Password")
input(type="password", name="newPassword", placeholder="New Password")
input(type="password", name="newPassword2",placeholder="Verify New Password")
input(type="submit", value="Change Password")
↑ changepassword.pug
upload.pug 작성하기
extends layouts/main
block content
.form-container
form(action=`/videos${routes.upload}`, method="post")
label(for="file") Video File
input(type="file", id="file", name="file")
input(type="text",name="title", placeholder="Name")
textarea(name="description", placeholder="Description")
input(type="submit", value="Upload Video")
↑ upload.pug
editVideo.pug 작성하기
extends layouts/main
block content
.form-container
form(action=`/videos${routes.editVideo}`, method="post")
input(type="text", placeholder="Title", name="title")
textarea(name="description", placeholder="Description")
input(type="submit" value="Update Video")
a.form-container__link.form-container__link--delete(href=`/videos${routes.deleteVideo}`) Delete Video
↑ editVideo.pug
728x90
반응형
'Projects > 유튜브 클론코딩' 카테고리의 다른 글
[유튜브 클론코딩] 2.22 Home Controller Part 2 (0) | 2021.02.23 |
---|---|
[유튜브 클론코딩] 2.21 Home Controller (0) | 2021.02.23 |
[유튜브 클론코딩] 2.19 Join : Log In HTML (0) | 2021.02.22 |
[유튜브 클론코딩] 2.18 Search Controller (0) | 2021.02.22 |
[유튜브 클론코딩] 2.17 Template Variables in Pug (0) | 2021.02.18 |