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 + + + + + +
+
+ Select Your Country + +
+
+
+ + +
+ +
+
+ + + \ 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