Build a Calculator App in HTML, CSS & JavaScript 2022

Learn how to build a calculator web app in html, css and javascript 2022!

// JOIN THE DISCORD SERVER!

// BECOME A MEMBER TO UNLOCK MORE CONTENT!

// MY GEAR FOR CODING AND YOUTUBE

All of these products I own and have tested!

// FOLLOW ME ON TWITTER

// INTERESTED IN GAME DEV?

// CHECK OUT MY GAME

// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[HayWhy_Pappy]

This is by far the best channel with great mini projects for getting better at coding. Tyler Potts is the best.

[neozoid]

22:25 ~ js part
03:32 ~ Html Divs
06:07 ~ Css Start

[Darkest_of_Winter]

I've learned so much from this video and the todo list video! I had a question on how to store those tasks from your todo vid. Hopefully you got the email.

[welson]

In case nobody noticed, if the first number is 0 then the calculation will be completely wrong, for example 021 + 2 will return 19 when it should be 23. Make sure to correct the typo in the "PerpareInput" function that he wrote then just replace the entire PrepareInput function with this

function PrepareInput(input) {
// Replace percentages with their decimal equivalent
let preparedInput = input.replace(/%/g, "/100");

// Split the input into individual tokens
let tokens = || [];

// Process each token to remove leading zeros in numbers
for (let i = 0; i < tokens.length; i++) {
if (!isNaN(tokens[i]) && tokens[i][0] === '0' && tokens[i].length > 1 && tokens[i][1] !== '.') {
tokens[i] = tokens[i].replace(/^0+/, '');
}
}

return tokens.join('');
}

[jom]

Excellent tutorial, In addition to basic JS stuff, shows how to manipulate inputs, using various string methods. Thank you.

[kukunase]

Awesome video and great sense of humour too

[susanafernandez]

it didn't work for me .. i mean the timer is not working ... neither in my local laptop nor in the server .. wonder why ... because i just downloaded the whole folder from github and tested it.

[sagaibrahim]

one thing i noticed is when a decimal is too large, the output goes a little off screen

[RAYOFSUNTHEFIRST.]

when I opened the index htmp it didn't show me the numbers etc.. and when I recheck my code I did exactly the same things, can u help me know where I must've went wrong?

[xspl_]

for the css part, when i clicked ctrl+s to save it and i went to my html file thingy, i didnt see anything save

[welson]

remember to include this in your ValidateInput function to prevent users from entering multiple % sign.

if (value == "%" && last_input == "%") {
return false;
}

[ЕвгенийМалый-шф]

Thank you very much for your video. How can I save data to localstorage?

[kapuramanisoren]

Thanks for sharing it really helps :-)

[fatinfuyad]

Very useful, video, , ., ❤. I enjoyed the logics, this is one of the best beginners project

[neozoid]

Time stamps would have been so much helpful >>>

[berniceyap]

i've come across this problem where user can input multiple decimal. i've tried to optimize the validateinput to

if( value == "." && last_input == "." || value == "." && ){
return false;
}



but what happens is that my 2nd decimal wont get input
i can only input . once
any idea how to solve this and what's wrong with my code?

[rockydog]

I turned 3 minutes into 40 minutes 😂 and this vid is not for slow type people to make😅