Build an iPhone Calculator using HTML CSS & JavaScript!
HTML-код
- Опубликовано: 14 апр 2020
- Let's build a fully functioning iPhone Calculator using only HTML, CSS, and JavaScript! We even have a fully functioning clock! This beginner-friendly tutorial will guide you through the whole process building the calculator from absolute scratch.
Want to build the calculator in React instead? Check out: • Build an iPhone Calcul...
Check out my other recent tutorials/videos:
Pokédex: • Build a Pokédex REPLIC...
Connect Four: • Let's Build Connect Fo...
TicTacToe: • Build Tic Tac Toe usin...
Master the CSS Position Property: • Deep Dive Into the CSS...
🗄 Resources:
Symbols used in code: ± % ÷ × − + =
Status Bar Image: github.com/angle943/iphone-ca...
Github Repo: github.com/angle943/iphone-ca...
🔑 Key Concepts:
- CSS Grids
- DOM Manipulation
- dealing with types in JavaScript
#iPhone #Calculator #JavaScript 
Наука
Finally someone who actually knows what they're doing.
Great video! Everything is explained in such a detailed way :)
just completed and now i will do something about that font size of display when full thanks a lot for the tutorial . Keep doing great stuff ,thanks again .
Thank you for taking your time to make and share this very useful video.
thank you its very helpful
I just finished displaying the numbers, adding if statement to not concatenate the 0, and using the parseFloat function to return a floating-point number. I'm taking a break, but once I finish this i'm planning to do the tic tac toe tutorial. Thank you for the help!
It was an exceptionally great video!
Thank you for your kind explanation.
actually in real calculator in IPhone, when we get currentValue and click the operator button, Display shouldn't be zero.
so maybe I think there's another challenge in here!
and I hope solve your extra challenges it will really helps for me.
Have a great day😀!
Hey Justin, I’ve been trying to figure out how to get the font to get smaller after 6 digits and stop at 9 digits. I know with its easy to set maxlength to 9. Any tips how I could go about it the way you have coded the calculator? Thank you
What extensions on vs code do you use for this project?
can you make a vid regarding to the vscode extensions you are using and the vscode color theme.
I don’t use VSCode, I use Webstorm
Pls how can u turn the app into an offline app, or it can't?
Hi bro thank you so much for your video. Could you limmi know how to make styles in CSS in alphabetic order? You have used some extinction. Is it possible in VS code
Found brother. Gonna use this cool trick
what is it? what extension?
which programing are you using? I been trying to build this with Visual Studio code and the grid wont come up for me
It looks like PHPStorm for me
With your code I can not fix the problem, there you can not write more than 4 numbers
Can i have the source code?
I wish you would teach on Udemy.
Why aren't you using id's in html?
why did you stop uploading?
I am not sure if I can make this by myself. It wasn't easy for me....
Honestly, I made some React and JavaScript clone projects and figured my programming skills weren't improving. I was only learning the technology not the programming skills.
Any advice please?
This one is difficult... a lot of the difficulty comes from making the functionality as close to the iPhone calculator as possible (such as operation chaining, etc). There are a lot of simpler calculator tutorials on RUclips: ones that use an html input tag to get your calculator working. I recommend starting on those first.
And the only real advice is: practice practice practice. Good luck!
r u alive !!
bro i need to learn java script
I'm a beginner and this is so difficult.
bidello
Samsung calculator