From 80ae89f920f7f7292f335a9e1240e865a2aabaa3 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 12 Sep 2022 19:14:08 +0300 Subject: [PATCH] [main] Added dropdown-list! --- .prettierrc | 6 ++++ README.md | 2 -- src/index.html | 29 ++++++++++++++++ src/index.js | 27 +++++++++++++++ src/main.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 .prettierrc delete mode 100644 README.md create mode 100644 src/index.html create mode 100644 src/index.js create mode 100644 src/main.css diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..5cb34ea --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "printWidth": 100, + "singleQuote": true, + "trailingComma": "all", + "semi": true +} \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 76fcf32..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Dropdown-list -This Dropdown-list component diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..8db3bef --- /dev/null +++ b/src/index.html @@ -0,0 +1,29 @@ + + + + + + + Dropdown-list + + + +
+
+
+ BMW +
+
+ +
    +
  • Nissan
    • +
  • Mersedes
    • +
  • Ford
    • +
  • Opel
    • +
  • Chevrolet
    • +
+
+
+ + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..d23f85d --- /dev/null +++ b/src/index.js @@ -0,0 +1,27 @@ +const dropdowns = document.querySelectorAll('.dropdown'); + +dropdowns.forEach(drop => { + const select = drop.querySelector('.select'); + const caret = drop.querySelector('.caret'); + const list = drop.querySelector('.list'); + const options = drop.querySelectorAll('.list__item') + const selected = drop.querySelector('.selected') + + select.addEventListener('click', () => { + caret.classList.toggle('caret-rotate'); + list.classList.toggle('open'); + }); + + options.forEach(option => { + option.addEventListener('click', () =>{ + selected.innerText = option.innerText; + caret.classList.remove('caret-rotate'); + list.classList.remove('open'); + + options.forEach(option =>{ + option.classList.remove('active'); + }) + option.classList.add('active'); + }) + }) +}) \ No newline at end of file diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..7fc6439 --- /dev/null +++ b/src/main.css @@ -0,0 +1,93 @@ +* { + font-size: 14px; + font-family: Arial, Helvetica, sans-serif; + +} +body{ + background: #1b1e25; +} + +.container { + margin: 50px auto; + width: 800px; + height: 200px; +} + +.dropdown { + + position: relative; +} + +.select { + padding: 14px; + max-width: 200px; + height: 30px; + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + + background: #2a2f3b; + cursor: pointer; + border-radius: 5px; + transition: 0.5s; +} + +.select:hover { +transition: 0.5s; + background: #394050; +} + +.caret { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #fff; + transition: 0.5s; +} + +.caret-rotate { + transform: rotate(180deg); + transition: 0.5s; +} + +.list { + position: absolute; + width: 212px; + padding: 7px; + margin-top: 1px; + list-style: none; + + color: white; + background: #2a2f3b; + border: 1px #0a0b0e solid; + box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + border-radius: 5px; + transition: 0.5s; + + opacity: 0; + display: none; + z-index: 1; +} + +.list__item { + transition: 0.5s; + padding: 15px; +} + +.list__item:hover { + transition: 0.5s; + cursor: pointer; + background: #394050; +} + +.active { + background: #394050; +} +.open { + + transition: 0.5s; + display: block; + opacity: 1; +}