How to Create a Dark/Light Theme Calculator Using Html Css & JavaScript | Neumorphism Calculator

How Create a Dark/Light Theme Calculator Using Html Css & JavaScript | Neumorphism Calculator Thems
Js file upload 🔜
Subscribe ‪@CodeVikOfficial‬ for more coding videos
.
.
.
.
.
.
#html #html5 #htmlcss #coder #programming #css3 #cssprojects #webdesign #webdevelopment #python #webprogramming #viralvideo #howtocomplete1000subs #coder #webdesign #python #codeing #webdevelopment #htmlcss #coding #software #softwaredeveloper #softwareengineer #softwareengineering #reactjs #angular #vuejs

[@kalaiarasiv6864]

Bro plzz leave the script part I am eagerly waiting for this plzz plzz bro

[@CodeVikOfficial]

I have paste the script part here, get connected with this channel!
const keys = document.querySelectorAll('#calc span');
const operators = ['+', '-', 'x', '÷'];
let decimalAdded = false;
keys.forEach(key => {
key.addEventListener('click', function (e) {
const input = document.querySelector('.display');
let inputVal = input.innerHTML;
const btnVal = this.innerHTML;
if (btnVal === 'AC') {
input.innerHTML = '';
decimalAdded = false;
} else if (btnVal === 'DEL') {
input.innerHTML = inputVal.slice(0, -1);
if (!inputVal.includes('.')) {
decimalAdded = false;
}
} else if (btnVal === '=') {
let equation = inputVal;
const lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
if (operators.includes(lastChar) || lastChar === '.') {
equation = equation.slice(0, -1);
}
if (equation) {
input.innerHTML = eval(equation);
}
decimalAdded = false;
} else if (operators.includes(btnVal)) {
const lastChar = inputVal[inputVal.length - 1];
if (inputVal !== '' && !operators.includes(lastChar)) {
input.innerHTML += btnVal;
} else if (inputVal === '' && btnVal === '-') {
input.innerHTML += btnVal;
} else if (operators.includes(lastChar) && inputVal.length > 1) {
input.innerHTML = inputVal.slice(0, -1) + btnVal;
}
decimalAdded = false;
} else if (btnVal === '.') {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
} else {
input.innerHTML += btnVal;
}
e.preventDefault();
});
});
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', function (e) {
document.documentElement.setAttribute('data-theme', e.target.checked ? 'dark' : 'light');
});

[@kalaiarasiv6864]

@@CodeVikOfficial Thank you so much bro

[@nemesismonkey]

Where is the script part??

[@CodeVikOfficial]

The script part is below 👇 get connected with this channel.
const keys = document.querySelectorAll('#calc span');
const operators = ['+', '-', 'x', '÷'];
let decimalAdded = false;
keys.forEach(key => {
key.addEventListener('click', function (e) {
const input = document.querySelector('.display');
let inputVal = input.innerHTML;
const btnVal = this.innerHTML;
if (btnVal === 'AC') {
input.innerHTML = '';
decimalAdded = false;
} else if (btnVal === 'DEL') {
input.innerHTML = inputVal.slice(0, -1);
if (!inputVal.includes('.')) {
decimalAdded = false;
}
} else if (btnVal === '=') {
let equation = inputVal;
const lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
if (operators.includes(lastChar) || lastChar === '.') {
equation = equation.slice(0, -1);
}
if (equation) {
input.innerHTML = eval(equation);
}
decimalAdded = false;
} else if (operators.includes(btnVal)) {
const lastChar = inputVal[inputVal.length - 1];
if (inputVal !== '' && !operators.includes(lastChar)) {
input.innerHTML += btnVal;
} else if (inputVal === '' && btnVal === '-') {
input.innerHTML += btnVal;
} else if (operators.includes(lastChar) && inputVal.length > 1) {
input.innerHTML = inputVal.slice(0, -1) + btnVal;
}
decimalAdded = false;
} else if (btnVal === '.') {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
} else {
input.innerHTML += btnVal;
}
e.preventDefault();
});
});
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', function (e) {
document.documentElement.setAttribute('data-theme', e.target.checked ? 'dark' : 'light');
});