Skip to content

Commit

Permalink
Merge pull request #73 from KriteshTimsina/feat-darkmode
Browse files Browse the repository at this point in the history 
[FEAT] Replace Dark Mode Button with Icon Button Toggle
  • Loading branch information
@amittri1025
amittri1025 authored Oct 9, 2023
2 parents d9154c7 + c797348 commit 70b1a44
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 97 deletions.
187 changes: 91 additions & 96 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -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"
? '<i class="fa-regular fa-sun"></i>'
: '<i class="fa-solid fa-moon"></i>';

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"
? '<i class="fa-regular fa-sun"></i>'
: '<i class="fa-solid fa-moon"></i>';

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.
Expand All @@ -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
});
trigger: [
{
selector: ".emoji-btn",
insertInto: [".one"],
},
],
closeButton: true,
//specialButtons: green
});
4 changes: 3 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@
</li> -->


<button id="toggleMode" class="btn btn-outline-success">Dark</button>
<button id="toggleMode" class="btn btn-outline-success col-1 col-lg-5 d-flex justify-content-center align-items-center rounded-circle">
<i class="fa-regular fa-sun"></i>
</button>
</ul>
</div>
</div>
Expand Down

0 comments on commit 70b1a44

Please sign in to comment.