I created a HTML5 canvas code to generate rectangular blocks and used JavaScript to create a new block every time a button is clicked. And, every time the block is clicked, some data is displayed. This data is stored in the local web storage (SQLite). Now, I've done all this using HTMLL5 canvas, JavaScript, JQuery, SQLite. I'm now tasked with converting the whole thing into Angular, but I'm unfamiliar with it. Can someone please help me out.
What I have tried:
HTML
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<br><br>
<script src="myjs.js"></script>
<button type="button" id="button">
Create
</button>
<p id="demo"></p>
<canvas id="test" class="test"></canvas>
<div id = "status" name = "status"></div>
</body>
</html>
Javascript
$(document).ready(function(){
var c = document.getElementById("test");
var ctx=c.getContext("2d");
var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
ctx.fillRect(20, 20, 150, 100);
ctx.font="30px Arial";
ctx.fillText(0,250,75);
ctx.stroke();
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
var j=Math.random()*4;
var k=Math.random()*4;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOG11 (id,id1)');
tx.executeSql('INSERT INTO LOG11 (id,id1) VALUES (?,?)',[j,k]);
});
c.addEventListener('click', function(event) {
document.getElementById("demo").innerHTML="Transaction id is "+j+"<br />"+"Transaction id is "+k;
});
$('#button').click(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);
});
var i=0;
$('#button').click(function() {
i++;
var j=Math.random()*4;
var k=Math.random()*4;
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
ctx2.fillRect(20, 20, 150, 100);
ctx2.font="30px Arial";
ctx2.fillText(i,250,75 );
ctx2.stroke();
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('INSERT INTO LOG11 (id,id1) VALUES (?,?)',[j,k]);
});
e.addEventListener('click', function(event) {
document.getElementById("demo").innerHTML="Transaction id is "+j+"<br />"+"Transaction id is "+k;
});
});
});
Submit an article or tip