galias11 · franrai91 · Oct 28, 2018 · Oct 29, 2018 · Oct 29, 2018 · Oct 29, 2018
diff --git a/03-HTML5-APIs/canvas.html b/03-HTML5-APIs/canvas.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <title>Canvas</title>
+</head>
+<body>
+    <canvas id="canvasElem" width="900" height="500" style="border: 1px solid #000000"></canvas>
+
+    <script src="js/canvas.js"></script>
+</body>
+</html>
diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Topic 3</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+</head>
+<body>
+    <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="Right over here or drop a text file"></textarea><br>
+    <button onclick="saveLocalStorage();" id="butonid">Save</button>
+    <button onclick="clearBoth();">Clear</button>
+    <button onclick="webSocketTesting(textarea.value);">Web Socket</button>
+    <p id="socketOutPut">
+
+    </p>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/03-HTML5-APIs/js/canvas.js 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());
+})
diff --git a/03-HTML5-APIs/js/main.js 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');
+    }
+}
diff --git a/03-HTML5-APIs/svg.html b/03-HTML5-APIs/svg.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <title>SVG</title>
+</head>
+<body>
+    <svg width=1300 height=1200>
+        <g>
+            <circle cx="150" cy="420" r="80" fill="#FFA07A" />
+            <circle cx="310" cy="300" r="80" fill="#FA8072" />
+            <circle cx="480" cy="190" r="80" fill="#E9967A" />
+            <circle cx="660" cy="80" r="80" fill="#F08080" />
+        </g>
+    </svg>
+</body>
+</html>