Skip to content

button color changed #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shabzzy wants to merge 4 commits into
base: main
Choose a base branch
from
Open

button color changed #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f25e88f
new commit
shaban-hacker Sep 26, 2022
c2198d7
Merge branch 'shaban' of https://github.com/gbadeyankashab/generalCal…
shaban-hacker Sep 26, 2022
df38848
changed button color
shaban-hacker Sep 26, 2022
6372e9b
first commit
shaban-hacker Sep 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ <h1 id="title"></h1>
</div>
<div id="disp"></div>

<div class="w-50" id="mycalc">
<!-- <div class="w-50" id="mycalc"> -->

</div>
<div class="mt-3 ml-3">
Expand All @@ -118,9 +118,9 @@ <h1 id="title"></h1>
<div id="mycalc2" class="w-50"></div>
</div>
<!-- <div><button class="btn w-100" id="mybtn" onclick="change()">CLick me</button></div> -->
<script src="/js/calc.js" ></script>
<script src="js/calc.js" ></script>
<script>
new Calculator('#mycalc');
// new Calculator('#mycalc');
new Calculator2('#mycalc2','#colorInp');
</script>
</body>
Expand Down
203 changes: 65 additions & 138 deletions js/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,85 @@

class Calculator{
screen='';
class Calculator {
screen = "";
div;
finalAns;
constructor(div){
this.div= document.querySelector(div)
this.div.innerHTML =`<div class="w-100">
constructor(div) {
this.div = document.querySelector(div);
this.div.innerHTML = `<div class="w-100">
<input type="text" class="form-control input-lg" readonly id="screen">
<table style="width:100%;" id="tb1">
<tr>
<td><button class="btn btn-light">1</button></td>
<td><button class="btn btn-light">2</button></td>
<td><button class="btn btn-light">3</button></td>
<td><button class="btn btn-light">4</button></td>
<td><button class="btn btn-light">5</button></td>
<td><button class="btn btn-light">+</button></td>
<td><button class="btn btn-dark">1</button></td>
<td><button class="btn btn-dark">2</button></td>
<td><button class="btn btn-dark">3</button></td>
<td><button class="btn btn-dark">4</button></td>
<td><button class="btn btn-dark">5</button></td>
<td><button class="btn btn-dark">+</button></td>
</tr>
<tr>
<td><button class="btn btn-light">6</button></td>
<td><button class="btn btn-light">7</button></td>
<td><button class="btn btn-light">8</button></td>
<td><button class="btn btn-light">9</button></td>
<td><button class="btn btn-light">0</button></td>
<td><button class="btn btn-light">-</button></td>
<td><button class="btn btn-dark">6</button></td>
<td><button class="btn btn-dark">7</button></td>
<td><button class="btn btn-dark">8</button></td>
<td><button class="btn btn-dark">9</button></td>
<td><button class="btn btn-dark">0</button></td>
<td><button class="btn btn-dark">-</button></td>
</tr>
<tr>
<td colspan="6"><button class="btn btn-dark">=</button></td>
<td colspan="6"><button class="btn btn-danger btn-block" onclick="clear()">CLR</button></td>
</tr>
</table>
</div>`;
this.screen= document.querySelector(`${div} input`)
const btnn = document.querySelectorAll(`${div} button`)

btnn.forEach((bt)=>{
bt.addEventListener('click',()=>{
if (bt.innerText == '=') {
this.showAnswer()
} else {
this.showNumbers(bt.innerText)
}
})
});
}

showNumbers(numbers){
console.log(this.finalAns);
if(this.screen.value == this.finalAns)this.screen.value=''
if (this.screen.value.charAt(this.screen.value.length -1)=='+'&& numbers=='-') {
this.screen.value = this.screen.value.slice(0,-1)
this.screen.value +=numbers;
} else if (this.screen.value.charAt(this.screen.value.length -1)=='-'&& numbers=='+'){
this.screen.value = this.screen.value.slice(0,-1)
this.screen.value +=numbers;
} else{
this.screen.value +=numbers;
}
};
showAnswer(){
try {
this.finalAns=eval(this.screen.value)
this.screen.value = this.finalAns
} catch (error) {
alert('Invalid something')
this.screen.value = ''
}
this.screen = document.querySelector(`${div} input`);
const btnn = document.querySelectorAll(`${div} button`);

btnn.forEach((bt) => {
bt.addEventListener("click", () => {
if (bt.innerText == "=") {
this.showAnswer();
} else {
this.showNumbers(bt.innerText);
}
});
});
}
init(){

}
showNumbers(numbers) {
console.log(this.finalAns);
if (this.screen.value == this.finalAns) this.screen.value = "";
if (
this.screen.value.charAt(this.screen.value.length - 1) == "+" &&
numbers == "-"
) {
this.screen.value = this.screen.value.slice(0, -1);
this.screen.value += numbers;
} else if (
this.screen.value.charAt(this.screen.value.length - 1) == "-" &&
numbers == "+"
) {
this.screen.value = this.screen.value.slice(0, -1);
this.screen.value += numbers;
} else {
this.screen.value += numbers;
}
}
showAnswer() {
try {
this.finalAns = eval(this.screen.value);
this.screen.value = this.finalAns;
} catch (error) {
alert("Invalid something");
this.screen.value = "";
}
}
init() {}
}
class Calculator2 extends Calculator{
class Calculator2 extends Calculator {
color;
constructor(div2,colorId){
super(div2)
document.querySelector(colorId).addEventListener('change',function(){
this.color = document.querySelector('#colorInp').value
document.querySelector(div2).style.backgroundColor=this.color;
});
constructor(div2, colorId) {
super(div2);
document.querySelector(colorId).addEventListener("change", function () {
this.color = document.querySelector("#colorInp").value;
document.querySelector(div2).style.backgroundColor = this.color;
});
}
}
// class Calculator {
// screens;
// div;
// constructor(div) {
// this.div = document.querySelector(div);

// this.div.innerHTML = `<div class="w-50 card ml-5">
// <input type="text" class="form-control input-lg" readonly id="screen">
// <table style="width: 100%;" id="calc1">
// <tr>
// <td><button class="btn btn-light"> 1</button></td>
// <td><button class="btn btn-light"> 2</button></td>
// <td><button class="btn btn-light"> 3</button></td>
// <td><button class="btn btn-light"> 4</button></td>
// <td><button class="btn btn-light"> 5</button></td>
// <td><button class="btn btn-light"> +</button></td>
// </tr>
// <tr>
// <td><button class="btn btn-light"> 6</button></td>
// <td><button class="btn btn-light"> 7</button></td>
// <td><button class="btn btn-light"> 8</button></td>
// <td><button class="btn btn-light"> 9</button></td>
// <td><button class="btn btn-light"> 0</button></td>
// <td><button class="btn btn-light"> -</button></td>
// </tr>
// <tr>
// <td colspan="6"><button class="btn btn-dark btn-block">=</button></td>
// <td colspan="6"><button class="btn btn-danger btn-block" onclick="clear()">CLR</button></td>
// </tr>
// </table>
// </div>`;
// this.screens = document.querySelector("#screen");

// const btn = document.querySelectorAll("table button");

// btn.forEach((bt) => {
// bt.addEventListener("click", () => {
// if (bt.innerText == "=") {
// this.showAnswer();
// } else {
// if (bt.innerText == "CLR") {
// this.clear();
// } else {
// this.showNumbas(bt.innerText);
// }
// }
// });
// });
// }

// showNumbas(numbers) {
// //log(numbers)

// this.screens.value += numbers;
// }

// showAnswer() {
// try {
// this.screens.value = eval(this.screens.value);
// } catch (error) {
// alert("INvalid something");
// this.screens.value = "";
// }
// }


// init() {}
// }

// function clear() {
// let screens = document.querySelector("#screen");
// screens.innerHTML = "";
// }

// export default Calculator