Project using node.js/Cloning Youtube
-
JavaScript video play buttonProject using node.js/Cloning Youtube 2020. 9. 3. 11:02
앞으로 생성할 모든 프론트엔드 part의 JS 파일은 main.js에서 import를 할 것이다. 그리고 main.pug에서 main.js만 script에 포함시킬 것이다. videoPlayer.js 모든 함수는 init()에 선언할 것이다. 그리고 init 함수는 videoContainer가 있을 경우에만 실행되도록 if문으로 구성한다. 사용자가 playBtn을 눌렀거나 video 화면을 클릭했을 때, video가 play or pause가 될 수 있도록 'click' event를 추가했고 그에 대한 실행을 handlePlayClick로 구현했다. handlePlayClick는 videoPlayer가 paused(멈춰있으면 boolean 값으로 true를 반환)면 video를 실행하고 playBtn i..
-
SCSS-videoPlayerProject using node.js/Cloning Youtube 2020. 9. 3. 10:38
partials/videoPlayer.scss .videopPlayer { margin-bottom: 20px; display: flex; position: relative; video { align-self: center; width: 100%; max-width: 100%; } &:hover, &:active { .videoPlyaer__controls, .progressBar { opacity: 1; } } .videoPlyaer__controls { opacity: 0; transition: opacity 0.4s linear; display: flex; justify-content: space-between; position: absolute; bottom: 0px; color: white; f..
-
SCSS-searchProject using node.js/Cloning Youtube 2020. 9. 2. 12:22
pages/search.scss .search__header { margin-bottom: 30px; h5 { font-weight: 600; &:first-child { margin-bottom: 20px; } } } .search__videos { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); grid-gap: 30px; .videoBlock:first-child, .videoBlock:nth-child(2) { grid-column: span 3; } .videoBlock:nth-child(3), .videoBlock:nth-child(4), .videoBlock:nth-child(5) { grid-column: span ..
-
SCSS-videoDetailProject using node.js/Cloning Youtube 2020. 9. 2. 12:14
pages/videoDetail.scss .profile { display: flex; flex-direction: column; align-items: center; .profile__column { &:nth-child(2) { display: flex; flex-direction: column; align-items: center; margin: 20px 0; margin-bottom: 40px; font-weight: 400; font-size: 18px; .profile__name { margin-bottom: 20px; } } &:last-child { .profile__btns { display: flex; flex-direction: column; align-items: center; ma..
-
SCSS-userDetailProject using node.js/Cloning Youtube 2020. 9. 2. 12:09
pages/userDetail.scss .profile { display: flex; flex-direction: column; align-items: center; .profile__column { &:nth-child(2) { display: flex; flex-direction: column; align-items: center; margin: 20px 0; margin-bottom: 40px; font-weight: 400; font-size: 18px; .profile__name { margin-bottom: 20px; } } &:last-child { .profile__btns { display: flex; flex-direction: column; align-items: center; mar..
-
SCSS-socialLoginProject using node.js/Cloning Youtube 2020. 9. 2. 12:00
partials/socialLogin.scss .social-login { max-width: 320px; width: 100%; display: flex; flex-direction: column; align-items: center; .social-login--github { margin-bottom: 20px; background-color: $black; } .social-login--kakao { margin-bottom: 20px; background-color: $kakao; a { color: #3c1e1e; } } i { margin-right: 10px; } a { color: white; } } View http://localhost:5002/ 참고 자료 노마드 코더의 유튜브 클론 강..
-
SCSS-formProject using node.js/Cloning Youtube 2020. 9. 2. 11:46
partials/form.scss .form-container { display: flex; flex-direction: column; align-items: center; font-size: 20px; width: 100%; .record-container { width: 100%; max-width: 320px; margin-bottom: 15px; video { background-color: #6f6f6f; width: 100%; margin-bottom: 20px; } button { margin: 5px 0; } } form { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 320px; ma..
-
SCSS - homeProject using node.js/Cloning Youtube 2020. 9. 2. 11:43
pages/home.scss .home-videos { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); grid-gap: 30px; .videoBlock:first-child, .videoBlock:nth-child(2) { grid-column: span 3; } .videoBlock:nth-child(3), .videoBlock:nth-child(4), .videoBlock:nth-child(5) { grid-column: span 2; } } View 참고 자료 노마드 코더의 유튜브 클론 강의 소스 코드 https://github.com/zpskek/wetube-v3/commit/cec8d685c18b739c253bcf437..