From 6f02f4371d244bc542647fd69092d3311c61214a Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Sat, 1 Apr 2023 03:51:13 +0300
Subject: [PATCH] Add files via upload
---
100_projects/39-custom-select-menu/index.html | 26 +++++
100_projects/39-custom-select-menu/script.js | 41 +++++++
100_projects/39-custom-select-menu/style.css | 105 ++++++++++++++++++
3 files changed, 172 insertions(+)
create mode 100644 100_projects/39-custom-select-menu/index.html
create mode 100644 100_projects/39-custom-select-menu/script.js
create mode 100644 100_projects/39-custom-select-menu/style.css
diff --git a/100_projects/39-custom-select-menu/index.html b/100_projects/39-custom-select-menu/index.html
new file mode 100644
index 0000000..6c2acf5
--- /dev/null
+++ b/100_projects/39-custom-select-menu/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/39-custom-select-menu/script.js b/100_projects/39-custom-select-menu/script.js
new file mode 100644
index 0000000..52dae56
--- /dev/null
+++ b/100_projects/39-custom-select-menu/script.js
@@ -0,0 +1,41 @@
+const menu = document.querySelector(".menu"),
+selectBtn = menu.querySelector(".select-btn"),
+searchInp = menu.querySelector("input"),
+options = menu.querySelector(".options");
+
+let countries = ["Saudi Arabia","Qatar", "Yemen","Kuwait", "Emarat","Oman", "Bahrain","Afghanistan",
+ "Algeria", "Argentina", "Australia", "Bangladesh", "Belgium", "Bhutan",
+ "Brazil", "Canada", "China", "Denmark", "Ethiopia", "Finland", "France", "Germany",
+ "Hungary", "Iceland", "India", "Indonesia", "Iran", "Italy", "Japan", "Malaysia",
+ "Maldives", "Mexico", "Morocco", "Netherlands", "Nigeria", "Norway", "Pakistan",
+ "Peru", "Russia", "Romania", "South Africa", "Spain", "Sri Lanka", "Sweden", "Switzerland",
+ "Thailand", "Turkey", "Uganda", "Ukraine", "United States", "United Kingdom", "Vietnam"];
+
+function addCountry(selectedCountry) {
+ options.innerHTML = "";
+ countries.forEach(country => {
+ let isSelected = country == selectedCountry ? "selected" : "";
+ let li = `${country}`;
+ options.insertAdjacentHTML("beforeend", li);
+ });
+}
+addCountry();
+
+function updateName(selectedLi) {
+ searchInp.value = "";
+ addCountry(selectedLi.innerText);
+ menu.classList.remove("active");
+ selectBtn.firstElementChild.innerText = selectedLi.innerText;
+}
+searchInp.addEventListener("keyup", () => {
+ let arr = [];
+ let searchWord = searchInp.value.toLowerCase();
+ arr = countries.filter(data => {
+ return data.toLowerCase().startsWith(searchWord);
+ }).map(data => {
+ let isSelected = data == selectBtn.firstElementChild.innerText ? "selected" : "";
+ return `${data}`;
+ }).join("");
+ options.innerHTML = arr ? arr : `Oops! Country not found
`;
+});
+selectBtn.addEventListener("click", () => menu.classList.toggle("active"));
\ No newline at end of file
diff --git a/100_projects/39-custom-select-menu/style.css b/100_projects/39-custom-select-menu/style.css
new file mode 100644
index 0000000..265dd83
--- /dev/null
+++ b/100_projects/39-custom-select-menu/style.css
@@ -0,0 +1,105 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ background: #BDB76B;
+}
+::selection{
+ color: #fff;
+ background: #BDB76B;
+}
+.menu{
+ width: 350px;
+ margin: 85px auto 0;
+}
+.select-btn, li{
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+.select-btn{
+ height: 60px;
+ padding: 10px 20px;
+ font-size: 22px;
+ background: #fff;
+ border-radius: 7px;
+ justify-content: space-between;
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+.select-btn i{
+ font-size: 31px;
+ transition: transform 0.3s linear;
+}
+.menu.active .select-btn i{
+ transform: rotate(-180deg);
+}
+.content{
+ display: none;
+ padding: 20px;
+ margin-top: 15px;
+ background: #fff;
+ border-radius: 7px;
+ box-shadow: 5px 10px 25px rgba(0,0,0,0.1);
+}
+.menu.active .content{
+ display: block;
+}
+.content .search{
+ position: relative;
+}
+.search i{
+ top: 50%;
+ left: 15px;
+ color: #999;
+ font-size: 20px;
+ pointer-events: none;
+ transform: translateY(-50%);
+ position: absolute;
+}
+.search input{
+ height: 50px;
+ width: 100%;
+ outline: none;
+ font-size: 17px;
+ border-radius: 5px;
+ padding: 0 20px 0 43px;
+ border: 1px solid #B3B3B3;
+}
+.search input:focus{
+ padding-left: 42px;
+ border: 2px solid #BDB76B;
+}
+.search input::placeholder{
+ color: #bfbfbf;
+}
+.content .options{
+ margin-top: 10px;
+ max-height: 250px;
+ overflow-y: auto;
+ padding-right: 7px;
+}
+.options::-webkit-scrollbar{
+ width: 7px;
+}
+.options::-webkit-scrollbar-track{
+ background: #f1f1f1;
+ border-radius: 25px;
+}
+.options::-webkit-scrollbar-thumb{
+ background: #ccc;
+ border-radius: 25px;
+}
+.options::-webkit-scrollbar-thumb:hover{
+ background: #b3b3b3;
+}
+.options li{
+ height: 50px;
+ padding: 0 13px;
+ font-size: 21px;
+}
+.options li:hover, li.selected{
+ border-radius: 5px;
+ background: #f2f2f2;
+}
\ No newline at end of file