+ +
+ + + \ No newline at end of file diff --git a/03-HTML5-APIs/js/canvas.js b/03-HTML5-APIs/js/canvas.js new file mode 100644 index 00000000..eeb2e4ab --- /dev/null +++ b/03-HTML5-APIs/js/canvas.js @@ -0,0 +1,53 @@ +function getRandomColor(){ + let letter = '0123456789ABCDEF'; + let color = "#"; + for(var i =0;i < 6; i++){ + color += letter[Math.floor(Math.random()*16)]; + } + return color; +} +const getRandomNumber = (max) => { + return Math.floor(Math.random() * Math.floor(max)); +} + +const drawingCircle = (posX,posY,radius,strtAngle,endAngle,colorm) => { + let canvas = document.getElementById("canvasElem"); + var ctx = canvas.getContext('2d'); + ctx.beginPath(); + ctx.arc(posX,posY,radius,strtAngle,endAngle); + ctx.fillStyle = colorm; + ctx.fill(); + ctx.stroke(); +} +const drawingRectangule = (posX,posY,width,height,color) =>{ + let canvas = document.getElementById("canvasElem"); + let context = canvas.getContext("2d"); + context.beginPath(); + context.rect(posX,posY,width,height); + context.fillStyle = color; + context.fill(); + context.stroke(); +} +function drawElementsRandom(){ + let canvas = document.getElementById("canvasElem"); + drawingCircle(getRandomNumber(canvas.width),getRandomNumber(canvas.height),getRandomNumber(90),0,2*Math.PI,getRandomColor()); + drawingCircle(getRandomNumber(canvas.width),getRandomNumber(canvas.height),getRandomNumber(90),0,2*Math.PI,getRandomColor()); + drawingRectangule(getRandomNumber(canvas.width),getRandomNumber(canvas.height),getRandomNumber(canvas.width/2),getRandomNumber(canvas.height/2),getRandomColor()); + drawingRectangule(getRandomNumber(canvas.width),getRandomNumber(canvas.height),getRandomNumber(canvas.width/2),getRandomNumber(canvas.height/2),getRandomColor()); +} +function animatedRectang(posX,posY,width,height,color){ + let canvas = document.getElementById("canvasElem"); + let cxt = canvas.getContext("2d"); + + setInterval(()=>{ + cxt.clearRect(0,0,width,height); + posY = (posY + 10) % canvas.height; + drawingRectangule(posX,posY,width,height,color); + },15); +} + +window.addEventListener("load",() =>{ + drawElementsRandom(); + + animatedRectang(getRandomNumber(canvasElem.width),getRandomNumber(canvasElem.height),getRandomNumber(canvasElem.width/2),getRandomNumber(canvasElem.height/2),getRandomColor()); +}) \ No newline at end of file diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js new file mode 100644 index 00000000..d41a6077 --- /dev/null +++ b/03-HTML5-APIs/js/main.js @@ -0,0 +1,101 @@ +var db; +function createIndexDB(){ + buton = document.getElementById("butonid"); + + buton.addEventListener("click", addObject, false); + + var req = indexedDB.open("myBase4"); + + req.onsuccess = function(e){ + db = e.target.result; + } + req.onupgradeneeded = function(e){ + db = e.target.result; + db.createObjectStore("savedText",{keyPath:"text"}); + } +} +addEventListener("load",createIndexDB,false); + +function addObject(){ + var info = document.getElementById("textarea").value; + var transaction = db.transaction(["savedText"], "readwrite"); + var saveInfo = transaction.objectStore("savedText"); + var sumit = saveInfo.add({text: info}) +} +function saveLocalStorage(){ + if(typeof(Storage) !== "undefined" ){ + let text = document.getElementById("textarea").value; + + localStorage.setItem("TextInside",String(text)); + } else { + console.log("Sorry, your browser does not support Web Storage"); + } + +} +function clearBoth(){ + localStorage.clear(); + var trans = db.transaction(["savedText"],"readwrite"); + var info = trans.objectStore("savedText"); + var reques = info.clear(); + +} +//----------------------------------------------------------------------------------------------- +function dropOver(event){ + event.stopPropagation(); + event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; + +} +function dropOverText(event){ + event.stopPropagation(); + event.preventDefault(); + + if (event.dataTransfer.items.length > 1) { + console.log('Cant read more than one file'); + } + else { + if (event.dataTransfer.items[0].kind === 'file') { //Check if dropped items are files + var txt = event.dataTransfer.items[0].getAsFile(); + + var reader = new FileReader(); + + reader.readAsText(txt); + + reader.onload = ev => { + data = reader.result; + } + + reader.onloadend = ev => { + event.target.innerHTML = data; + } + + reader.onerror = ev => { + console.log('Error at reading file'); + } + } + } +} + +var dropzone = document.getElementById("textarea"); +dropzone.addEventListener('dragover',dropOver,false); +dropzone.addEventListener('drop',dropOverText,false); +//------------------------------------------------------------------------------------- +function webSocketTesting(messsage){ + + var webSock = new WebSocket('ws://echo.websocket.org'); + + webSock.onopen = ev =>{ + console.log('Conection Done'); + webSock.send(messsage); + } + webSock.onclose = ev =>{ + console.log('Conection Close'); + } + webSock.onmessage = ev =>{ + console.log('Receiving response'); + document.getElementById("socketOutPut").innerHTML = 'Response ' + ev.data; + } + webSock.onerror = ev =>{ + console.log('Error'); + } +} \ No newline at end of file diff --git a/03-HTML5-APIs/svg.html b/03-HTML5-APIs/svg.html new file mode 100644 index 00000000..c457c76c --- /dev/null +++ b/03-HTML5-APIs/svg.html @@ -0,0 +1,19 @@ + + + + + + +