diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..4a1aa310 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index e70983a3..e69de29b 100644 --- a/README.md +++ b/README.md @@ -1,2 +0,0 @@ -# javascript-amazon -레벨3 diff --git a/index.html b/index.html new file mode 100644 index 00000000..1a32a32a --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + +
+
+ +
+ +
+
+ + +
+
+ + +
+ +
+
+ +
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..5755226a --- /dev/null +++ b/index.js @@ -0,0 +1,71 @@ +class Carousel { + constructor (menuData,contentData) { + this.menuData=menuData; + this.contentData=contentData; + this.makingMenuList(); + this.makingSlider(); + this.btnHandler(); + this.count = 0; + } + changeLocation (element,index) { + this.count = index; + const width = element.children[0].getBoundingClientRect().width; + element.style.transform = `translateX(${-this.count*width}px)`; + } + scaleMenu (element,index) { + this.count = index; + Array.from(element.parentNode.children).forEach((element)=>element.style.transform=`scale(0.99)`) + element.parentNode.children[this.count].style.transform = 'scale(1.1)'; + } + btnHandler () { + const left =document.querySelector('div.carousel__button--prev'); + const right =document.querySelector('div.carousel__button--next'); + [left,right].forEach((btn,index)=>{ + btn.addEventListener('click',()=>{ + index === 0 ? this.count-- : this.count++; + if (this.count >3) this.count =0; + if (this.count<0) this.count =3; + const el = document.querySelector('.carousel__container'); + this.changeLocation(el,this.count); + this.scaleMenu(document.querySelector('.menu__list>li'),this.count); + }); + }) + } + makingMenuList () { + const menuConatiner=document.querySelector('.menu__list') + this.menuData.forEach((data)=>{ + menuConatiner.innerHTML +=` +
  • ${data}
    • ` + }) + Array.from(menuConatiner.children).forEach((li,index)=>{ + li.addEventListener('click',()=>{ + this.scaleMenu(li,index); + this.changeLocation(document.querySelector('.carousel__container'),index); + }) + }) + } + makingSlider () { + const carouselContainer = document.querySelector('.carousel__container'); + carouselContainer.innerHTML=this.contentData.map((data,index)=>` +
    +
    + +
    +
    + +
    +
    `).join(''); + } +} + +window.addEventListener('DOMContentLoaded',()=>{ + fetch('./localData.json') + .then((data)=>data.json()) + .then((data)=>{ + const {menuData,contentData}=data; + const carousel=new Carousel(menuData,contentData); + }) +}); \ No newline at end of file diff --git a/localData.json b/localData.json new file mode 100644 index 00000000..7d0ef075 --- /dev/null +++ b/localData.json @@ -0,0 +1,35 @@ +{ + "menuData" : [ + "Fast, Free Delivery", + "Exclusive deals and offers", + "Prime Originals, movies and TV shows", + "Over 2 million song ad free" + ], + "contentData" : [{ + "id" : "1", + "imgUrl" : "https://placedog.net/200/250?id=8", + "title" :"Enjoy exclusive savings and rewards", + "desc" : ["Fast, Free Delivery", + "Exclusive deals and offers","Prime Originals, movies and TV shows","Over 2 million song ad free"] + },{ + "id" : "2", + "imgUrl" : "https://placedog.net/200/250?id=12", + "title" :"Code Squad is awesome place", + "desc" : ["Code, Feel JS", + "Do you want to be Front Engeneer?","Come to us Master,Good People","Waiting For you!"] + },{ + "id" : "3", + "imgUrl" :"https://placedog.net/200/250?id=14", + "title" :"Learning With practice and enthusiastic people", + "desc" : ["React to ur Mind", + "Es6 class is good for you","We will find answer","As we've done so far"] + },{ + "id" : "4", + "imgUrl" : "https://placedog.net/200/250?id=15", + "title" :"Watching Dog makes inner-peace", + "desc" : ["It was hard Day.", + "Do you feel exhausted?","Come to Our good puppy","puppy would be with you"] + } + ] +} + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..68b88bb1 --- /dev/null +++ b/style.css @@ -0,0 +1,148 @@ +* { + box-sizing: border-box; + margin:0; + padding:0; +} +body,html { + margin: 0; + padding:0; +} + +.carousel__menu { + padding-top: 50px; + display: flex; +} +.carousel { + margin: 0 auto; + height: 270px; + width: 600px; + overflow: hidden; + position: relative; +} +.carousel__container { + position: relative; + display: flex; + margin-top: 40px; + width: 2450px; + height: 220px; + transition:transform .5s ease-in-out; + -webkit-transition:transform .5s ease-in-out; +} +.carousel__contents { + display: flex; + width: 600px; + height: 220px; + position: relative; + justify-content: center; + align-items: center; +} +.carousel__container .carousel__text { + width: 400px; + display: inline-block; +} +.carousel__container .carousel__text >ul>li { + margin: 3px 0; + font-size: 18px; +} +.carousel__img { + display: inline-block; + width: 220px; +} +.carousel__img > img { + width: 70%; + height: 70%; + border-radius: 50%; +} +.carousel__container .carousel__text { + line-height: 1.4; +} +.carousel__container .carousel__text > ul { + list-style: none; + font-weight: 500; +} +.carousel__button--prev { + width: 30px; + height: 30px; + font-size: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 10px; + top:50%; + transform: translateY(-50%); +} +.carousel__button--next { + width: 40px; + height: 40px; + font-size: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + right: 20%; + top: 40%; + border: 1px solid black; + transform: translateY(-50%); + border-radius: 50%; + color: white; + background: gray; +} +.carousel__button--prev { + width: 40px; + height: 40px; + font-size: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 20%; + top: 40%; + border: 1px solid black; + transform: translateY(-50%); + border-radius: 50%; + color: white; + background: gray; +} +.menu__list { + margin:0 auto; + display: flex; + justify-content: space-between; + -webkit-transition: transform .5s; + transition:transform .5s; +} +.menu__list > li { + text-align: center; + width:24%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80px; + padding:0 3px; + -webkit-transition: transform .5s; + transition:transform .5s; +} +.menu__list >li:last-child { + margin-right:0; +} +.menu__list>li>a { + text-decoration: none; + color:black +} + +.menu__list>li:first-child { + background-color: #2591C0; +} + +.menu__list>li:nth-child(2) { + background-color: #A90067; +} + +.menu__list>li:nth-child(3) { + background-color: #008577; +} + +.menu__list>li:nth-child(4 ) { + background-color:#E65D16; +} \ No newline at end of file