From c797348bea512f6d7ad14d0962f705207af0128b Mon Sep 17 00:00:00 2001 From: KriteshTimsina Date: Mon, 9 Oct 2023 20:03:16 +0545 Subject: [PATCH] feat:changed dark mode text to icons --- app.js | 187 ++++++++++++++++++++++++++--------------------------- index.html | 4 +- 2 files changed, 94 insertions(+), 97 deletions(-) diff --git a/app.js b/app.js index 690e579..8adc315 100644 --- a/app.js +++ b/app.js @@ -1,117 +1,114 @@ -const btn = document.getElementById('mybtn') -const rockBtn = document.getElementById('rockBtn') -const mob = document.getElementById('MobileNum') -const inputText = document.getElementById('textforWa') -const genLink = document.getElementById('genLink') -const btnCopy = document.getElementById('btn-copy') -const whatsBtn = document.getElementById('btn-WhatsLink') -const linkContainer = document.getElementById('linkContainer') -const errMsg = document.querySelector('.err-msg') - -const countryCode = document.querySelector('select') - - +const btn = document.getElementById("mybtn"); +const rockBtn = document.getElementById("rockBtn"); +const mob = document.getElementById("MobileNum"); +const inputText = document.getElementById("textforWa"); +const genLink = document.getElementById("genLink"); +const btnCopy = document.getElementById("btn-copy"); +const whatsBtn = document.getElementById("btn-WhatsLink"); +const linkContainer = document.getElementById("linkContainer"); +const errMsg = document.querySelector(".err-msg"); + +const countryCode = document.querySelector("select"); // dark mode -const toggleButton = document.getElementById('toggleMode'); +const toggleButton = document.getElementById("toggleMode"); const body = document.body; -let colorMode = localStorage.getItem('color-mode') || 'light'; +let colorMode = localStorage.getItem("color-mode") || "light"; -toggleButton.textContent = colorMode === 'dark' ? 'Light': 'Dark'; +toggleButton.innerHTML = + colorMode === "dark" + ? '' + : ''; -body.classList.toggle('dark-mode', colorMode == 'dark'); +body.classList.toggle("dark-mode", colorMode == "dark"); -function toggleColorMode(){ - colorMode = colorMode === 'light' ? 'dark' : 'light'; +function toggleColorMode() { + colorMode = colorMode === "light" ? "dark" : "light"; - toggleButton.textContent = colorMode === 'dark' ? 'Light': 'Dark'; + toggleButton.innerHTML = + colorMode === "dark" + ? '' + : ''; - body.classList.toggle('dark-mode', colorMode == 'dark'); + body.classList.toggle("dark-mode", colorMode == "dark"); - localStorage.setItem('color-mode', colorMode); + localStorage.setItem("color-mode", colorMode); } - -toggleButton.addEventListener('click', toggleColorMode); - - +toggleButton.addEventListener("click", toggleColorMode); // Magic (text on phone) -let numPhone = document.getElementById('magic-num') -let textPhone = document.getElementById('magic-text') +let numPhone = document.getElementById("magic-num"); +let textPhone = document.getElementById("magic-text"); -inputText.addEventListener('keyup', (e) => { - textPhone.innerText = e.target.value -}) +inputText.addEventListener("keyup", (e) => { + textPhone.innerText = e.target.value; +}); -mob.addEventListener('keyup', (e) => { - numPhone.innerText = e.target.value -}) +mob.addEventListener("keyup", (e) => { + numPhone.innerText = e.target.value; +}); -const textStr = inputText.value +const textStr = inputText.value; // Rock Btn smooth scroll -rockBtn.addEventListener('click', () => { - window.scrollTo(0, 400) +rockBtn.addEventListener("click", () => { + window.scrollTo(0, 400); }); -const select = document.getElementById('select') +const select = document.getElementById("select"); -function adjustWidth(){ - const selectedOption = select.options[select.selectedIndex]; - select.style.width = `${selectedOption.text.length + 3}ch` ; +function adjustWidth() { + const selectedOption = select.options[select.selectedIndex]; + select.style.width = `${selectedOption.text.length + 3}ch`; } adjustWidth(); select.addEventListener("change", adjustWidth); +let arrayOfStrings = inputText.value.split(" "); +let linkText = arrayOfStrings.join("%20"); +let linkform = `I dont care`; -let arrayOfStrings = inputText.value.split(' ') -let linkText = arrayOfStrings.join('%20') -let linkform = `I dont care` - +mob.addEventListener("input", (e) => { + mob.classList.remove("input-error"); + errMsg.style.display = "none"; -mob.addEventListener('input', (e) => { - mob.classList.remove('input-error'); - errMsg.style.display = 'none'; + const value = e.target.value; - const value = e.target.value; + if (e.inputType === "deleteContentBackward") return; - if (e.inputType === 'deleteContentBackward') return; + // can input only digits - // can input only digits - - if (parseInt(e.data) !== 0 && !parseInt(e.data)) { - console.log(e.data) - mob.value = value.substring(0, value.length - 1); - } -}) - -btn.addEventListener('click', (e) => { - e.preventDefault() - - // if mobilenum is empty then don't submit - if (!mob.value) { - mob.classList.add('input-error'); - errMsg.style.display = 'block'; - return; - } + if (parseInt(e.data) !== 0 && !parseInt(e.data)) { + console.log(e.data); + mob.value = value.substring(0, value.length - 1); + } +}); - arrayOfStrings = inputText.value.split(' ') - linkText = arrayOfStrings.join('%20') - linkform = `https://api.whatsapp.com/send?phone=${countryCode.value}${mob.value}&text=${linkText}&lang=en` +btn.addEventListener("click", (e) => { + e.preventDefault(); - const whatsShareLink = `api.whatsapp.com/send?phone=91${mob.value}&text=${linkText}&lang=en` + // if mobilenum is empty then don't submit + if (!mob.value) { + mob.classList.add("input-error"); + errMsg.style.display = "block"; + return; + } - console.log(inputText.value) - genLink.innerText = linkform + arrayOfStrings = inputText.value.split(" "); + linkText = arrayOfStrings.join("%20"); + linkform = `https://api.whatsapp.com/send?phone=${countryCode.value}${mob.value}&text=${linkText}&lang=en`; - whatsBtn.setAttribute("href", `http://${whatsShareLink}/`) - whatsBtn.classList.remove('wbtn') + const whatsShareLink = `api.whatsapp.com/send?phone=91${mob.value}&text=${linkText}&lang=en`; - window.scrollTo(0, 700) -}) + console.log(inputText.value); + genLink.innerText = linkform; + whatsBtn.setAttribute("href", `http://${whatsShareLink}/`); + whatsBtn.classList.remove("wbtn"); + window.scrollTo(0, 700); +}); // Whatsapp share btn // Create anchor element. @@ -132,24 +129,22 @@ btn.addEventListener('click', (e) => { // Copy Text -new ClipboardJS('#btn-copy'); -btnCopy.addEventListener('click', (e) => { - - e.preventDefault() - btnCopy.innerText = 'Copied' - setTimeout(() => { - btnCopy.innerText = 'Copy' - }, 2000); - -}) +new ClipboardJS("#btn-copy"); +btnCopy.addEventListener("click", (e) => { + e.preventDefault(); + btnCopy.innerText = "Copied"; + setTimeout(() => { + btnCopy.innerText = "Copy"; + }, 2000); +}); new EmojiPicker({ - trigger: [ - { - selector: '.emoji-btn', - insertInto: ['.one'] - } - ], - closeButton: true, - //specialButtons: green -}); \ No newline at end of file + trigger: [ + { + selector: ".emoji-btn", + insertInto: [".one"], + }, + ], + closeButton: true, + //specialButtons: green +}); diff --git a/index.html b/index.html index ad152a2..bdcda52 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,9 @@ --> - +