diff --git a/03-HTML5-APIs/canvas.html b/03-HTML5-APIs/canvas.html
new file mode 100644
index 00000000..efbc2603
--- /dev/null
+++ b/03-HTML5-APIs/canvas.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+ Canvas Excercise
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/03-HTML5-APIs/css/styles.css b/03-HTML5-APIs/css/styles.css
new file mode 100644
index 00000000..adc98f89
--- /dev/null
+++ b/03-HTML5-APIs/css/styles.css
@@ -0,0 +1,3 @@
+.drag-over {
+ border: 2px solid red;
+}
\ No newline at end of file
diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html
new file mode 100644
index 00000000..a86a0d39
--- /dev/null
+++ b/03-HTML5-APIs/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+ HTML5 APIs
+
+
+ LocalStorage and IndexedDB
+
+
+
+
+ WebSockets
+
+
+
+
+
+
+
\ 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..de1eabd3
--- /dev/null
+++ 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;
+ }
+});
\ 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..99c8a72e
--- /dev/null
+++ 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
`;
+ websocket.send(wsInput.value);
+ wsOutput.innerHTML += `SEND: ${wsInput.value}
`;
+ }
+
+ websocket.onclose = (e) => {
+ wsOutput.innerHTML += `DISCONNECTED
`;
+ }
+
+ websocket.onmessage = (e) => {
+ wsOutput.innerHTML += `RESPONSE: ${e.data}
`;
+ websocket.close();
+ }
+
+ websocket.onerror = (e) => {
+ wsOutput.innerHTML += `ERROR: ${e.data}
`;
+ }
+ }
+});
\ 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..c44ca972
--- /dev/null
+++ b/03-HTML5-APIs/svg.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+ SVG Excercise
+
+
+
+
+
+
+
\ No newline at end of file