grercoli · grercoli · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018
diff --git a/03-HTML5-APIs/canvas.html b/03-HTML5-APIs/canvas.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="description" content="Exercise for HTML5Apis">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Canvas Excercise</title>
+</head>
+<body>
+	<div>
+		<canvas id="first-canvas" width="500" height="450">
+			Your browser does not support the canvas element.
+		</canvas>
+	</div>
+	<div>
+		<canvas id="second-canvas" width="800" height="300">
+			Your browser does not support the canvas element.
+		</canvas>
+	</div>
+	<script src="js/canvas.js"></script>
+</body>
+</html>
diff --git a/03-HTML5-APIs/css/styles.css b/03-HTML5-APIs/css/styles.css
@@ -0,0 +1,3 @@
+.drag-over {
+	border: 2px solid red;
+}
diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="description" content="Exercise for HTML5Apis">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="css/styles.css">
+	<title>HTML5 APIs</title>
+</head>
+<body>
+	<h2>LocalStorage and IndexedDB</h2>
+	<form>
+		<label for="random-text">Write something:</label>
+		<br>
+		<textarea name="random-text" id="random-text" cols="30" rows="10"></textarea>
+		<br>
+		<button id="btn-save" type="submit">Save</button>
+	</form>
+	<br>
+	<button id="btn-delete">Delete data</button>
+	<hr>
+	<h2>WebSockets</h2>
+	<form>
+		<label for="ws-input">Write something:</label>
+		<br>
+		<textarea name="ws-input" id="ws-input" cols="30" rows="5"></textarea>
+		<br>
+		<button id="btn-send" type="submit">Send</button>
+	</form>
+	<br>
+	<div id="ws-output"></div>
+
+	<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,63 @@
+/* jshint esversion: 6 */
+
+document.addEventListener('DOMContentLoaded', function() {
+
+	/** FIRST CANVAS**/
+
+	let firstCanvas = document.querySelector('#first-canvas'),
+		ctx1 = firstCanvas.getContext("2d");
+
+	ctx1.fillStyle = getRndColor();
+	ctx1.strokeStyle = getRndColor();
+	ctx1.font = "18px Arial";
+
+	//Rectangle
+	ctx1.fillText("Rectangle:",0,20); 
+	ctx1.fillRect(0,40,150,75);
+
+	//Line
+	ctx1.fillText("Line:",0,150);
+	ctx1.moveTo(0,170);
+	ctx1.lineTo(200,170);
+	ctx1.stroke();
+
+	//Circle
+	ctx1.fillText("Circle:",0,220);
+	ctx1.beginPath();
+	ctx1.arc(100,320,70,0,2*Math.PI);
+	ctx1.stroke(); 
+
+	function getRndColor() {
+	    let r = 255*Math.random()|0,
+	        g = 255*Math.random()|0,
+	        b = 255*Math.random()|0;
+
+	    return `rgb(${r}, ${g}, ${b})`;
+	}
+
+	/** SECOND CANVAS**/
+
+	let secondCanvas = document.querySelector('#second-canvas'),
+		ctx2 = secondCanvas.getContext("2d"),
+		x = 10,
+		y = 40,
+		dx = 2,
+		dy = 0;
+
+	ctx2.font = "18px Arial";
+
+	setInterval(draw, 10);
+
+	function drawBall() {
+		ctx2.fillText("Start!",0,20);
+		ctx2.fillText("Finish!",740,20);
+	    ctx2.fillRect(x,y,150,75);
+	}
+
+	function draw() {
+    	ctx2.clearRect(0, 0, 800, 300);
+	    drawBall();
+	    x += dx;
+	    y += dy;
+	}
+});
diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js
@@ -0,0 +1,150 @@
+/* jshint esversion: 6 */
+
+let DB;
+
+const form = document.querySelector('form'),
+	  randomText = document.querySelector('#random-text'),
+	  btnDelete = document.querySelector('#btn-delete');
+
+document.addEventListener('DOMContentLoaded', () => {
+	//Create "texts" db
+	let newDB = window.indexedDB.open('texts', 1);
+
+	newDB.onerror = () => {
+		console.log('There was an error');
+	}
+
+	newDB.onsuccess = () => {
+		//Assign new db to DB variable
+		DB = newDB.result;
+		//console.log(DB);
+	}
+
+	//This function creates the schema of the new db
+	newDB.onupgradeneeded = function(e) {
+		let db = e.target.result;
+
+		let objectStore = db.createObjectStore('texts', { keyPath: 'key', autoIncrement: true } );
+
+		objectStore.createIndex('text', 'text', { unique: false } );
+
+		//By now data base is created and ready
+	}
+
+	//Now i have to add data when user submits form
+	form.addEventListener('submit' , addData);
+
+	function addData(e) {
+		e.preventDefault();
+
+		//New object with all data to insert into db
+		const newText = {
+			text: randomText.value
+		}
+
+		//Add text to local storage
+		localStorage.setItem('text', randomText.value);
+
+		//Insert new data into db
+		let transaction = DB.transaction(['texts'], 'readwrite');
+		let objectStore = transaction.objectStore('texts');
+		let query = objectStore.add(newText);
+
+		query.onsuccess = () => {
+			form.reset();
+			randomText.innerHTML = "";
+		}
+
+		transaction.oncomplete = () => {
+			console.log('Text added to db');
+		}
+
+		transaction.onerror = () => {
+			console.log('There was an error');
+		}
+	}
+
+	btnDelete.addEventListener('click', deleteData);
+
+	function deleteData(e) {
+		//Delete all from local storage
+		localStorage.clear();
+
+		//Delete all from IndexedDB
+		let transaction = DB.transaction(['texts'], 'readwrite');
+		let objectStore = transaction.objectStore('texts');
+		let query = objectStore.clear();
+
+		query.onsuccess = (e) => {
+	    	console.log('Data deleted succesfully');
+  		};
+	}
+
+	/** DRAG AND DROP **/
+
+	randomText.addEventListener('dragover', dragOverHandler);
+	randomText.addEventListener('dragleave', dragLeaveHandler);
+	randomText.addEventListener('drop', dropHandler);
+
+	function dropHandler(e) {
+		randomText.classList.remove('drag-over');
+		console.log('File(s) dropped');
+
+		e.preventDefault();
+
+	    let file = e.dataTransfer.files[0],
+	        reader = new FileReader();
+
+	    reader.readAsText(file);
+
+	    reader.onload = function(event) {
+	        //console.log(event.target);
+	        randomText.innerHTML = event.target.result;
+	    };
+	    //console.log(file);
+
+	    return false;
+	}
+
+	function dragOverHandler() {
+		randomText.classList.add('drag-over');
+	}
+
+	function dragLeaveHandler() {
+		randomText.classList.remove('drag-over');
+	}
+
+	/** WEB SOCKETS **/
+
+	let wsUri = "wss://echo.websocket.org/",
+		wsInput = document.getElementById('ws-input'),
+		wsOutput = document.getElementById('ws-output'),
+		btnSend = document.getElementById('btn-send');
+
+	btnSend.addEventListener('click', testWebSocket);
+
+	function testWebSocket(event) {
+		event.preventDefault();
+
+	    let websocket = new WebSocket(wsUri);
+
+	    websocket.onopen = (e) => { 
+	    	wsOutput.innerHTML += `CONNECTED<br>`;
+    		websocket.send(wsInput.value);
+    		wsOutput.innerHTML += `<b>SEND:</b> ${wsInput.value}<br>`;
+	    }
+
+	    websocket.onclose = (e) => {
+	    	wsOutput.innerHTML += `DISCONNECTED<br>`;
+	    }
+
+	    websocket.onmessage = (e) => {
+	    	wsOutput.innerHTML += `<b>RESPONSE:</b> ${e.data}<br>`;
+    		websocket.close();
+	    }
+
+	    websocket.onerror = (e) => {
+	    	wsOutput.innerHTML += `<b>ERROR:</b> ${e.data}<br>`;
+	    }
+	}
+});
diff --git a/03-HTML5-APIs/svg.html b/03-HTML5-APIs/svg.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="description" content="Exercise for HTML5Apis">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>SVG Excercise</title>
+</head>
+<body>
+	<svg width="800" height="400">
+		<g stroke="#000" fill="#fff" fill-opacity="0">
+			<circle cx="200" cy="200" r="100" />
+			<circle cx="340" cy="200" r="100" />
+			<circle cx="480" cy="200" r="100" />
+			<circle cx="620" cy="200" r="100" />
+		</g>
+	</svg>
+	<br>
+	<svg height="210" width="500">
+		<g stroke="#000" stroke-width="5">
+			<line x1="100" y1="50" x2="350" y2="50" />
+			<line x1="100" y1="100" x2="350" y2="100" />
+			<line x1="100" y1="150" x2="350" y2="150" />
+		</g>
+		<text x="150" y="200" style="font-size: 18px">Hamburguer Icon</text>
+	</svg> 
+</body>
+</html>