Escuro

Speed Coding | HTML, CSS, JS - Calculator

motiQ
Inscrever-se
Visualizações 863 085
96% 23 902 837

How to make a calculator using html, css, javascript.
Video,Edited and Coding:
Sahal Mohamed
Music:
This Is Me by Declan DP soundcloud.com/declandp
Creative Commons - Attribution-NoDerivs 3.0 Unported - CC BY-ND 3.0
creativecommons.org/licenses/b...
Music promoted by Audio Library brvid.net/video/video-TKIR_JzPI7U.html
Copyrighted by motiQ Research
BRvid: brvid.net/show-UCOTr...
Facebook: facebook.com/motiQresearch
Google : plus.google.com/u/0/118049625...
Don't forget to like, comment and subscribe!

Publicado em

 

24 Jan 2018

Compartilhar:

Compartilhar:

Baixar vídeos:

Carregando o link.....

Adicionar a:

Minha playlist
Assista mais tarde
Comentários 715
motiQ
motiQ 11 meses atrás
Here is the tutorial about the real time editor brvid.net/video/video-onLsz9BwP7M.html
Phoenix -
Phoenix - 2 meses atrás
@Jawad Larjouni cmd + numbers = calculator
hold presents
hold presents 4 meses atrás
Hello motiQ Research would be the question of how to do with the tab key to jump over a particular size
WantedSavage777
WantedSavage777 6 meses atrás
motiQ Research You are amazing. I’m actually learning from this.
ETHEREUM MONEY
ETHEREUM MONEY 6 meses atrás
What if we made a drawing and it automatically made the code, the other way around for graphic designers
sanjay yadav
sanjay yadav 17 horas atrás
for freshers in web designing its outstanding tutorial
Anjith Hanumandla
Anjith Hanumandla 2 dias atrás
Nice bro 👍
Samsul Alom
Samsul Alom 2 dias atrás
which editor you use?
Roeniss Moon
Roeniss Moon 3 dias atrás
This video has so many skills and tips for html, css, js. I think that people who laugh at this doesn't understand the underlined meaning. Thank you so brillient Video! this is not a video making calculator. this is video of intermediate web coding skills.
Hisham Fawaz
Hisham Fawaz 6 dias atrás
Background color is not working .bg
Vinh Trần
Vinh Trần 8 dias atrás
I like it . But t don't know HTML , CSS , PHP .
Dipankar Pegu
Dipankar Pegu 9 dias atrás
Hello show your clear coding OK...
Guest 666
Guest 666 14 dias atrás
where is 0 ?
Shoaib Sheikh
Shoaib Sheikh 19 dias atrás
Which editor is this bro😅
Ar Technology Side
Ar Technology Side 20 dias atrás
Bro How Can You Learn That Programming Language??
MARCELO.JUNIOR
MARCELO.JUNIOR 25 dias atrás
DONT WORK !!! function insert(num){ document.form.textview.value = document.form.textview.value+num } body{ margin:0px; padding:0px; } .main{} .textview{ width:217px; margin:5px; font-size:25px; padding:5px; cursor:pointer; } .button{ width:50px; height:50px; font-size:25px; margin:2px; }
Abulfazl Haidary
Abulfazl Haidary 27 dias atrás
Thanks for the video, just make your editor font size bigger.
Николай Шаповал
Псих... Пез подсветки синтаксиса ..
I will be clever Alan, maybe
Hey, anyone! Try this code: Sssnake html, body {padding: 0;margin: 0;} *{box-sizing: border-box;} body {background: #ddd; padding: 50px;} canvas { background: black; margin: 0 auto; display: block; } window.onload = function () { document.addEventListener('keydown', changeDirection); setInterval(loop, 1000/60); // 60 FPS } var canv = document.getElementById('mc'), // canvas ctx = canv.getContext('2d'), // 2d context gs = fkp = false, // game started && first key pressed (initialization states) speed = baseSpeed = 3, // snake movement speed xv = yv = 0, // velocity (x & y) px = ~~(canv.width) / 2, // player X position py = ~~(canv.height) / 2, // player Y position pw = ph = 20, // player size aw = ah = 20, // apple size apples = [], // apples list trail = [], // tail elements list (aka trail) tail = 100, // tail size (1 for 10) tailSafeZone = 20, // self eating protection for head zone (aka safeZone) cooldown = false, // is key in cooldown mode score = 0; // current score // game main loop function loop() { // logic ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canv.width, canv.height); // force speed px += xv; py += yv; // teleports if( px > canv.width ) {px = 0;} if( px + pw < 0 ) {px = canv.width;} if( py + ph < 0 ) {py = canv.height;} if( py > canv.height ) {py = 0;} // paint the snake itself with the tail elements ctx.fillStyle = 'lime'; for( var i = 0; i < trail.length; i++ ) { ctx.fillStyle = trail[i].color || 'lime'; ctx.fillRect(trail[i].x, trail[i].y, pw, ph); } trail.push({x: px, y: py, color: ctx.fillStyle}); // limiter if( trail.length > tail ) { trail.shift(); } // eaten if( trail.length > tail ) { trail.shift(); } // self collisions if( trail.length >= tail && gs ) { for( var i = trail.length - tailSafeZone; i >= 0; i-- ) { if( px < (trail[i].x + pw) && px + pw > trail[i].x && py < (trail[i].y + ph) && py + ph > trail[i].y ) { // got collision tail = 10; // cut the tail speed = baseSpeed; // cut the speed (flash nomore lol xD) for( var t = 0; t < trail.length; t++ ) { // highlight lossed area trail[t].color = 'red'; if( t >= trail.length - tail ) {break;} } } } } // paint apples for( var a = 0; a < apples.length; a++ ) { ctx.fillStyle = apples[a].color; ctx.fillRect(apples[a].x, apples[a].y, aw, ah); } // check for snake head collisions with apples for( var a = 0; a < apples.length; a++ ) { if( px < (apples[a].x + pw) && px + pw > apples[a].x && py < (apples[a].y + ph) && py + ph > apples[a].y ) { // got collision with apple apples.splice(a, 1); // remove this apple from the apples list tail += 10; // add tail length speed += .1; // add some speed spawnApple(); // spawn another apple(-s) break; } } } // apples spawner function spawnApple() { var newApple = { x: ~~(Math.random() * canv.width), y: ~~(Math.random() * canv.height), color: 'red' }; // forbid to spawn near the edges if( (newApple.x < aw || newApple.x > canv.width - aw) || (newApple.y < ah || newApple.y > canv.height - ah) ) { spawnApple(); return; } // check for collisions with tail element, so no apple will be spawned in it for( var i = 0; i < tail.length; i++ ) { if( newApple.x < (trail[i].x + pw) && newApple.x + aw > trail[i].x && newApple.y < (trail[i].y + ph) && newApple.y + ah > trail[i].y ) { // got collision spawnApple(); return; } } apples.push(newApple); if( apples.length < 3 && ~~(Math.random() * 1000) > 700 ) { // 30% chance to spawn one more apple spawnApple(); } } // random color generator (for debugging purpose or just 4fun) function rc() { return '#' + ((~~(Math.random() * 255)).toString(16)) + ((~~(Math.random() * 255)).toString(16)) + ((~~(Math.random() * 255)).toString(16)); } // velocity changer (controls) function changeDirection(evt) { if( !fkp && [37,38,39,40].indexOf(evt.keyCode) > -1 ) { setTimeout(function() {gs = true;}, 1000); fkp = true; spawnApple(); } if( cooldown ) {return false;} /* 4 directional movement. */ if( evt.keyCode == 37 && !(xv > 0) ) // left arrow {xv = -speed; yv = 0;} if( evt.keyCode == 38 && !(yv > 0) ) // top arrow {xv = 0; yv = -speed;} if( evt.keyCode == 39 && !(xv < 0) ) // right arrow {xv = speed; yv = 0;} if( evt.keyCode == 40 && !(yv < 0) ) // down arrow {xv = 0; yv = speed;} cooldown = true; setTimeout(function() {cooldown = false;}, 100); }
Anju Bala
Anju Bala Mês atrás
please explain each term in code.
mohamed pllal
mohamed pllal Mês atrás
why do you lie.
Jpedro P
Jpedro P Mês atrás
I'm just learning some code from the beginning, a lot of people saying this is old and whatever. It was very nice for me, since I'm learning the oldest and hardest languages first, to make the new ones easier in the future. Thanks for the video mate.
SATYAM YADAV
SATYAM YADAV Mês atrás
Hello please i wanna which software u r using for code editing .that one side is coding field and another side is its result .. please tell me..
Alioune Bintou Sarr
Alioune Bintou Sarr 2 meses atrás
How To insert square root in the code. Who can help me
Code Liker
Code Liker 2 meses atrás
very helpfull calculator
conom
conom 2 meses atrás
I can code better. I am a Muslim btw.
Nguyên Dương
Nguyên Dương 2 meses atrás
What app editor html?
Huda Damar
Huda Damar 2 meses atrás
what editor you use ?
Mohammed Sbai
Mohammed Sbai 2 meses atrás
👍👍👍👍👍👍
Hồng Quân Trần
Hồng Quân Trần 2 meses atrás
Thanks for sharing this. I am learning basic js. Can you advice some tips for learning effectively
РУССКИЙ ЧИТЕР
Пидарас какой то
Mashi Q
Mashi Q 2 meses atrás
Do I need to code Notepad too?
Renz Angelo Pitogo
Renz Angelo Pitogo 2 meses atrás
what application you're using ?
Suraj Borse
Suraj Borse 2 meses atrás
What is your windows name sir
emzar 12321
emzar 12321 2 meses atrás
good : )
HackZ YoboY
HackZ YoboY 2 meses atrás
So much negativity here. People should understand the effort put on by this guy to make this super awesome calculator with such an amazing UI. I loved it. Thanks mate
As If
As If 2 meses atrás
coding software?
John Downey
John Downey 2 meses atrás
Whats the coding program called
Vegan Sloth
Vegan Sloth 2 meses atrás
What’s wrong with your cursor?
Rodge
Rodge 3 meses atrás
Wow, very cool, let's go coding color picker) you very cool programer :)
I Love You
I Love You 3 meses atrás
6:10 lol at the music 😂
Visualmodo
Visualmodo 3 meses atrás
Build any sports and health site design without code knowledge - Sport responsive WordPress theme - Sportive and health WordPress drag and drop website builder template visualmodo.com/theme/sport-wordpress-theme/ 🚣‍♂️🏋️‍♀️🚴‍♂️🏊‍♀️⚽🏀🏈🎾 Build your own sports space, grow your brand and business!
Yishay 666
Yishay 666 3 meses atrás
100% workink: catlucer 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) } *{ padding: 0px; margin: 0px; } .button{ width: 50px; height: 50px; font-size: 25px; margin: 2px; cursor: pointer; background: #607d8b; border: none; color: white; } .textview{ width: 205px; margin: 5px; font-size: 25px; padding: 5px; border: none; color: #607d8b; } .main{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } nav{ background: linear-gradient(to right,#e91e63,#3f51d5); padding: 100%; }
Axel 01
Axel 01 3 meses atrás
One question, if I want to add a %, How do I do it?
ErCapoAlex
ErCapoAlex 3 meses atrás
👍👍
Aakash Dev
Aakash Dev 3 meses atrás
Awesome
Event Livestreaming
Event Livestreaming 3 meses atrás
Nice VideoCopilot Intro!
NET NATION
NET NATION 3 meses atrás
Thanks
Fabian Trujillo
Fabian Trujillo 3 meses atrás
with what app did that?
Maxouss
Maxouss 3 meses atrás
Bravo et bonne continuation
IFARGAN TECH
IFARGAN TECH 3 meses atrás
Great... I appreciate you Bro ... you are great creative
Shipini Dani Elkbir
Shipini Dani Elkbir 3 meses atrás
love
Toxyk
Toxyk 3 meses atrás
No DOCTYPE, style in HTML and using table to layout. I'm out after around 1:30...
Zaki Dz
Zaki Dz 3 meses atrás
bcoz he is writing the code inside a web page
amolord games
amolord games 3 meses atrás
Im soo happy that I can understand like 40% of your code on this video 😀😁 , btw Im begineer in coding
Кратос ез
Кратос ез 2 meses atrás
PS: it's way old fashioned coding, like 2000's version.
稲葉まど
稲葉まど 3 meses atrás
Why don't you use Pug?
Swiffer
Swiffer 3 meses atrás
This video is pure aids. Adding onclick events to the Html element and using eval Next time try to make a calculator with .on() and a advanced calculator withoutvthe floating point
Matheus Fernandes
Matheus Fernandes 3 meses atrás
I did this code on Visual Studio but I can't enable The CSS, why?
Jan Bezdíček
Jan Bezdíček 3 meses atrás
Even though this code could be written much better ... yall just hatin cuz u have to spend 4 hours just settin up ur react/angular env xD
Lucas Tavares
Lucas Tavares 3 meses atrás
Jan Bezdíček but for this u dont need any of that. Is a simple code
Atmega 32
Atmega 32 3 meses atrás
HTML still is not a programming language :)
man
man 3 meses atrás
try eval 1/0*0
M W
M W 3 meses atrás
AWESOME Film
Bahtiyar Amirshin
Bahtiyar Amirshin 3 meses atrás
What is this program for coding?
Zishan Alam
Zishan Alam 4 meses atrás
Button,textview function work q nhi ka paa rha please help me
Juan Van Steyvoort
Juan Van Steyvoort 4 meses atrás
Brilliant !... Thank you so much... From Brussels, with Love...
Próximos vídeos
CSS Speed Coding: Calendar App UI
15:00
BODE  VOLTOU A INCOMODA?
29:11
Visualizações 141 968
PUDIM GIGANTE!!! TENTEI FAZER
19:11
Visualizações 112 274
Bilhetes deixados por pais para os filhos!
10:19
Mala (Acústico)
2:55
Visualizações 54 663