/* Swipe! by Joakim Nyland Swipe to the right, down, left and up (respectively😉) I wanted to practise and also test out swiping so I made this! I hope you like it! Please give me feedback if something is not working properly! */ window.addEventListener('load', function(){ var inputName=''; inputName=prompt('Please enter your name:').toUpperCase(); if (inputName == ''){ inputName = "SOLOLEARN"; } swal( "Swipe!","😄 Swipe to the right, down, left, up and see what happens 😄"); console.log=function(){}; var touchScreen = document.getElementById('touchScreen'); var startX; var startY; var distX; var distY; var minDist = 100; //required min distance traveled to be considered swipe var allowedTime = 1000; // maximum time allowed to travel that distance var elapsedTime; var startTime; var swipeRightBol = 0; var swipeLeftBol = 0; var swipeUpBol = 0; var swipeDownBol = 0; function checkSwipe(rightSwipe, downSwipe, leftSwipe, upSwipe){ if (rightSwipe == 1){ touchScreen.innerHTML = ''; touchScreen.innerHTML = inputName; touchScreen.style.color = 'white'; document.body.style.backgroundColor ="#ff3333"; } else if(downSwipe == 1){ touchScreen.innerHTML = ''; touchScreen.innerHTML = 'IS'; touchScreen.style.color = 'yellow'; document.body.style.backgroundColor = "#33ccff"; } else if(leftSwipe == 1){ touchScreen.innerHTML = ''; touchScreen.innerHTML = 'AWESOME'; touchScreen.style.color = 'red'; document.body.style.backgroundColor = "#70db70"; } else if(upSwipe == 1){ touchScreen.innerHTML = ''; touchScreen.innerHTML = '😁'; document.body.style.backgroundColor = "yellow"; } else{ touchScreen.innerHTML = 'Swipe not detected'; touchScreen.style.color = 'black'; document.body.style.backgroundColor = "white"; } } touchScreen.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0]; startX = touchobj.pageX; startY = touchobj.pageY; distX = 0; distY = 0; swipeRightBol = 0; swipeDownBol = 0; swipeLeftBol = 0; swipeUpBol = 0; startTime = new Date().getTime(); //time when finger first makes contact with screen }); touchScreen.addEventListener('touchmove', function(e){ e.preventDefault(); //prevents scrolling }); touchScreen.addEventListener('touchend', function(e){ var touchobj = e.changedTouches[0]; distX = touchobj.pageX - startX; //total x-distance traveled by finger while in contact with screen distY = touchobj.pageY - startY;//total y-distance traveled by finger while in contact with screen elapsedTime = new Date().getTime() - startTime; //time elapsed // check elapsed time and dist traveled if(elapsedTime <= allowedTime && distX >= minDist && Math.abs(distY) <= 100){ swipeRightBol = 1; } else if(elapsedTime <= allowedTime && distX <= -minDist && Math.abs(distY) <= 100){ swipeLeftBol = 1; } else if(elapsedTime <= allowedTime && distY >= minDist && Math.abs(distX) <= 100){ swipeDownBol = 1; } else if(elapsedTime <= allowedTime && distY <= -minDist && Math.abs(distX) <= 100){ swipeUpBol = 1; } checkSwipe(swipeRightBol,swipeDownBol,swipeLeftBol,swipeUpBol); e.preventDefault(); }); });