JavaScript Project | Build Simple Calculator With JavaScript HTML CSS
Комментарии:
thanks i understand the video but the api has being taken down,not working
Ответить
why do the buttons need a 2nd class? like btn btn-grey ?
Ответить
why my equal button showing ' undefined ' 😑😑😫😫
Ответить
Here is the solution for your que:
if you have a equal undefined error remove 'btn' class in equal in html...
Hello guys, my equal button not working, when i press it, it shows undefined can any one help me out with this
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="calculator">
<form >
<input type="text" class="screen">
</form>
<div class="buttons">
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn btn-equal">=</button>
<button type="button" class="btn btn-c">C</button>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
--------------------------------------------------------------
javascript code:-
(function() {
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-c');
let equal = document.querySelector('.btn-equal');
buttons.forEach(function(button){
button.addEventListener('click', function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click', function(e){
if (screen.value === '') {
screen.value = "";
} else {
let ans = eval(screen.value);
screen.value = ans;
}
})
clear.addEventListener('click', function(e){
screen.value = "";
})
})();
bro 4*4undefine plz fix this problem
Ответить
Everything is perfect sir you are awesome you gained my respect and a subscriber
Ответить
if it's not working check if you remerbered to invoke the function
Ответить
I did my equal button like this and it worked (also deleted de btn class in the html):
equal.addEventListener("click", (e) => {
if (screen.value !== " ") { //if the screen isn´t empty
let answer = eval(screen.value) //we calculate the aswer
screen.value = " "; //clear the screen
screen.value += answer; //and show the answer
}
})
Mery calculator project MN click ki funtionaly q ni add ho rhi???
Ответить
Thank you🎉
Ответить
Can anyone please write down the first code in that css file that was written down
I can't see it clearly
first of all thank you explaining in easy or simple way. you simplify all line of code very easy everyone can understand your code. i have a suggestion for you brother make a second channel where you upload same tutorial but in hindi beacuse in hindi code no one can explain like you.
Ответить
Amazing knowledge about front end
Ответить
bro what are you typing when did you type ( please enter ) i never saw it, and the code it not even working perfectly my = is doing the job of my clear bro
Ответить
If you want to round the answer to a particular number of decimal places, you can set the screen value as follows:
screen.value = answer.toFixed(3)
The 3 is the number of decimal places you would like the result to show. This will avoid any really long answers from going off the side of the screen
what is that e.target.dataset.num?????????????
please somebody explain. where is the num, dataset coming from
where it is wrong
please anyone??
(function(){
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-cancel');
let equal = document.querySelector('.btn-result');
buttons.forEach(function(button){
button.addEventListener("click",function(e){
let value=e.target.dataset.num;
screen.value+=value;
})
});
})();
equal button is showing undefined in screen.value
pl guide
Please don't go on adding event listeners to every button as it will make the code inefficient brother.
Rather use event delegation pattern and apply the event listener on button container class.
Anyway, great tutorial!!
8.03
Ответить
Typed the style.css .calculator part exactly the same as yours but there is no rectangle box appearing in browser
Ответить
Alhamdulillah.. Understood👏
Ответить
❤Thanku so much Bhai ❤
Ответить
Thank you for this playlist
Ответить
Do NOT use eval()
Executing JavaScript from a string is an BIG security risk.
With eval(), malicious code can run inside your application without permission.
With eval(), third-party code can see the scope of your application, which can lead to possible attacks.
So simple and clear instructions. Very good job and thank you! Subscribed!
Ответить
how to set input limit ?
Ответить
If Somebody wants to delete one digit then how he/se can do so, there must be a delete button. If Someone have any Idea then Kindly help me.
Ответить
Whats the purpose of wrapping everything around the function? Can someone tell me?
Ответить
this was very useful to me I almost cried because I thought I won't make the deadline
🤧
I have a problem when i click on any buttons and don't do any calculation and then press on clear button, the value doesn't clear.
Do anyone have a soluation for it.
so weak, not as calculators works.
Ответить
js code neither showing any output nor any error
ОтветитьThank you so much
Ответить
My equal function isn't working. Something isn't right in the JS. Can't figure out what:
(function() {
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-clear');
let equal = document.querySelector('.btn-equal');
buttons.forEach(function(button) {
button.addEventListener('click', function(e) {
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click', function(e) {
if (screen.value === '') {
screen.value = "Please enter";
} else {
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener('click', function(e){ screen.value = "";
})
})();
I find one problem in this calculator.. If any one type wrong no. Then.. There is no option to delete the value.. But overall calculator and teaching way is good.
Ответить
equal.addEventListener('click', function(e){
if (screen.value === ''){
screen.value = "";
} else{
let answer = eval(screen.value);
screen.value = answer;
}
})
// this set code is not working can you see it
Perfect work mate!
Ответитьmy box shadow isn't working. what did I do wrong:
.calculator {
width: 300px;
height: 500px;
box-shadow: 4px 4px 30px rgba(red, green, blue, alpha);
}
please somebody describe what is the functionality of eval()
Ответить
can anyone tell me what's data-num in there ?
Ответить
Hi awesome tutorial. Can someone explain the data-num to me that's on html? I've been googling but still don't know why it's needed and why was it not needed for the equals and C buttons?
Ответить
If I press 042, the result is 34 .Its showing like this please resolve this.
Ответить
Excellent way of Teaching sir. While I was implementing I got to capture a bug/ improvisation for the calculator you built. After using '=' button, if you are clicking on any other button it has to clear the screen and take the input. One more idea is the screen should not take symbols(+,-,*,/) at the begging since we are simply using the eval() function of JS, we need such validations I guess:)
Ответить
super informative and thanks to comments for the undefined fix that was wierd
Ответить
Thanks you so much this video is really very helpful to practice the js code || Subscribed 😍
Ответить
Thanks for the simplified way of teaching, some complicate everything
Ответить
good but this calculator have some error because when we press the opretor more than one time it will add them multi times
Ответить
