From 8dbc23ff3a6eba395837653b3e68be7022105b5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 12 Feb 2020 15:57:44 +0900 Subject: [PATCH 1/7] css transform is not end --- index.html | 43 ++++++++++++++++++++++++++++++ index.js | 0 style.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..a6d8ce2a --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + +
+
+ +
+
+
+ fisrtDog + secondDog + thirdDog + fourthDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..8dddf3bb --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ +.carousel-wrapper { + width:1000px; + +} +.carousel { + width:100%; +} + +.menu__list>a { + text-decoration: none; +} + +.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; +} + +.carousel__photo { + opacity:1; + +} + +.carousel__photo.initial { + opacity:1; + transition: .5s opacity; +} + +.carousel__button--prev, +.carousel__button--next { + position: absolute; + top:50%; + width: 3rem; + height: 3rem; + background-color: #FFF; + transform: translateY(-50%); + border-radius: 50%; + background-color:beige; + cursor: pointer; + z-index: 1001; /* Sit on top of everything */ +} +.carousel__button--prev { + left:0; +} + +.carousel__button--next { + right:0; +} + +.carousel__button--prev::after, +.carousel__button--next::after { + content: " "; + position: absolute; + width: 10px; + height: 10px; + top: 50%; + left: 54%; + border-right: 2px solid black; + border-bottom: 2px solid black; + transform: translate(-50%, -50%) rotate(135deg); +} + +.carousel__button--next::after { + left: 47%; + transform: translate(-50%, -50%) rotate(-45deg); +} \ No newline at end of file From 4f4f240cd0cb7cc322b5ecf79bd6ec65be7544c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 19 Feb 2020 17:36:33 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=EC=95=84=EB=A7=88=EC=A1=B4=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9Cui=20=EC=99=84=EC=84=B1/=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20=EB=AF=B8=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes README.md | 2 - index.html | 91 ++++++++++++++++++++++------ index.js | 59 ++++++++++++++++++ style.css | 173 +++++++++++++++++++++++++++++++++++++---------------- 5 files changed, 251 insertions(+), 74 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4a1aa310097bbcd0682e77e49d2bfe282ccf050b GIT binary patch literal 6148 zcmeH~yH3ME5Jm4miU3VID7U1FL``ENr=XyLA3%9X0U1&lB#G+Ai3yaL$=dKeDl;K-w|)sCWF|cKi=;jX5q*;)*&Yp;b3Rj(ZU` zNxqWgn*K}Fy*b_$duvU)uCO2w1cE>i2m(J5;F+y9J~E9w2n2y3@J&GXhs2~>xHhJF z>tL3j093t3XJc8f%Nmnh3)jY!Jv6aUs)dR_F~q{zp4_i+ZA>j3;*SsUnZF({l4s}m zDZ4`o)5wEB5a<%vx9UXC|2cn|!AE{KBx*q*2>dewGAeJ%89&O;*52poS(}({nbg#; p(E^R-&Lw~q-A7Jxr}ZZ-)30!COm!4(&*9X#2xK6U1%Y26@CkM?L2>{9 literal 0 HcmV?d00001 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 index a6d8ce2a..1bf02e63 100644 --- a/index.html +++ b/index.html @@ -4,40 +4,93 @@ +
-
+
-
+
+
-
- fisrtDog - secondDog - thirdDog - fourthDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
+
+ +
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
-
-
+ + +
+ +
+
+ +
+ - \ No newline at end of file diff --git a/index.js b/index.js index e69de29b..d2ece4c4 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,59 @@ +const menuNav =document.querySelector('.menu__list'); +const carouselSlider = document.querySelector('.carousel__container') +const prevBtn = document.querySelector('.carousel__button--prev'); +const nextBtn = document.querySelector('.carousel__button--next'); + +const menuList = Array.from(menuNav.children); +const menuListWidth = menuList[0].getBoundingClientRect().width; + +const sliderList = Array.from(carouselSlider.children); +const sliderListWidth= sliderList[0].getBoundingClientRect().width; + + +let targetIndex; + +class Carousel { + constructor(targetIndex) { + this.targetIndex = targetIndex; + this.moveCarouselMenu(this.targetIndex); + this.btnHandler(); + } + moveCarouselTarget =(index)=>{ + carouselSlider.style.transform = `translateX(-${sliderListWidth*index}px)`; + } + moveCarouselMenu =(targetIndex)=>{ + this.moveMenuItem(targetIndex); + menuList.forEach((li,index)=>{ + li.addEventListener('click',()=>{ + this.moveMenuItem(index) + this.moveCarouselTarget(index); + }); + }); + } + moveMenuItem = (targetIndex)=>{ + menuList.forEach((item)=>{ + item.style.transform='scale(1)'; + }) + menuList[targetIndex].style.transform = 'scale(1.1)'; + } + btnHandler() { + prevBtn.addEventListener('click',(e)=>{ + this.targetIndex--; + if (this.targetIndex <0) this.targetIndex=3; + this.moveCarouselTarget(this.targetIndex); + this.moveMenuItem(this.targetIndex); + }) + nextBtn.addEventListener('click',(e)=>{ + this.targetIndex++; + if (this.targetIndex>3) this.targetIndex=0; + this.moveCarouselTarget(this.targetIndex) + this.moveMenuItem(this.targetIndex) + }) + } +} +window.addEventListener('DOMContentLoaded',(e)=>{ + targetIndex=Math.floor(Math.random()*menuList.length); + carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; + menuList[targetIndex].style.transform ='scale(1.1)'; + new Carousel(targetIndex); +}) \ No newline at end of file diff --git a/style.css b/style.css index 8dddf3bb..0130a1f1 100644 --- a/style.css +++ b/style.css @@ -1,76 +1,143 @@ -.carousel-wrapper { - width:1000px; - +* { + box-sizing: border-box; + margin:0; + padding:0; } -.carousel { - width:100%; +body,html { + margin: 0; + padding:0; } -.menu__list>a { - text-decoration: none; +.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: 200px; + transition:transform .5s ease-in-out; + -webkit-transition:transform .5s ease-in-out; } - -.menu__list>li:first-child { - background-color: #2591C0; +.carousel__contents { + display: flex; + width: 600px; + height: 200px; + position: relative; + justify-content: center; + align-items: center; } - -.menu__list>li:nth-child(2) { - background-color: #A90067; +.carousel__container .carousel__text { + width: 400px; + display: inline-block; } - -.menu__list>li:nth-child(3) { - background-color: #008577; +.carousel__img { + display: inline-block; + width: 180px; } - -.menu__list>li:nth-child(4 ) { - background-color:#E65D16; +.carousel__img > img { + width: 60%; + height: 60%; + border-radius: 50%; } - -.carousel__photo { - opacity:1; - +.carousel__container .carousel__text { + width: 50%; + line-height: 1.3; } - -.carousel__photo.initial { - opacity:1; - transition: .5s opacity; +.carousel__container .carousel__text > ul { + list-style: none; } - -.carousel__button--prev, -.carousel__button--next { +.carousel__button--prev { + width: 30px; + height: 30px; + font-size: 20px; position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 10px; top:50%; - width: 3rem; - height: 3rem; - background-color: #FFF; + 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%; - background-color:beige; - cursor: pointer; - z-index: 1001; /* Sit on top of everything */ + color: white; + background: gray; } .carousel__button--prev { - left:0; + 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:23%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80px; + -webkit-transition: transform .5s; + transition:transform .5s; +} +.menu__list >li:last-child { + margin-right:0; +} +.menu__list>li>a { + text-decoration: none; + color:black } -.carousel__button--next { - right:0; +.menu__list>li:first-child { + background-color: #2591C0; } -.carousel__button--prev::after, -.carousel__button--next::after { - content: " "; - position: absolute; - width: 10px; - height: 10px; - top: 50%; - left: 54%; - border-right: 2px solid black; - border-bottom: 2px solid black; - transform: translate(-50%, -50%) rotate(135deg); +.menu__list>li:nth-child(2) { + background-color: #A90067; } -.carousel__button--next::after { - left: 47%; - transform: translate(-50%, -50%) rotate(-45deg); +.menu__list>li:nth-child(3) { + background-color: #008577; +} + +.menu__list>li:nth-child(4 ) { + background-color:#E65D16; } \ No newline at end of file From 6eddfad9389262824dce8879f9b075fd5353f66f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Thu, 20 Feb 2020 16:01:00 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index d2ece4c4..ad51ef64 100644 --- a/index.js +++ b/index.js @@ -56,4 +56,4 @@ window.addEventListener('DOMContentLoaded',(e)=>{ carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; menuList[targetIndex].style.transform ='scale(1.1)'; new Carousel(targetIndex); -}) \ No newline at end of file +}) From 9ff0265ca849a3a5621a58fed1be226029146637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 26 Feb 2020 15:58:12 +0900 Subject: [PATCH 4/7] =?UTF-8?q?end.=20=ED=81=B4=EB=9E=98=EC=8A=A4=20?= =?UTF-8?q?=ED=95=98=EB=82=98=EB=A1=9C=20=EC=B9=B4=EB=93=9C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 68 ++---------------------------- index.js | 110 +++++++++++++++++++++++++++---------------------- localData.json | 35 ++++++++++++++++ style.css | 21 ++++++---- 4 files changed, 113 insertions(+), 121 deletions(-) create mode 100644 localData.json diff --git a/index.html b/index.html index 1bf02e63..1a32a32a 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - @@ -13,73 +12,13 @@
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
- +
@@ -91,6 +30,7 @@

Enjoy exclusive savings and rewards

- + + - \ No newline at end of file + diff --git a/index.js b/index.js index ad51ef64..5755226a 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,71 @@ -const menuNav =document.querySelector('.menu__list'); -const carouselSlider = document.querySelector('.carousel__container') -const prevBtn = document.querySelector('.carousel__button--prev'); -const nextBtn = document.querySelector('.carousel__button--next'); - -const menuList = Array.from(menuNav.children); -const menuListWidth = menuList[0].getBoundingClientRect().width; - -const sliderList = Array.from(carouselSlider.children); -const sliderListWidth= sliderList[0].getBoundingClientRect().width; - - -let targetIndex; - class Carousel { - constructor(targetIndex) { - this.targetIndex = targetIndex; - this.moveCarouselMenu(this.targetIndex); + constructor (menuData,contentData) { + this.menuData=menuData; + this.contentData=contentData; + this.makingMenuList(); + this.makingSlider(); this.btnHandler(); + this.count = 0; } - moveCarouselTarget =(index)=>{ - carouselSlider.style.transform = `translateX(-${sliderListWidth*index}px)`; + changeLocation (element,index) { + this.count = index; + const width = element.children[0].getBoundingClientRect().width; + element.style.transform = `translateX(${-this.count*width}px)`; } - moveCarouselMenu =(targetIndex)=>{ - this.moveMenuItem(targetIndex); - menuList.forEach((li,index)=>{ - li.addEventListener('click',()=>{ - this.moveMenuItem(index) - this.moveCarouselTarget(index); - }); - }); + 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)'; } - moveMenuItem = (targetIndex)=>{ - menuList.forEach((item)=>{ - item.style.transform='scale(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); + }); }) - menuList[targetIndex].style.transform = 'scale(1.1)'; - } - btnHandler() { - prevBtn.addEventListener('click',(e)=>{ - this.targetIndex--; - if (this.targetIndex <0) this.targetIndex=3; - this.moveCarouselTarget(this.targetIndex); - this.moveMenuItem(this.targetIndex); + } + makingMenuList () { + const menuConatiner=document.querySelector('.menu__list') + this.menuData.forEach((data)=>{ + menuConatiner.innerHTML +=` +
  • ${data}
    • ` }) - nextBtn.addEventListener('click',(e)=>{ - this.targetIndex++; - if (this.targetIndex>3) this.targetIndex=0; - this.moveCarouselTarget(this.targetIndex) - this.moveMenuItem(this.targetIndex) + 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)=>` +
    +
    +
      +

      ${data.title}

      + ${data.desc.map((desc)=>`
    • ${desc}
      • `).join('')} +
    +
    +
    + +
    +
    `).join(''); + } } -window.addEventListener('DOMContentLoaded',(e)=>{ - targetIndex=Math.floor(Math.random()*menuList.length); - carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; - menuList[targetIndex].style.transform ='scale(1.1)'; - new Carousel(targetIndex); -}) + +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 index 0130a1f1..68b88bb1 100644 --- a/style.css +++ b/style.css @@ -24,14 +24,14 @@ body,html { display: flex; margin-top: 40px; width: 2450px; - height: 200px; + height: 220px; transition:transform .5s ease-in-out; -webkit-transition:transform .5s ease-in-out; } .carousel__contents { display: flex; width: 600px; - height: 200px; + height: 220px; position: relative; justify-content: center; align-items: center; @@ -40,21 +40,25 @@ body,html { width: 400px; display: inline-block; } +.carousel__container .carousel__text >ul>li { + margin: 3px 0; + font-size: 18px; +} .carousel__img { display: inline-block; - width: 180px; + width: 220px; } .carousel__img > img { - width: 60%; - height: 60%; + width: 70%; + height: 70%; border-radius: 50%; } .carousel__container .carousel__text { - width: 50%; - line-height: 1.3; + line-height: 1.4; } .carousel__container .carousel__text > ul { list-style: none; + font-weight: 500; } .carousel__button--prev { width: 30px; @@ -109,12 +113,13 @@ body,html { } .menu__list > li { text-align: center; - width:23%; + 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; } From 9f83dbe0e496ea5a103cea632a649dd32160e495 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Tue, 3 Mar 2020 12:01:31 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Add.=20search.html/css=EC=B6=94=EA=B0=80,30?= =?UTF-8?q?0ms=EC=9E=90=EB=8F=99=EC=99=84=EC=84=B1=20=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=ED=95=B4=EC=95=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- search.css | 54 +++++++++++++++++++++++++++++++ search.html | 21 +++++++++++++ search.js | 84 +++++++++++++++++++++++++++++++++++++++++++++++++ searchData.json | 3 ++ 4 files changed, 162 insertions(+) create mode 100644 search.css create mode 100644 search.html create mode 100644 search.js create mode 100644 searchData.json diff --git a/search.css b/search.css new file mode 100644 index 00000000..d44b349f --- /dev/null +++ b/search.css @@ -0,0 +1,54 @@ +* { box-sizing: border-box; } +body { + font: 16px Arial; +} +.form-container { + margin-top: 20px; + width: 100%; + display: flex; + justify-content: center; +} +.autocomplete { + /*the container must be positioned relative:*/ + position: relative; + display: inline-block; + width: 350px; +} +input { + border: 1px solid transparent; + border-radius: 25px; + background-color: #f1f1f1; + padding: 10px; + font-size: 16px; +} +input[type=text] { + background-color: #f1f1f1; + width: 100%; +} +input[type=submit] { + background-color: DodgerBlue; + color: #fff; +} +.autocomplete-items { + position: absolute; + border: 1px solid #d4d4d4; + border-bottom: none; + border-top: none; + z-index: 99; + top: 100%; + left: 0; + right: 0; +} +.autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; +} +.autocomplete-items div:hover { + background-color: #e9e9e9; +} +.autocomplete-active { + background-color: DodgerBlue !important; + color: #ffffff; +} \ No newline at end of file diff --git a/search.html b/search.html new file mode 100644 index 00000000..3267917b --- /dev/null +++ b/search.html @@ -0,0 +1,21 @@ + + + + + + + + Document + + +
    +
    +
    + +
    + +
    +
    + + + \ No newline at end of file diff --git a/search.js b/search.js new file mode 100644 index 00000000..a5c8f6b6 --- /dev/null +++ b/search.js @@ -0,0 +1,84 @@ +class Search { + constructor (data,{autoComplete,input}) { + this.autoComplete = autoComplete; + this.data = data; + this.input = input; + this.autoCompleteItems; + this.currentTargetIndex=-1; + this.handleInputChange(); + this.handleKeyDown(); + this.closeAllList() + } + handleInputChange () { + this.input.addEventListener('input',(e)=>{ + const value = this.input.value; + if (!value) return; + const autoCompleteItemsExits = !!document.querySelector('.autocomplete-items'); + if (autoCompleteItemsExits) { + this.autoCompleteItems.parentNode.removeChild(this.autoCompleteItems); + } + this.autoCompleteItems = document.createElement('div'); + this.autoCompleteItems.classList.add('autocomplete-items') + this.autoComplete.appendChild(this.autoCompleteItems); + this.data.forEach((dataValue)=>{ + if (dataValue.substring(0,value.length).toUpperCase()===value.toUpperCase()) { + const contentDiv = document.createElement('div'); + contentDiv.innerHTML=`${dataValue.substring(0,value.length)}${dataValue.substring(value.length)}` + this.autoCompleteItems.appendChild(contentDiv); + contentDiv.addEventListener('click',(e)=>{ + this.input.value = e.target.querySelector('input').value; + }) + } + }) + }) + } + closeAllList () { + document.addEventListener('click',(e)=>{ + e.preventDefault(); + const itemContainer=document.querySelector('.autocomplete-items'); + if (!itemContainer) return; + if (e.target!==this.input && e.target!==itemContainer ) { + itemContainer.parentNode.removeChild(itemContainer); + } + }) + } + handleKeyDown () { + this.input.addEventListener('keydown',(e)=>{ + if (e.which === 40) { + this.currentTargetIndex++; + if (!this.autoCompleteItems) return; + let checkOutOfListIndex=this.currentTargetIndex >= this.autoCompleteItems.children.length; + if (checkOutOfListIndex) this.currentTargetIndex=0; + Array.from(this.autoCompleteItems.children).forEach((item)=>{ + item.classList.remove('autocomplete-active')}); + this.autoCompleteItems.children[this.currentTargetIndex].classList.add('autocomplete-active'); + } else if (e.which === 38) { + this.currentTargetIndex--; + if (!this.autoCompleteItems) return; + let checkOutOfListIndex=this.currentTargetIndex < 0; + if (checkOutOfListIndex) this.currentTargetIndex=this.autoCompleteItems.children.length-1; + Array.from(this.autoCompleteItems.children).forEach((item)=>{ + item.classList.remove('autocomplete-active')}); + this.autoCompleteItems.children[this.currentTargetIndex].classList.add('autocomplete-active'); + } else if (e.which === 13) { + e.preventDefault(); + if (this.currentTargetIndex > -1) { + this.autoCompleteItems.children[this.currentTargetIndex].click(); + } + } + }) + } +} + +window.addEventListener('DOMContentLoaded',()=>{ + fetch('./searchData.json') + .then((data)=>data.json()) + .then((searchData)=>{ + const targetElement= { + autoComplete : document.querySelector('.autocomplete'), + input : document.querySelector('input#searchBar') + } + const search = new Search(searchData.data,targetElement); + }); +}) + diff --git a/searchData.json b/searchData.json new file mode 100644 index 00000000..73200eda --- /dev/null +++ b/searchData.json @@ -0,0 +1,3 @@ +{ + "data" :["Korea","Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"] +} From df790ed62f9ef6b7c9404a558208f4f07426bcb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Tue, 3 Mar 2020 12:46:31 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Add=20=ED=98=84=EC=9E=AC=EC=84=A0=ED=83=9D?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=92=20input=EA=B0=92?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=98=EC=98=81+=ED=95=B4=EB=8B=B9?= =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20300ms=ED=9B=84=EC=97=90=20=EB=93=9C?= =?UTF-8?q?=EB=9F=AC=EB=82=98=EA=B2=8C=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- search.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/search.js b/search.js index a5c8f6b6..d3a793cc 100644 --- a/search.js +++ b/search.js @@ -20,7 +20,8 @@ class Search { this.autoCompleteItems = document.createElement('div'); this.autoCompleteItems.classList.add('autocomplete-items') this.autoComplete.appendChild(this.autoCompleteItems); - this.data.forEach((dataValue)=>{ + const addList =()=>{ + this.data.forEach((dataValue)=>{ if (dataValue.substring(0,value.length).toUpperCase()===value.toUpperCase()) { const contentDiv = document.createElement('div'); contentDiv.innerHTML=`${dataValue.substring(0,value.length)}${dataValue.substring(value.length)}` @@ -29,7 +30,11 @@ class Search { this.input.value = e.target.querySelector('input').value; }) } - }) + }) + } + setTimeout(()=>{ + addList(); + },300) }) } closeAllList () { @@ -45,13 +50,16 @@ class Search { handleKeyDown () { this.input.addEventListener('keydown',(e)=>{ if (e.which === 40) { - this.currentTargetIndex++; - if (!this.autoCompleteItems) return; - let checkOutOfListIndex=this.currentTargetIndex >= this.autoCompleteItems.children.length; - if (checkOutOfListIndex) this.currentTargetIndex=0; - Array.from(this.autoCompleteItems.children).forEach((item)=>{ - item.classList.remove('autocomplete-active')}); - this.autoCompleteItems.children[this.currentTargetIndex].classList.add('autocomplete-active'); + this.currentTargetIndex++; + if (!this.autoCompleteItems) return; + let checkOutOfListIndex=this.currentTargetIndex >= this.autoCompleteItems.children.length; + if (checkOutOfListIndex) this.currentTargetIndex=0; + Array.from(this.autoCompleteItems.children).forEach((item)=>{ + item.classList.remove('autocomplete-active')}); + let choosedTarget =this.autoCompleteItems.children[this.currentTargetIndex]; + choosedTarget=this.autoCompleteItems.children[this.currentTargetIndex]; + choosedTarget.classList.add('autocomplete-active'); + this.input.value = choosedTarget.querySelector('input').value } else if (e.which === 38) { this.currentTargetIndex--; if (!this.autoCompleteItems) return; @@ -59,7 +67,10 @@ class Search { if (checkOutOfListIndex) this.currentTargetIndex=this.autoCompleteItems.children.length-1; Array.from(this.autoCompleteItems.children).forEach((item)=>{ item.classList.remove('autocomplete-active')}); - this.autoCompleteItems.children[this.currentTargetIndex].classList.add('autocomplete-active'); + let choosedTarget =this.autoCompleteItems.children[this.currentTargetIndex]; + choosedTarget=this.autoCompleteItems.children[this.currentTargetIndex]; + choosedTarget.classList.add('autocomplete-active'); + this.input.value = choosedTarget.querySelector('input').value } else if (e.which === 13) { e.preventDefault(); if (this.currentTargetIndex > -1) { From 521364998b44101d890a223bb8fd31e59f672f48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 4 Mar 2020 10:37:38 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Add=20=EC=95=84=EB=A7=88=EC=A1=B4=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- img/logo.png | Bin 0 -> 2181 bytes search.css | 24 ++++++++++++++++++++---- search.html | 19 ++++++++++++------- 3 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 img/logo.png diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..927cc41e4d6451ab5cd688eaa351038866c40a39 GIT binary patch literal 2181 zcmb7G`9ISS1NT%fNXz&-mPVK(A-)!B@-<-_5}BJ3k?SjxjXBob zSFRjk$URpHbIg(3`1tuTrlux-f&i6DMWIldnwnu@VL+k) zKSclvg~DL4w6wI1jSW9PKSxK$?(S|+PtX4T{;H}fH8nLZmpe8#Ha|aq>eQ*?;$jMg z;_B*ZX=#Z-Akb*^#fukna&n}lr2)Dz|6q&1%jM6ugTY`uJw0Hu3K*sHxq|@13Rvt0 zYCM5VD8D%fV7&zfKLFtZKnWVC!vo(x0UJMn)@UF{8K7zdOvk&Q#D)X}PP{bM*R>>M ztfaczEg6ZBkLru{=?gMDKEXS4BBuQRwa(|$zw{5?jSvd$?&$WOGJURx<2qbh z==jm9K{Z{;=MwBy_JWZ#zE_*>qO~0lp@2i~hUJ~kABli7ATM-Su{~oXgDuEJYP~4y z^_BMl@+mU>B~g&;R+Rso=<1ziXhm7YLQxyUMl&EtC)aEh=B`%#r9DZTvGFsu`C;G8 z1i9GNl8n(?#eEjD+223REmYavF6b=6`WS)84H(T+jzM^^chQOJQZdtMv2!HrxAYEB z`aK^J6#eX;vwci`muCmpQF(b^`p3ZaAtCcoOcq|qAn4fa@xWfhUVyj@`I{I)U8UL1 zPlTkqGEn@u`lYHL3V~CnVSKixcn9MuNFCwDeAW~XsV97{4P3)+lrYO1_C)_TB> zXhzGE^wrHc^C5@)@VdhST(vS4+%U*Jp5p)aA2N6Xcr+C^X zVg+5n>Icl`M;LSS>bRnK+R)~G5Ie$+?dGWDvJhLae_jo}{u&GVTX!+cp|6f^3}PF0 zWfhr~xJ1_{-NAGeDDAM)b)z}PRtu8kxQr$+*}eu9nLaiRy@r(aPx1B6Ywp&?0qE%n zo#*fRs)W-MAdeTFql-f!Ovb9eJoM{%Q8Gz?H8T6k076|(X||d&GJ!^YR2U{=6uT9& z`x5FmCCPpXAeg9?3%TyWylzpOYTvE(g6ua8`h5nY>PwZsk>tU&rIMQG8l=GyH8GP&3|IrYEH9| zaJMT>j_uo>W#@~9i;;ncg4sBud34Jn6+>fzDFmlp(Lk~t31cVjn zHh}M;ol;Vy@PEe#*?RJ?M$0@Iom@?||I z4~3~Rpeu6MjceBOl4v1YZ!?euYlleW?VbFLocOHDS!h(_;2nwaJCL=j55$i8#cGy0 zFi*n3IWk(jq)?5D8Aw!fNr^aht^~Y4?z7sUQO9sjJJY@Qo;Fe&^MtAxQ^>xx+JIS* z()vrzi@d~sv=mkDS?7aC-V=+G$J{`|RgZ(#YDQWLoLt6n{t&6^K?_-0oGDYaKH0JF zF}s@Ez9|M?LLEM1cwa)CBgvN9oH-Fp%8Q>5M?rkVi9>0*$VD@LlkgLJEomNdTEaiT zi}r1u)9`gxyUF+9dq!y|U&4H*_s<`S8G$(&oy1VbU|Y!DiyLSqv5ypEpx_h<)))j9Cs~ZJUnO zAnhYL^0F=S>uz=&Ej%lu(}jP~`|KkzfJjU&87S6Q)7{k!pQC%Qxw)JKLRr5%%>BJr zY8EVWt=^EMt}KIOI!5I3iq|1ZTgoVEoCn} z0^#MpkufT=d0BZ9hnKzok@;3GpZ;cr^lJO+*Ro9d&kL`~kDTmu&y;3;o9Ui?UP`*I z(%aYxp~ZUmXKjh}Vr#Cwa`CVmeo=qZT{&f~!DFB|IC-UnQ>0B!x!J_>nzbR}1wtq%^EmQLC95vB+us-pNFHo`1Fma%< z#o?5lit0Uy_CQc{ecuA>18e}bmSxSIthFm9;5gBhlcejw&wYJJT1BC&%!A~-!vh6O zKyLu5&kQ`)g-Fhij_o=LJN%(MLkZD2<)Ugx%I_QM;A zi=35SO_lbuYoR}8yen-CLEwl-$E(l9tckSW OE#p7X`o+jcA^!!a=t5`! literal 0 HcmV?d00001 diff --git a/search.css b/search.css index d44b349f..1da0e535 100644 --- a/search.css +++ b/search.css @@ -1,9 +1,25 @@ -* { box-sizing: border-box; } +* { + margin: 0; + padding: 0; + box-sizing: content-box; +} body { font: 16px Arial; } +header { + padding: 15px; + display: flex; + height: 40px; + justify-content: space-between; + align-items: center; + background-color: #242F40; +} +.logo { + display: block; + width: 70px; + height: 40px; +} .form-container { - margin-top: 20px; width: 100%; display: flex; justify-content: center; @@ -16,14 +32,14 @@ body { } input { border: 1px solid transparent; - border-radius: 25px; + border-radius: 5px; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type=text] { background-color: #f1f1f1; - width: 100%; + width: 94%; } input[type=submit] { background-color: DodgerBlue; diff --git a/search.html b/search.html index 3267917b..94e6b756 100644 --- a/search.html +++ b/search.html @@ -8,14 +8,19 @@ Document -
    -
    -
    - +
    +
    + +
    +
    + +
    + +
    + +
    - - -
    + \ No newline at end of file