From 502a11b31a980bb026735b11936e36d21dbaf984 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Mon, 29 Oct 2018 23:08:36 -0300 Subject: [PATCH 01/14] Ej1: Created a page with a textarea and a save button --- 03-HTML5-APIs/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 03-HTML5-APIs/index.html diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html new file mode 100644 index 00000000..230a75e1 --- /dev/null +++ b/03-HTML5-APIs/index.html @@ -0,0 +1,20 @@ + + + + + + + + HTML5 APIs + + +
+ +
+ +
+ +
+ + + \ No newline at end of file From 8e26ca93c0cd402592121d1cffe99faaed1f04df Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Mon, 29 Oct 2018 23:14:45 -0300 Subject: [PATCH 02/14] Ej1: Save data using localStorage and IndexedDB --- 03-HTML5-APIs/js/main.js | 64 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 03-HTML5-APIs/js/main.js diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js new file mode 100644 index 00000000..9214c661 --- /dev/null +++ b/03-HTML5-APIs/js/main.js @@ -0,0 +1,64 @@ +/* jshint esversion: 6 */ + +let DB; + +const form = document.querySelector('form'), + randomText = document.querySelector('#random-text'); + +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(); + } + + transaction.oncomplete = () => { + console.log('Text added to db'); + } + + transaction.onerror = () => { + console.log('There was an error'); + } + } +}); \ No newline at end of file From 8efbc204da8117cecce95a4c38fcd637692f05c1 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Mon, 29 Oct 2018 23:32:32 -0300 Subject: [PATCH 03/14] Ej1: Added a button to delete data from localStorage and IndexedDB --- 03-HTML5-APIs/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html index 230a75e1..577e11b8 100644 --- a/03-HTML5-APIs/index.html +++ b/03-HTML5-APIs/index.html @@ -13,8 +13,10 @@

- + +
+ \ No newline at end of file From 921dce8d7d010a46ae2a31f55aeda35bb9289fec Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Mon, 29 Oct 2018 23:33:56 -0300 Subject: [PATCH 04/14] Ej1: Created a function that listen to an event, to delete data from localStorage and IndexedDB --- 03-HTML5-APIs/js/main.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js index 9214c661..e02fcf73 100644 --- a/03-HTML5-APIs/js/main.js +++ b/03-HTML5-APIs/js/main.js @@ -3,7 +3,8 @@ let DB; const form = document.querySelector('form'), - randomText = document.querySelector('#random-text'); + randomText = document.querySelector('#random-text'), + btnDelete = document.querySelector('#btn-delete'); document.addEventListener('DOMContentLoaded', () => { //Create "texts" db @@ -61,4 +62,20 @@ document.addEventListener('DOMContentLoaded', () => { 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'); + }; + } }); \ No newline at end of file From 2c2e81431037f6c67e5658f008fc17de70384a12 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 10:35:08 -0300 Subject: [PATCH 05/14] Linked css file to index.html --- 03-HTML5-APIs/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html index 577e11b8..70ce3167 100644 --- a/03-HTML5-APIs/index.html +++ b/03-HTML5-APIs/index.html @@ -5,6 +5,7 @@ + HTML5 APIs From 6acea6d6ff22571d965f99ab0bc2a27d97007fbf Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 10:36:11 -0300 Subject: [PATCH 06/14] Created folder css with styles.css --- 03-HTML5-APIs/css/styles.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 03-HTML5-APIs/css/styles.css 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 From 38a3fb3a64ac98c7a6f5e364a66d5db33aafc66c Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 10:36:56 -0300 Subject: [PATCH 07/14] Ej2: Drag and drop events --- 03-HTML5-APIs/js/main.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js index e02fcf73..e2b0d8ec 100644 --- a/03-HTML5-APIs/js/main.js +++ b/03-HTML5-APIs/js/main.js @@ -52,6 +52,7 @@ document.addEventListener('DOMContentLoaded', () => { query.onsuccess = () => { form.reset(); + randomText.innerHTML = ""; } transaction.oncomplete = () => { @@ -78,4 +79,38 @@ document.addEventListener('DOMContentLoaded', () => { 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'); + } }); \ No newline at end of file From 05aea07cc0bde65ccdf8d44f7db2a0b7d064198c Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 12:30:51 -0300 Subject: [PATCH 08/14] Ej3: Added some elements to play with websockets --- 03-HTML5-APIs/index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/03-HTML5-APIs/index.html b/03-HTML5-APIs/index.html index 70ce3167..a86a0d39 100644 --- a/03-HTML5-APIs/index.html +++ b/03-HTML5-APIs/index.html @@ -9,6 +9,7 @@ HTML5 APIs +

LocalStorage and IndexedDB


@@ -18,6 +19,18 @@

+
+

WebSockets

+
+ +
+ +
+ +
+
+
+ \ No newline at end of file From 6cf2b31e56fdd68c89b873c7e67f8c1eab5ecfb1 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 12:31:53 -0300 Subject: [PATCH 09/14] Ej3: Comunication with websockets --- 03-HTML5-APIs/js/main.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/03-HTML5-APIs/js/main.js b/03-HTML5-APIs/js/main.js index e2b0d8ec..99c8a72e 100644 --- a/03-HTML5-APIs/js/main.js +++ b/03-HTML5-APIs/js/main.js @@ -113,4 +113,38 @@ document.addEventListener('DOMContentLoaded', () => { 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 From 28b63a8d767d1d7aa497c1ffab46aa8e7f15b159 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Tue, 30 Oct 2018 18:48:25 -0300 Subject: [PATCH 10/14] Ej4: Created a web page using SVG elements --- 03-HTML5-APIs/svg.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 03-HTML5-APIs/svg.html 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 + + + + + + + + + + +
+ + + + + + + Hamburguer Icon + + + \ No newline at end of file From e2c9524e4f72d31eb8b8a48dbb4711abea44c5bb Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Wed, 31 Oct 2018 15:03:36 -0300 Subject: [PATCH 11/14] Ej5.1: Created a web page with canvas elements --- 03-HTML5-APIs/canvas.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 03-HTML5-APIs/canvas.html diff --git a/03-HTML5-APIs/canvas.html b/03-HTML5-APIs/canvas.html new file mode 100644 index 00000000..dd551acd --- /dev/null +++ b/03-HTML5-APIs/canvas.html @@ -0,0 +1,19 @@ + + + + + + + + Canvas Excercise + + +
+ + Your browser does not support the canvas element. + +
+ + + + \ No newline at end of file From e4820935b8ff3bdf969a91c9a0fbef1d3cc5381b Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Wed, 31 Oct 2018 15:04:48 -0300 Subject: [PATCH 12/14] Ej5.1: Created a web page with canvas elements --- 03-HTML5-APIs/js/canvas.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 03-HTML5-APIs/js/canvas.js diff --git a/03-HTML5-APIs/js/canvas.js b/03-HTML5-APIs/js/canvas.js new file mode 100644 index 00000000..7701e9df --- /dev/null +++ b/03-HTML5-APIs/js/canvas.js @@ -0,0 +1,37 @@ +/* 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})`; + } +}); \ No newline at end of file From b85712de40e5a6a885b020f096caa5c4fd465b81 Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Wed, 31 Oct 2018 15:06:40 -0300 Subject: [PATCH 13/14] Ej5.2: Added a new a canvas element --- 03-HTML5-APIs/canvas.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/03-HTML5-APIs/canvas.html b/03-HTML5-APIs/canvas.html index dd551acd..efbc2603 100644 --- a/03-HTML5-APIs/canvas.html +++ b/03-HTML5-APIs/canvas.html @@ -13,7 +13,11 @@ Your browser does not support the canvas element. - +
+ + Your browser does not support the canvas element. + +
\ No newline at end of file From 399f610b09fae3247464d9d68fcf824618928ebe Mon Sep 17 00:00:00 2001 From: Gustavo Ercoli Date: Wed, 31 Oct 2018 15:08:05 -0300 Subject: [PATCH 14/14] Ej5.2: Added function to animate rectangle when page is loaded --- 03-HTML5-APIs/js/canvas.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/03-HTML5-APIs/js/canvas.js b/03-HTML5-APIs/js/canvas.js index 7701e9df..de1eabd3 100644 --- a/03-HTML5-APIs/js/canvas.js +++ b/03-HTML5-APIs/js/canvas.js @@ -34,4 +34,30 @@ document.addEventListener('DOMContentLoaded', function() { 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