Speed Coding | HTML, CSS, JS - Calculator

Visualizações 1 192 534
96% 34 323 1 071

How to make a calculator using html, css, javascript.
Video,Edited and Coding:
Sahal Mohamed
This Is Me by Declan DP
Creative Commons - Attribution-NoDerivs 3.0 Unported - CC BY-ND 3.0
Music promoted by Audio Library
Copyrighted by motiQ Research
Google :
Don't forget to like, comment and subscribe!

Publicado em


24 Jan 2018



Baixar vídeos:

Carregando o link.....

Adicionar a:

Minha playlist
Assista mais tarde
Comentários 937
motiQ Anos atrás
Here is the tutorial about the real time editor
Jayvant Gavhane
Jayvant Gavhane 2 meses atrás
Which app you use for this coding?
vince sanchez
vince sanchez 4 meses atrás
Im confuse of that eval() What is that
Holly Tengkok
Holly Tengkok 4 meses atrás
what IDE are you use?
Phoenix -
Phoenix - 7 meses atrás
@Jawad Larjouni cmd + numbers = calculator
hold presents
hold presents 9 meses atrás
Hello motiQ Research would be the question of how to do with the tab key to jump over a particular size
Hiba sky
Hiba sky 2 dias atrás
Ooooh will I be able to do that a day?,😯 That's awesome 💓😍
othman alyusifey
othman alyusifey 4 dias atrás
wallah verrrry nice،،،،
elyes kacem
elyes kacem 5 dias atrás
Am I the only one who hates Wix ? :3
Rahul Majumdar
Rahul Majumdar 7 dias atrás
Please give your code
Praveen V
Praveen V 7 dias atrás
Why operators are repeatedly coming. how to stop that?
bala BgN
bala BgN 8 dias atrás
Videos Are good but y u stop that doing videos
Pids Me
Pids Me 9 dias atrás
Can i make it a 2row and 6 column? Like ecxel and automatic solves it?
Tom Van Oostendorp
Tom Van Oostendorp 10 dias atrás
Friend : can u calculate something for me this guy : hold on lemme go on java real quick
Muhammad Supriyadi
Muhammad Supriyadi 11 dias atrás
nice, thanks
monkafynix 15 dias atrás
Its Not fucking coding dude
Mopork Hamcrusher
Mopork Hamcrusher 18 dias atrás
This does not follow best practice at all. Do not use this as a learning resource.
Aranha TM
Aranha TM 21 dia atrás
I'm sorry for the question, it's a basic one. Why did he use "if(exp)" without the "else"?
motiQ 20 dias atrás
it used as a error handler. here i check the exp have a value or not, if it has a value as type in the input then it evaluates
Chrono tium
Chrono tium 21 dia atrás
If you want to have a calculator with html. Use the calculator from your desktop.
Vi Sh Al Pawar
Vi Sh Al Pawar 22 dias atrás
Which editor is used in the video?
motiQ 20 dias atrás
It is a self made editor here is a tutorial about it Speed coding | HTML, CSS, JS - Real Time Editor
Amazing PowerPoint
Amazing PowerPoint 24 dias atrás
Can I do the coding in Notepad? Does it need compiler? Or there is an appropriate program to do that coding?? Can help me? I want to try that. Thanks in advance.
motiQ 20 dias atrás
Yes, you can code html, js and css in Notepad (it doesn't need a compiler, the browser itself compile the code)
COMPY_YT 25 dias atrás
What is the name of this program?
Павел Бархов
function clean(){ document.form.textview.value = "" } Doesn't work! Why?
motiQ 20 dias atrás
are you forget the semicolon?
Cynthia Manor
Cynthia Manor 26 dias atrás
Loved the video!!
Vidya Kumari
Vidya Kumari Mês atrás
It works. I have tried myself. OMG👍👍😨😨😨😨😨😨😨😨😨
Muhammad Irfan
Muhammad Irfan Mês atrás
tech code
tech code Mês atrás
Why u r not using grid layout our flexbox. Anyway nice.
The Source
The Source Mês atrás
How do you make a history tab on this calculator?!
Merice Mês atrás
Hi i made your code but only the linear gradient doesn't work can you help me ?
Merice Mês atrás
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script> function insert(num){ document.form.textview.value = document.form.textview.value+num } function equal(){ var exp = document.form.textview.value; if(exp){ document.form.textview.value = eval(exp) } } function clear(){ document.form.textview.value = "" } function back(){ var exp = document.form.textview.value; document.form.textview.value = exp.substring(0,exp.length-1); } </script> <style> body { margin: 0px; padding: 0px; } .button { width: 50px; height: 50px; font-size: 25px; margin: 2px; cursor: pointer; background: #607d8b; border: none; color: white; } .textview { width: 217px; margin: 5px; font-size: 25px; padding: 5px; border: none; color: #607d8b; } .main { position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); } .bg { background: linear-gradient(to right, #e91e63, #3f51b5); height: 100%; } </style> <title>Calculatrice</title> </head> <body> <div class="bg"></div> <div class="main"> <form name="form"> <input class="textview" name="textview"> </form> <table> <tr> <td><input class="button" type="button" value="C" onclick="clear()"></td> <td><input class="button" type="button" value="<" onclick="back()"></td> <td><input class="button" type="button" value="/" onclick="insert('/')"></td> <td><input class="button" type="button" value="x" onclick="insert('*')"></td> </tr> <tr> <td><input class="button" type="button" value="7" onclick="insert(7)"></td> <td><input class="button" type="button" value="8" onclick="insert(8)"></td> <td><input class="button" type="button" value="9" onclick="insert(9)"></td> <td><input class="button" type="button" value="-" onclick="insert('-')"></td> </tr> <tr> <td><input class="button" type="button" value="4" onclick="insert(4)"></td> <td><input class="button" type="button" value="5" onclick="insert(5)"></td> <td><input class="button" type="button" value="6" onclick="insert(6)"></td> <td><input class="button" type="button" value="+" onclick="insert('+')"></td> </tr> <tr> <td><input class="button" type="button" value="1" onclick="insert(1)"></td> <td><input class="button" type="button" value="2" onclick="insert(2)"></td> <td><input class="button" type="button" value="3" onclick="insert(3)"></td> <td rowspan=5><input class="button" style="height: 108px"type="button" value="=" onclick="equal()"></td> </tr> <tr> <td colspan=2><input class="button" style="width: 108px" type="button" value="0" onclick="insert(0)"></td> <td><input class="button" type="button" value="." onclick="insert('.')"></td> </tr> </table> </div> </body> </html>
Jeong쪼니 Mês atrás
if you do not work the bg then write down the padding value EX) .bg{ background: linear-gradient(to right,#e91e63, #3f51b5); padding: 50%; }
MD SIAM 2 meses atrás
function insert(num){ document.form.textview.value = document.form.textview.value+num } function equal(){ var exp = document.form.textview.value if(exp){ document.form.textview.value = eval(exp) } } function clean(){ document.form.textview.value = "" } function back(){ var exp = document.form.textview.value document.form.textview.value = exp.substring(0,exp.length-1) } *{ margin: 0; padding: 0; } button{ width: 50; height: 50; font-size: 25; margin: 2; cursor: pointer; background: #607d8b; border: none; } textview{ width: 217; margin: 5; font-size: 25; padding: 5; border: none; color: #607d8b; } main{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .bg{ background: linear-gradient(to right, #e91e63, #3f51b5) }
Vinay Kumar
Vinay Kumar 2 meses atrás
I need the which application u used for this program. Bz source code is view in left side and out put view in right dynamic view so kindly provide the link or application name
motiQ 20 dias atrás
It is a self made editor here is a tutorial about it Speed coding | HTML, CSS, JS - Real Time Editor
Pavan Kumar
Pavan Kumar 2 meses atrás
Wow, nice bro This is called software entertainment
Y A 2 meses atrás
Lol if u did this in Python it would be twice as fast probably
Omed Barzani
Omed Barzani 2 meses atrás
this code java script notwork
Omed Barzani
Omed Barzani 2 meses atrás
my bro this notwork please help me
Cesco 2 meses atrás
what a shit Is this code bro
maneesh sandra
maneesh sandra 2 meses atrás
Stylianos Anastasiou
Stylianos Anastasiou 2 meses atrás
bro activate windows, its 2 dollars
MadMaxPlayz 2 meses atrás
Um when i calculated 3.3 - 3 i got 2.99999999999999! why is that?
lucsoft 2 meses atrás
Never do * { } it’s just crap it’s searches the hole Dom for elements to style Just do Body {}
Вова Петров
Вова Петров 2 meses atrás
It's awful code. :(
Maskulin Muskulian
Maskulin Muskulian 2 meses atrás
good job
K.Huynh. Quang
K.Huynh. Quang 2 meses atrás
Great! I Love It. I learned a lot of html and css from you. Thank you so much!
Grisha 2 meses atrás
thank you eval() function!!! XD
Ali A. Dhillon
Ali A. Dhillon 2 meses atrás
To remove the blue border/outline around the button on focus: .button:focus { outline: none; }
Данил Рудаков
Okay, let's omit the facts that there have long been grid-elements, tags , even at the time of recording this video and go back to 2007, when this still worked.
Luis Caiza
Luis Caiza 2 meses atrás
Lol bro active Windows
Unknown Programmer
Unknown Programmer 3 meses atrás
Try to count 0.2 + 0.1 :))))
Fearengate 3 meses atrás
nice video but please, use different music - not the one that is in every YT video
Вадим Котов
Вадим Котов 3 meses atrás
Division by zero?
Yury Liakhovich
Yury Liakhovich 3 meses atrás
Why did you use onclick attribute if you can using document click event and check selector by listener? Also you can remove all your table and create only template, after that just cloning it for each button.
Syalin 3 meses atrás
People here are ass holes.
Can you tell me the compiler name?
Strawberry Apple Jam
Strawberry Apple Jam 3 meses atrás
Thank You MotiQ!
View 404
View 404 3 meses atrás
Same video
But It's Just My Voice
But It's Just My Voice 3 meses atrás
L. Axel
L. Axel 3 meses atrás
This one works: function insert(num) { document.form.textview.value = document.form.textview.value + num; } function equal() { var exp = document.form.textview.value; if (exp) { document.form.textview.value = eval(exp); } } function clean() { document.form.textview.value = ""; } function back() { var exp = document.form.textview.value; document.form.textview.value = exp.substring(0, exp.length - 1); } * { margin: 0; padding: 0; } .button { width: 50; height: 50; font-size: 25; margin: 2; cursor: pointer; background: #607d8b; border: 2px solid rgb(46, 46, 46); } .button:hover { background: #a9dbf5; } .textview { width: 216; margin: 5; font-size: 25; padding: 5; border: none; color: #607d8b; } .main { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border: 3px solid black; background-color: chocolate; } html { background: linear-gradient(to right, #e91e63, #3f51b5); } table { background-color: bisque; }
SUBSCRIBE IS FREE 3 meses atrás
Plz provide this editor link
Saturne Dev
Saturne Dev 3 meses atrás
What Etitor you us ?
Ismail Abozyd
Ismail Abozyd 3 meses atrás
Hello everyone Excuse me Can anyone tell the name of this editor❤️
Rafet Demirci
Rafet Demirci 3 meses atrás
Look at the title "Real time Editor"
Silas Wolf
Silas Wolf 3 meses atrás
Could someone tell me how his IDE is called??
Andrew Healey
Andrew Healey 3 meses atrás
It's in the pinned comment of the video.
Silas Wolf
Silas Wolf 3 meses atrás
Good Job mate! I'm a html beginner and this helped very much!!!
Данил Рудаков
if you Englishman: This damn bad code is the legacy of the barberded 2007. Now already so long time no write. That's bad form. Google this: grid, <main>, <button>, .addEventListener() else if you Russian: Этот чёртов говнокод - наследие бородатого 2007, сейчас так уже давно не пишут. Загугли: grid, <main>, <button>, .addEventListener()
Joel Robert Justiawan
Joel Robert Justiawan 3 meses atrás
This is your daily dose of Recommendation Jam Speedrun programming HTML CSS JS
naveen kumar
naveen kumar 3 meses atrás
Which software you are using
Próximos vídeos
Speed Coding: Flappy Bird
Visualizações 399
CSS Speed Coding: Calendar App UI