diff --git a/Add New Languages.js b/Add New Languages.js
new file mode 100644
index 0000000..67a561d
--- /dev/null
+++ b/Add New Languages.js
@@ -0,0 +1,54 @@
+(function () {
+ const input = document.querySelector("input");
+ const ul = document.querySelector("ul");
+ const lis = document.querySelectorAll("li");
+ const currentValue = input.value;
+ [
+ "Bafang",
+ "Bulu",
+ "Fulfulde",
+ "Ghomala",
+ "Makaa",
+ "Medumba",
+ "Nufi",
+ "Nuguru",
+ "Yemba"
+ ].forEach(lang => {
+ const li = document.createElement("li");
+ li.dataset.lang = lang.toLowerCase();
+ try {
+ if (visibleStateCssRule) {
+ li.dataset.value = lang.toLowerCase();
+ if (!lang.toLowerCase().includes(currentValue)) {
+ li.classList.add("not-found");
+ }
+ ul.insertBefore(li,
+ [...lis].filter(({ dataset }) =>
+ dataset.value.toLowerCase() > lang.toLowerCase())[0]);
+ }
+ } catch {
+ li.appendChild(document.createTextNode(lang));
+ ul.insertBefore(li,
+ [...lis].filter(({ innerText }) =>
+ innerText.toLowerCase() > lang.toLowerCase())[0]);
+ }
+
+ });
+
+
+
+ const style = document.createElement("style");
+ document.querySelector("head")
+ .appendChild(style)
+ .appendChild(document.createTextNode(`[data-lang*="${currentValue}"]{background-color: rgb(29, 156, 29);li:not(&)[data-lang]{background-color: rgb(240, 53, 53);}}`))
+
+ input.oninput = async function () {
+ if (this.value != currentValue) return;
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ style.innerText = `[data-lang*="${currentValue}"]{background-color: white;transition: background-color 1000ms ease}`;
+ await new Promise(resolve => setTimeout(resolve, 1100));
+ style.remove();
+ this.oninput = undefined;
+ }
+
+})();
\ No newline at end of file
diff --git a/Add and Hide Waiting For Refresh.js b/Add and Hide Waiting For Refresh.js
new file mode 100644
index 0000000..299ea06
--- /dev/null
+++ b/Add and Hide Waiting For Refresh.js
@@ -0,0 +1,41 @@
+(function () {
+ const ul = document.querySelector("ul");
+ const lis = document.querySelectorAll("li");
+ [
+ "Bafang",
+ "Bulu",
+ "Fulfulde",
+ "Ghomala",
+ "Makaa",
+ "Medumba",
+ "Nufi",
+ "Nuguru",
+ "Yemba"
+ ].forEach(lang => {
+ const li = document.createElement("li");
+ li.classList.add("not-found");
+ li.dataset.lang = lang.toLowerCase();
+ li.appendChild(document.createTextNode(lang));
+ ul.insertBefore(li,
+ [...lis].filter(({ innerText }) =>
+ innerText.toLowerCase() > lang.toLowerCase())[0]);
+ });
+
+ const input = document.querySelector("input");
+ const currentValue = input.value;
+ const style = document.createElement("style");
+ document.querySelector("head")
+ .appendChild(style)
+ .appendChild(document.createTextNode(`[data-lang*="${currentValue}"]{background-color: rgb(29, 156, 29);li:not(&)[data-lang]{background-color: rgb(240, 53, 53);}}`))
+
+
+ input.oninput = async function () {
+ if (this.value != currentValue) return;
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ style.innerText = `[data-lang*="${currentValue}"]{background-color: white;transition: background-color 1000ms ease}`;
+ await new Promise(resolve => setTimeout(resolve, 1100));
+ style.remove();
+ this.oninput = undefined;
+ }
+
+})();
\ No newline at end of file
diff --git a/index.html b/index.html
deleted file mode 100644
index 007a7d3..0000000
--- a/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
- CSS Attribute Selector
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/main.js b/main.js
deleted file mode 100644
index 621e1ef..0000000
--- a/main.js
+++ /dev/null
@@ -1,247 +0,0 @@
-const LANGUAGE = (() => {
- const languages = [
- "Afar",
- "Afrikaans",
- "Aghem",
- "Akan",
- "Albanian",
- "Amharic",
- "Arabic",
- "Armenian",
- "Assamese",
- "Asturian",
- "Asu",
- "Azerbaijani",
- "Bafia",
- "Bamanankan",
- "Bangla",
- "Basaa",
- "Bashkir",
- "Basque",
- "Belarusian",
- "Bemba",
- "Bena",
- "Blin",
- "Bodo",
- "Bosnian",
- "Breton",
- "Bulgarian",
- "Burmese",
- "Catalan",
- "Cebuano",
- "Central Atlas Tamazight",
- "Central Kurdish",
- "Chakma",
- "Chechen",
- "Cherokee",
- "Chiga",
- "Chinese",
- "Church Slavic",
- "Colognian",
- "Cornish",
- "Corsican",
- "Croatian",
- "Czech",
- "Danish",
- "Divehi",
- "Duala",
- "Dutch",
- "Dzongkha",
- "Embu",
- "English",
- "Esperanto",
- "Estonian",
- "Ewe",
- "Ewondo",
- "Faroese",
- "Filipino",
- "Finnish",
- "French",
- "Friulian",
- "Fulah",
- "Galician",
- "Ganda",
- "Georgian",
- "German",
- "Greek",
- "Guarani",
- "Gujarati",
- "Gusii",
- "Hausa",
- "Hawaiian",
- "Hebrew",
- "Hindi",
- "Hungarian",
- "Icelandic",
- "Igbo",
- "Inari Sami",
- "Indonesian",
- "Interlingua",
- "Inuktitut",
- "Irish",
- "isiXhosa",
- "isiZulu",
- "Italian",
- "Japanese",
- "Javanese",
- "Jola-Fonyi",
- "Kabuverdianu",
- "Kabyle",
- "Kako",
- "Kalaallisut",
- "Kalenjin",
- "Kamba",
- "Kannada",
- "Kashmiri",
- "Kazakh",
- "Khmer",
- "Kikuyu",
- "Kinyarwanda",
- "Kiswahili",
- "Konkani",
- "Korean",
- "Koyra Chiini",
- "Koyraboro Senni",
- "Kwasio",
- "Kyrgyz",
- "K'iche'",
- "Lakota",
- "Langi",
- "Lao",
- "Latvian",
- "Lingala",
- "Lithuanian",
- "Low German",
- "Lower Sorbian",
- "Luba-Katanga",
- "Lule Sami",
- "Luo",
- "Luxembourgish",
- "Luyia",
- "Macedonian",
- "Machame",
- "Makhuwa-Meetto",
- "Makonde",
- "Malagasy",
- "Malay",
- "Malayalam",
- "Maltese",
- "Manx",
- "Maori",
- "Mapuche",
- "Marathi",
- "Masai",
- "Mazanderani",
- "Meru",
- "Meta'",
- "Mohawk",
- "Mongolian",
- "Morisyen",
- "Mundang",
- "N'Ko",
- "Nama",
- "Nepali",
- "Ngiemboon",
- "Ngomba",
- "North Ndebele",
- "Northern Luri",
- "Northern Sami",
- "Norwegian Bokmål",
- "Norwegian Nynorsk",
- "Nuer",
- "Nyankole",
- "Occitan",
- "Odia",
- "Oromo",
- "Ossetic",
- "Pashto",
- "Persian",
- "Polish",
- "Portuguese",
- "Prussian",
- "Punjabi",
- "Quechua",
- "Romanian",
- "Romansh",
- "Rombo",
- "Rundi",
- "Russian",
- "Rwa",
- "Saho",
- "Sakha",
- "Samburu",
- "Sango",
- "Sangu",
- "Sanskrit",
- "Scottish Gaelic",
- "Sena",
- "Serbian",
- "Sesotho",
- "Sesotho sa Leboa",
- "Setswana",
- "Shambala",
- "Shona",
- "Sindhi",
- "Sinhala",
- "siSwati",
- "Skolt Sami",
- "Slovak",
- "Slovenian",
- "Soga",
- "Somali",
- "South Ndebele",
- "Southern Sami",
- "Spanish",
- "Standard Moroccan Tamazight",
- "Swedish",
- "Swiss German",
- "Syriac",
- "Tachelhit",
- "Taita",
- "Tajik",
- "Tamil",
- "Tasawaq",
- "Tatar",
- "Telugu",
- "Teso",
- "Thai",
- "Tibetan",
- "Tigre",
- "Tigrinya",
- "Tongan",
- "Turkish",
- "Turkmen",
- "Ukrainian",
- "Upper Sorbian",
- "Urdu",
- "Uyghur",
- "Uzbek",
- "Vai",
- "Venda",
- "Vietnamese",
- "Volapük",
- "Vunjo",
- "Walser",
- "Welsh",
- "Western Frisian",
- "Wolaytta",
- "Wolof",
- "Xitsonga",
- "Yangben",
- "Yi",
- "Yiddish",
- "Yoruba",
- "Zarma"
- ];
- Object.freeze(languages);
- return languages;
-})();
-
-document.querySelector("main")
-.appendChild(document.createElement("ul"))
-.appendChild(LANGUAGE.reduce((fragment, language) => {
- const item = document.createElement("li");
- item.dataset.value = language.toLowerCase();
- fragment.appendChild(item);
- return fragment;
-}, document.createDocumentFragment()));
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index 93d32ab..0000000
--- a/style.css
+++ /dev/null
@@ -1,117 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
-
-::-webkit-scrollbar {
- width: 4px;
-}
-
-::-webkit-scrollbar-track {
- background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: #59c3c3;
-}
-
-body {
- background-color: #f0cea4;
- font-family: 'JetBrains Mono', 'Courier New', monospace;
-}
-
-main {
- display: grid;
- inset: 0;
- margin-inline: auto;
- position: absolute;
- grid-template-rows: 10vh 1fr;
- width: fit-content;
-}
-
-search {
- align-items: center;
- display: flex;
- justify-content: center;
- position: relative;
-
- &::after {
- content: "\f002";
- font: 900 20px/1 "Font Awesome 6 Free";
- position: absolute;
- right: 16px;
- }
-
- > input {
- border: none;
- border-radius: 8px;
- box-shadow: inset .3px .5px 1px 0px #0000003d;
- font-family: 'JetBrains Mono', 'Courier New', monospace;
- height: 48px;
- padding-inline: 16px 36px;
- font-size: 24px;
- width: 100%;
-
- &:focus {
- outline: none;
- }
-
- &::placeholder {
- color: #bbb;
- }
-
- &::-webkit-search-cancel-button {
- -webkit-appearance: none;
- }
- }
-}
-
-ul {
- align-items: center;
- display: flex;
- flex-direction: column;
- gap: 12px;
- margin: 0;
- padding: 12px 0;
- overflow: auto;
-
- > li {
- align-items: center;
- background-color: white;
- border-radius: 8px;
- box-shadow: rgba(183, 70, 42, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
- cursor: pointer;
- font-size: 18px;
- gap: 16px;
- line-height: 48px;
- list-style: none;
- min-height: 48px;
- overflow: hidden;
- padding-inline: 12px;
- text-wrap: nowrap;
- text-overflow: ellipsis;
- width: 88%;
-
- &::before {
- align-items: center;
- aspect-ratio: 1/1;
- content: "\f1ab";
- display: flex;
- background-color: #59c3c366;
- border-radius: 50%;
- font: 900 16px/1 "Font Awesome 6 Free";
- }
-
- &::after {
- content: attr(data-value);
- text-transform: capitalize;
- }
-
- &:hover {
- background-color: #bce7e7;;
- }
- }
-}
-
-/** default hidden state */
-li {
- display: none;
-}
\ No newline at end of file