Skip to content

[HTML, CSS, JS] 아마존 - 네비게이션UI 미션 제출합니다. #122

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

Merged
crongro merged 8 commits into from
Feb 13, 2020
Merged

[HTML, CSS, JS] 아마존 - 네비게이션UI 미션 제출합니다. #122

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
10008c8
Initial commit
choisohyun Feb 11, 2020
cbe9654
feat. html, css UI 틀 추가
choisohyun Feb 11, 2020
b481dd1
feat. html, css UI 틀 추가
choisohyun Feb 11, 2020
38aa4e7
feat. prev,next 버튼 클릭 시 슬라이드 이동 기능 추가
choisohyun Feb 12, 2020
6ba14ed
refactor. function -> class로 변경
choisohyun Feb 12, 2020
9c1d78d
feat. navigation 버튼 클릭 시 슬라이드 이동 기능 추가
choisohyun Feb 12, 2020
4a2b895
Merge remote-tracking branch 'javascript-amazon-anim/master' into cardui
choisohyun Feb 12, 2020
6046298
docs. Delete image files, duplicate files
choisohyun Feb 12, 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
15 changes: 13 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
# javascript-amazon
레벨3
# 아마존 사이트 Card UI Clone Coding

## 기획서

![image](https://user-images.githubusercontent.com/30427711/74309139-5b9e3f80-4dad-11ea-82d3-1b1991534711.png)

## HTML 설계도

![HTMLDiagram](https://user-images.githubusercontent.com/30427711/74309031-1ed24880-4dad-11ea-9aae-0efa586a3fd2.png)

## 구현 기능

- ㅇ
Binary file added css/.DS_Store
View file
Open in desktop
Binary file not shown.
66 changes: 66 additions & 0 deletions css/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
@charset 'utf-8';

/* reset */
* {
box-sizing: border-box;
font-family: Apple SD Gothic Neo, Malgun Gothic, sans-serif;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footedestination_wrar, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}
ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
button {
border: none 0;
background: transparent;
outline: none 0;
}

input:focus,
select:focus,
button:focus {
outline: none;
}
147 changes: 147 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
.clearfix:after {
display: block;
clear: both;
content: "";
}

.br {
Copy link
Copy Markdown
Contributor

@crongro crongro Feb 13, 2020

Choose a reason for hiding this comment

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

br이건 태그명과 같아서 잘 안쓰는 이름같네요.

display: block;
width: 100%;
}

.wrap {
position: relative;
margin: 30px 70px;
}

.slide-container {
padding: 20px;
margin: 0 auto;
width: 100%;
}

.slide-navigation li {
float: left;
width: 25%;
}

.slider {
width: calc(100% * 4);
Copy link
Copy Markdown
Contributor

@crongro crongro Feb 13, 2020

Choose a reason for hiding this comment

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

calc이런함수 사용좋네요.
브라우저 호환성도 가끔 검색하면서 사용해보세요.

}

.slider > li {
overflow: hidden;
padding: 20px 20px;
float: left;
width: calc(100% / 4);
}

.slider li .img-wrap,
.slider li .contents-wrap {
float: left;
}

.slider li .img-wrap {
width: 30%;
}

.slider li .img-wrap img {
width: 100%;
height: auto;
display: block;
border-radius: 1000px;
}

.slider li .contents-wrap {
width: calc(100% - 30%);
padding-left: 20px;
}

.contents-wrap > h2 {
font-size: 28px;
line-height: 32px;
font-weight: 300;
margin-bottom: 20px;
}

.contents-wrap > ul > li {
font-size: 18px;
line-height: 28px;
font-weight: 300;
}

.slide-container {
overflow: hidden;
position: relative;
}

.slide-navigation {
margin-left: -5px;
margin-right: -5px;
}

.slide-navigation li {
padding: 0 5px;
height: 60px;
transition: 0.2s ease-in;
}

.slide-navigation li:hover,
.slide-navigation li button:hover {
cursor: pointer;
transform: scale(1.1);
transition: 0.2s ease-in;
}

.slide-navigation li:first-child button {
background-color: blue;
}

.slide-navigation li:nth-child(2) button {
background-color: purple;
}

.slide-navigation li:nth-child(3) button {
background-color: green;
}

.slide-navigation li:last-child button {
background-color: orange;
}

.slide-navigation li button {
color: #fff;
width: 100%;
height: 100%;
display: block;
/* align-items: center; */
/* justify-content: space-around; */
}

.slide-btn {
position: absolute;
width: 100%;
height: 40px;
/* height: 100%; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.slide-btn button {
position: absolute;
height: 100%;
width: 40px;
background-image: url(../images/button.png);
background-size: 100%;
cursor: pointer;
}

.slide-btn .prev-btn {
left: -30px;
}

.slide-btn .next-btn {
right: -30px;
transform: rotate(180deg);
}
96 changes: 96 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/index.js"></script>
<title>아마존</title>
</head>

<body>
<div class="wrap">
<div class="slide-container">
<ul class="slide-navigation clearfix">
<li>
<button type="button">Fast, free Delivery</button>
</li>
<li>
<button type="button"><span class="br">Exclusive deals and </span>offers</button>
</li>
<li>
<button type="button"><span class="br">Prime Originals,</span> <span class="br">movies and TV</span> <span class="br">shows<span></button>
</li>
<li>
<button type="button"><span class="br">Over 2 million songs </span>ad free</button>
</li>
</ul>
<ul class="slider clearfix">
<li>
<div class="img-wrap">
<img src="images/1.png" alt="귀여운 이미지">
</div>
<div class="contents-wrap">
<h2>Prime Originals, exclusively on Prime Video</h2>
<ul>
<li>Save on groceries and get an additional 10% off</li>
<li>Save 20% off diapers, baby food, and more</li>
<li>Prime Video is the only place</li>
<li>Prime Video is the only place</li>
</ul>
</div>
</li>
<li>
<div class="img-wrap">
<img src="images/2.png" alt="귀여운 이미지">
</div>
<div class="contents-wrap">
<h2>Enjoy exclusive savings and rewards</h2>
<ul>
<li>Save on groceries and get an additional 10% off</li>
<li>Save 20% off diapers, baby food, and more</li>
<li>Prime Video is the only place</li>
<li>Prime Video is the only place</li>
</ul>
</div>
</li>
<li>
<div class="img-wrap">
<img src="images/3.jpg" alt="귀여운 이미지">
</div>
<div class="contents-wrap">
<h2>Prime Originals, exclusively on Prime Video</h2>
<ul>
<li>Save on groceries and get an additional 10% off</li>
<li>Save 20% off diapers, baby food, and more</li>
<li>Prime Video is the only place</li>
<li>Prime Video is the only place</li>
</ul>
</div>
</li>
<li>
<div class="img-wrap">
<img src="images/4.jpg" alt="귀여운 이미지">
</div>
<div class="contents-wrap">
<h2>Prime Originals, exclusively on Prime Video</h2>
<ul>
<li>Save on groceries and get an additional 10% off</li>
<li>Save 20% off diapers, baby food, and more</li>
<li>Prime Video is the only place</li>
<li>Prime Video is the only place</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="slide-btn">
<button type="button" class="prev-btn"></button>
<button type="button" class="next-btn"></button>
</div>
</div>
</body>

</html>
64 changes: 64 additions & 0 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
class AmazonCarousel {
constructor(option) {
this.slides = option.slides;
this.currentIndex = option.currentIndex;
this.maxIndex = option.maxIndex;
this.prev = option.prev;
this.next = option.next;
this.nav = option.nav;
console.log(this.nav);
}

moveSlides() {
let translate = "translateX(" + -100 * this.currentIndex + "%)";
this.slides.forEach(element => {
console.log(element);
Copy link
Copy Markdown
Contributor

@crongro crongro Feb 13, 2020

Choose a reason for hiding this comment

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

디버깅은 debugger; 입력도 있을테고, 그것보다 개발자도구의 breakpoint를 찍어서 하는게 더 편리할거에요.

element.style.transform = translate;
Copy link
Copy Markdown
Contributor

@crongro crongro Feb 13, 2020

Choose a reason for hiding this comment

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

transform이 다른 속성대비 장점이 뭔지 오늘 수업때 언급했는데요.
그 이유를 잘 이해해보세요.

});
}

onClickHandler() {
this.prev.addEventListener("click", () => {
this.currentIndex--;
if (this.currentIndex < 0) {
this.currentIndex = this.maxIndex - 1;
}
this.moveSlides();
});

this.next.addEventListener("click", () => {
this.currentIndex++;
if (this.currentIndex > this.maxIndex - 1) {
this.currentIndex = 0;
}
this.moveSlides();
});

this.nav.forEach((el, index) => {
el.addEventListener("click", () => {
this.currentIndex = index;
this.moveSlides();
});
});
}
}

window.addEventListener("DOMContentLoaded", () => {
const carouselChildren = document.querySelectorAll(".slider > li");
const buttonPrev = document.querySelector(".prev-btn");
const buttonNext = document.querySelector(".next-btn");
const buttonNav = document.querySelectorAll(".slide-navigation > li");
let current = 0;
let total = 4;

const startMove = new AmazonCarousel({
slides: carouselChildren,
currentIndex: current,
maxIndex: total,
prev: buttonPrev,
next: buttonNext,
nav: buttonNav
});

startMove.onClickHandler();
Copy link
Copy Markdown
Contributor

@crongro crongro Feb 13, 2020

Choose a reason for hiding this comment

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

네 이렇게 별도 메서드를 불러서 핸들러 등록을 할 수도 있긴해요
하지만 객체 생성시 늘 호출되야 하는것이라면 생성자 안에서 실행되도록 해도 될 거 같아요.

constructor() {
startMove.onClickHandler();
}

});