diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..526e2f05 --- /dev/null +++ b/.gitignore @@ -0,0 +1,216 @@ + +# Created by https://www.gitignore.io/api/osx,node,sublimetext,visualstudiocode +# Edit at https://www.gitignore.io/?templates=osx,node,sublimetext,visualstudiocode + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# rollup.js default build output +dist/ + +# Uncomment the public line if your project uses Gatsby +# https://nextjs.org/blog/next-9-1#public-directory-support +# https://create-react-app.dev/docs/using-the-public-folder/#docsNav +# public + +# Storybook build outputs +.out +.storybook-out + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# Temporary folders +tmp/ +temp/ + +### OSX ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### SublimeText ### +# Cache files for Sublime Text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# Workspace files are user-specific +*.sublime-workspace + +# Project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using Sublime Text +# *.sublime-project + +# SFTP configuration file +sftp-config.json + +# Package control specific files +Package Control.last-run +Package Control.ca-list +Package Control.ca-bundle +Package Control.system-ca-bundle +Package Control.cache/ +Package Control.ca-certs/ +Package Control.merged-ca-bundle +Package Control.user-ca-bundle +oscrypto-ca-bundle.crt +bh_unicode_properties.cache + +# Sublime-github package stores a github token in this file +# https://packagecontrol.io/packages/sublime-github +GitHub.sublime-settings + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history + +# End of https://www.gitignore.io/api/osx,node,sublimetext,visualstudiocode + +#---------------------------------------# +# Project Ignores # +#---------------------------------------# + +# output +/.temp +/.tmp +/build +/dist + +# dependencies +/node_modules +.package.swp + +# linters +.eslintcache/ +.eslintrc +.eslintrc.yaml +.eslintrc.json +.eslintrc.js +.stylelintcache/ +.stylelintrc +.stylelintrc.yaml +.stylelintrc.json +.stylelintrc.js + +# misc +/connect.lock +/coverage/* +/report_* +/reports/ +.sass-cache/ +*.log diff --git a/README.md b/README.md index e70983a3..702b1f39 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # javascript-amazon 레벨3 +[데모 페이지](https://sally4405.github.io/demoPage/amazon/amazon.html) \ No newline at end of file diff --git a/amazon.css b/amazon.css new file mode 100644 index 00000000..0b9118e3 --- /dev/null +++ b/amazon.css @@ -0,0 +1,132 @@ +* { + box-sizing: content-box; +} + +ul { + padding: 0; + margin: 0; +} + +.card-container { + display: flex; + flex-direction: column; + padding: 30px 50px; + position: relative; +} + +.menu-list { + display: flex; +} + +.menu-list>li { + display: flex; + width: 200px; + height: 30px; + padding: 20px; + margin: 40px 5px; + text-align: center; + align-items: center; + justify-content: center; +} + +.menu-list>li>p { + color: white; + font-size: 20px; + font-weight: bold; +} + +.menu-list>li:nth-child(1) { + background-color: #DE9A24; +} + +.menu-list>li:nth-child(2) { + background-color: #FEC7C7; +} + +.menu-list>li:nth-child(3) { + background-color: #7694B5; +} + +.menu-list>li:nth-child(4) { + background-color: #614C15; +} + +.content { + display: flex; + vertical-align: middle; + width: 929px; +} + +button { + line-height: 30px; + width: 30px; + height: 30px; + margin: 0 10px; + font-size: 20px; + border: none; + border-radius: 50%; + background-color: #A9B7B8; + color: white; + position: absolute; + top: 100%; +} + +#left-button { + left: 5%; +} + +#right-button { + right: 5%; +} + + +.content-container-parent { + position: absolute; + left: 8%; + display: flex; + width: 841px; + height: 250px; + overflow: hidden; +} + +.content-container-childs{ + width: 3364px; +} + +.content-container-child{ + display: flex; + width: 841px; + justify-content: space-around; +} + +.content-container-child__img { + width: 250px; + height: 250px; +} + +.content-container-child__text { + width: 500px; + height: 250px; +} + +.content-container-child__text-title { + font-size: 30px; + font-weight: bold; +} + +.content-container-child__text-description { + font-size: 15px; + margin-top: 5px; + margin-bottom: 15px; + font-weight: bold; +} + +.content-container-child__text-list { + font-size: 13px; +} + +.content-container-child__text > ul > li { + list-style: none; + color: #949494; + line-height: 20px; +} \ No newline at end of file diff --git a/amazon.html b/amazon.html new file mode 100644 index 00000000..ff5d1566 --- /dev/null +++ b/amazon.html @@ -0,0 +1,154 @@ + + + + + + + + Document + + + + + + +
+
+ +
+ +
+ + +
+
+
+ +
+
+ RYAN +
+
+ 갈기가 없는 것이 콤플렉스인 수사자 +
+
    +
  • + 꼬리가 길면 잡히기 때문에, 꼬리가 짧습니다. +
    • +
  • + 큰 덩치와 무뚝뚝한 표정으로 오해를 많이 사지만, +
    • +
  • + 사실 누구보다도 여리고 섬세한 소녀감성을 지닌 반전 매력의 소유자! +
    • +
  • + 원래 아프리카 둥둥섬 왕위 계승자였으나, 자유로운 삶을 동경해 탈출! +
    • +
  • + 카카오프렌즈의 든든한 조언자 역할을 맡고 있습니다. +
    • +
+
+
+ +
+ +
+
+ APEACH +
+
+ 복숭아 나무에서 탈출한 악동 복숭아 +
+
    +
  • + 유전자 변이로 자웅동주가 된 것을 알고 +
    • +
  • + 복숭아 나무에서 탈출한 악동 복숭아 어피치! +
    • +
  • + 섹시한 뒷태로 사람들을 매혹시키며, +
    • +
  • + 성격이 매우 급하고 과격합니다. +
    • +
+
+
+ +
+ +
+
+ NEO +
+
+ 패셔니스타 네오 +
+
    +
  • + 자기 자신을 가장 사랑하는 새침한 고양이 네오. +
    • +
  • + 쇼핑을 좋아하는 이 구역의 대표 패셔니스타입니다. +
    • +
  • + 하지만 도도한 자신감의 근원이 단발머리 ‘가발’에서 나온다는 건 비밀! +
    • +
+
+
+ +
+ +
+
+ JAY-G +
+
+ 힙합을 사랑하는 자유로운 영혼 +
+
    +
  • + 땅속 나라 고향에 대한 향수병이 있는 비밀요원 제이지! +
    • +
  • + 사명의식이 투철하여 냉철해보이고 싶으나, 실은 어리버리합니다. +
    • +
  • + 겉모습과 달리 알고보면 외로움을 많이 타는 여린 감수성의 소유자. +
    • +
  • + 힙합 가수 Jay-Z의 열혈팬입니다. +
    • +
+
+
+ +
+
+ + + +
+ + + +
+ + \ No newline at end of file diff --git a/amazon.js b/amazon.js new file mode 100644 index 00000000..be694bd8 --- /dev/null +++ b/amazon.js @@ -0,0 +1,72 @@ +class TargetInfo { + constructor(firstIndex, containerTarget, menuList) { + this.containerTarget = containerTarget; + this.menuList = menuList; + this.targetIndex = firstIndex; + } + + handler() { + this.containerTarget.style.transform = `translateY(${this.targetIndex * (-250)}px)`; + this.resize(); + } + + resize() { + this.menuList.forEach(element => { + element.style.transform = "scale(1, 1)"; + }) + this.menuList[this.targetIndex].style.transform = "scale(1.09, 1.09)"; + } +} + + +class SlideService { + constructor(firstIndex, containerTarget, menuList) { + this.target = new TargetInfo(firstIndex, containerTarget, menuList); + this.onButtonHandler(); + this.onMenuHandler(); + + } + + onButtonHandler() { + let [left, right] = document.querySelectorAll("button"); + + left.addEventListener("mousedown", () => { + this.target.targetIndex--; + if (this.target.targetIndex < 0) this.target.targetIndex = 3; + console.log("left click!") + this.target.handler(); + }); + right.addEventListener("mousedown", () => { + this.target.targetIndex++; + if (this.target.targetIndex > 3) this.target.targetIndex = 0; + console.log("right click!") + this.target.handler(); + }); + } + + onMenuHandler() { + let menuList = document.querySelectorAll(".menu-list>li") + + for (let i = 0; i < menuList.length; i++) { + menuList[i].addEventListener("mousedown", () => { + this.target.targetIndex = i; + this.target.handler(); + }); + } + } +} + +window.addEventListener('DOMContentLoaded', () => { + console.log('DOM fully loaded and parsed'); + + let firstIndex = (parseInt(Math.random() * 4)); + console.log(firstIndex); + + const containerTarget = document.querySelector(".content-container-childs"); + const menuList = document.querySelectorAll(".menu-list>li"); + + containerTarget.style.transform = `translateY(${firstIndex * (-250)}px)`; + menuList[firstIndex].style.transform = "scale(1.09, 1.09)"; + + const ss = new SlideService(firstIndex, containerTarget, menuList); +}); \ No newline at end of file