I just coded this for my personal use, but thought someone else also might be interested in – https://github.com/ninethsense/WordPronounce
JavaScript Notification API for beginners
Just two steps:
- Ask user the permission to send notifications
Notification.requestPermission();
2. Create/send notifiation
notificaiton = new Notification (‘This is a notification’);
Coding for fun: JavaScript based simple doodle
Here is a pure JavaScript based, basic drawing tool. It supports both mouse and tap.
Demo URL: https://ninethsense.github.io/code-share/Doodle/
001
<html>
002 <head>
003 <meta http-equiv="content-type" content="text/html; charset=utf-8">
004 <style>
005 body {
006 margin: 0 0;
007 overflow:hidden;
008 cursor:url(pencil1.cur), auto;
009 touch-action: none;
010 }
011 #d {
012 display: flex;
013 }
014 #sb {
015 background-color: #ddd;
016 box-shadow: 2px 2px 5px;
017 padding: 2 2;
018 position:absolute;
019 top:0;
020 left:0;
021 }
022 #sb input {
023 min-width:100px;
024 min-height:70px;
025 }
026 #sb input {
027 font-family: Arial, Helvetica, sans-serif;
028 font-size: 13pt;
029 font-weight:bold;
030 cursor: pointer;
031 }
032 </style>
033 </head>
034 <body>
035 <div id="sb">
036 <input type="button" value="C L E A R" id="clear" />
037 </div>
038 <canvas id="d"></div>
039
040 <script>
041 var d = document.getElementById("d");
042 d.width = window.innerWidth;
043 d.height = window.innerHeight;
044 var ctx = d.getContext("2d");
045 ctx.lineWidth = 3;
046 px=0, py=0;clk=false;
047
048
049
050 startdraw = function(e) {
051 px = e.clientX - d.offsetLeft;
052 py = e.clientY - d.offsetTop;
053 clk = true;
054 }
055
056 draw = function(e) {
057
058 if (clk) {
059 e = e.touches?e.touches[0]:e;
060 ctx.beginPath();
061 ctx.moveTo(px,py);
062 px = e.clientX - d.offsetLeft;
063 py = e.clientY - d.offsetTop;
064 ctx.lineTo(px,py);
065 ctx.strokeStyle = '#ff0000';
066 ctx.stroke();
067 ctx.closePath();
068 }
069 }
070
071 document.getElementById("clear").addEventListener("click", function() {
072 if (confirm("Clear the whiteboard?")) {
073 ctx.clearRect(0,0,d.width,d.height);
074 }
075 });
076
077 d.addEventListener("touchstart", startdraw);
078 d.addEventListener("mousemove", draw, false);
079 d.addEventListener("mousedown", startdraw, false);
080 d.addEventListener("touchmove", draw, false);
081 d.addEventListener("mouseup", function() { clk = false });
082 d.addEventListener("touchend", function() { clk = false });
083
084 </script>
085 </body>
086 </html>
View in GitHub | Made with wp-showgithubfile plugin
002 <head>
003 <meta http-equiv="content-type" content="text/html; charset=utf-8">
004 <style>
005 body {
006 margin: 0 0;
007 overflow:hidden;
008 cursor:url(pencil1.cur), auto;
009 touch-action: none;
010 }
011 #d {
012 display: flex;
013 }
014 #sb {
015 background-color: #ddd;
016 box-shadow: 2px 2px 5px;
017 padding: 2 2;
018 position:absolute;
019 top:0;
020 left:0;
021 }
022 #sb input {
023 min-width:100px;
024 min-height:70px;
025 }
026 #sb input {
027 font-family: Arial, Helvetica, sans-serif;
028 font-size: 13pt;
029 font-weight:bold;
030 cursor: pointer;
031 }
032 </style>
033 </head>
034 <body>
035 <div id="sb">
036 <input type="button" value="C L E A R" id="clear" />
037 </div>
038 <canvas id="d"></div>
039
040 <script>
041 var d = document.getElementById("d");
042 d.width = window.innerWidth;
043 d.height = window.innerHeight;
044 var ctx = d.getContext("2d");
045 ctx.lineWidth = 3;
046 px=0, py=0;clk=false;
047
048
049
050 startdraw = function(e) {
051 px = e.clientX - d.offsetLeft;
052 py = e.clientY - d.offsetTop;
053 clk = true;
054 }
055
056 draw = function(e) {
057
058 if (clk) {
059 e = e.touches?e.touches[0]:e;
060 ctx.beginPath();
061 ctx.moveTo(px,py);
062 px = e.clientX - d.offsetLeft;
063 py = e.clientY - d.offsetTop;
064 ctx.lineTo(px,py);
065 ctx.strokeStyle = '#ff0000';
066 ctx.stroke();
067 ctx.closePath();
068 }
069 }
070
071 document.getElementById("clear").addEventListener("click", function() {
072 if (confirm("Clear the whiteboard?")) {
073 ctx.clearRect(0,0,d.width,d.height);
074 }
075 });
076
077 d.addEventListener("touchstart", startdraw);
078 d.addEventListener("mousemove", draw, false);
079 d.addEventListener("mousedown", startdraw, false);
080 d.addEventListener("touchmove", draw, false);
081 d.addEventListener("mouseup", function() { clk = false });
082 d.addEventListener("touchend", function() { clk = false });
083
084 </script>
085 </body>
086 </html>
A basic JavaScript drawing interpreter
Coding for fun… An attempt to make a fully JavaScript based canvas drawing interpreter in മലയാളം/Malayalam.
Try in action here – https://ninethsense.github.io/code-share/CanvasDrawing/
Source Code:
001
<html>
002 <head>
003 <meta http-equiv="content-type" content="text/html; charset=utf-8">
004 <style>
005 #c {
006 display: flex;
007 width:100%;
008 height:100%;
009 }
010 #t {
011 width:100%;
012 }
013 .col {
014 flex:1;min-height:80%;
015 background-color: #eee;
016 margin:1px 1px;
017 }
018 #e {
019 font-family: monospace;
020 font-weight: bold;
021 font-size:12pt;
022 caret-color: red;
023 }
024 </style>
025 </head>
026 <body>
027 <div style="display:flex;min-height:80%;border:solid 1px black;">
028 <div id="e" class="col" contenteditable>
029 മായ്ക്കുക<br>
030 രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =200)<br>
031 വൃത്തം (ഇടത്=200, മുകൾ=200, ആരം=50, നിറം ="പച്ച" )<br>
032 ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200)<br>
033 ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200, നിറം = "ചുവപ്പ്")<br>
034 രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =300, നിറം ="#0000ff")
035 </div>
036 <div class="col">
037 <canvas id="c"></canvas>
038 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
039 </svg>
040 </div>
041 </div>
042
043 <input type="button" value="Draw" id="ok" />
044
045
046 <script>
047 var c = document.getElementById("c");
048 c.width = c.offsetWidth;
049 c.height = c.offsetHeight;
050 var cx = c.getContext("2d");
051
052 document.getElementById("ok").addEventListener("click", function(){
053
054 var pgm = document.getElementById("e").innerText;
055 var lines = pgm.split("\n");
056
057 lines.forEach(function(stmt, i) {
058 if (!stmt.trim()) return;
059
060 var cmd = stmt.split(/{|\(| /)[0];
061
062 var params = stmt.replace(cmd, "" ).replace(/=/g,":").replace(/\(/g,"{").replace(/\)/g,"}");
063
064
065 params = params.replace(/ഇടത്|മുകൾ|ആരം|വീതി|ഉയരം|നിറം/gi, function(matched){
066 return {
067 "ഇടത്":"\"left\"",
068 "മുകൾ":"\"top\"",
069 "ആരം":"\"radius\"",
070 "വീതി":"\"width\"",
071 "ഉയരം":"\"height\"",
072 "നിറം":"\"color\""
073 }[matched];
074 });
075 var col = {"പച്ച":"#00ff00", "ചുവപ്പ്":"#ff0000", "നീല":"#0000ff"};
076
077 var j = {};
078 try {
079 j = JSON.parse( params );
080
081 } catch {
082 if (cmd != "മായ്ക്കുക") {
083 Err();
084 return;
085 }
086 }
087
088 if ('color' in j) {
089 if (j.color in col) {
090 cx.strokeStyle = col[j.color];
091 } else {
092 cx.strokeStyle = j.color;
093 }
094 } else {
095 cx.strokeStyle = "#000";
096 }
097
098 cx.beginPath();
099 switch(cmd) {
100 case "മായ്ക്കുക":
101 cx.clearRect(0,0,c.offsetWidth,c.offsetHeight);
102 break;
103 case "വൃത്തം":
104 if ( !Number.isInteger(j.left) || !Number.isInteger(j.top) || !Number.isInteger(j.radius)) {
105 Err();
106 }
107 cx.arc(j.left, j.top,j.radius,0, 2 * Math.PI, false);
108 break;
109 case "രേഖ":
110 cx.moveTo(j.left, j.top);
111 cx.lineTo(j.width, j.height);
112 break;
113 case "ചതുരം":
114 cx.rect(j.left, j.top, j.width, j.height);
115 break;
116 default:
117 Err();
118 break;
119 }
120 function Err() {
121 alert(`Syntax Error in "${cmd}" at line ${i+1}`);
122 }
123
124 if (cmd != "മായ്ക്കുക") cx.stroke();
125 cx.closePath();
126 });
127 });
128
129 </script>
130 </body>
131 </html>
View in GitHub | Made with wp-showgithubfile plugin
002 <head>
003 <meta http-equiv="content-type" content="text/html; charset=utf-8">
004 <style>
005 #c {
006 display: flex;
007 width:100%;
008 height:100%;
009 }
010 #t {
011 width:100%;
012 }
013 .col {
014 flex:1;min-height:80%;
015 background-color: #eee;
016 margin:1px 1px;
017 }
018 #e {
019 font-family: monospace;
020 font-weight: bold;
021 font-size:12pt;
022 caret-color: red;
023 }
024 </style>
025 </head>
026 <body>
027 <div style="display:flex;min-height:80%;border:solid 1px black;">
028 <div id="e" class="col" contenteditable>
029 മായ്ക്കുക<br>
030 രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =200)<br>
031 വൃത്തം (ഇടത്=200, മുകൾ=200, ആരം=50, നിറം ="പച്ച" )<br>
032 ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200)<br>
033 ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200, നിറം = "ചുവപ്പ്")<br>
034 രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =300, നിറം ="#0000ff")
035 </div>
036 <div class="col">
037 <canvas id="c"></canvas>
038 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
039 </svg>
040 </div>
041 </div>
042
043 <input type="button" value="Draw" id="ok" />
044
045
046 <script>
047 var c = document.getElementById("c");
048 c.width = c.offsetWidth;
049 c.height = c.offsetHeight;
050 var cx = c.getContext("2d");
051
052 document.getElementById("ok").addEventListener("click", function(){
053
054 var pgm = document.getElementById("e").innerText;
055 var lines = pgm.split("\n");
056
057 lines.forEach(function(stmt, i) {
058 if (!stmt.trim()) return;
059
060 var cmd = stmt.split(/{|\(| /)[0];
061
062 var params = stmt.replace(cmd, "" ).replace(/=/g,":").replace(/\(/g,"{").replace(/\)/g,"}");
063
064
065 params = params.replace(/ഇടത്|മുകൾ|ആരം|വീതി|ഉയരം|നിറം/gi, function(matched){
066 return {
067 "ഇടത്":"\"left\"",
068 "മുകൾ":"\"top\"",
069 "ആരം":"\"radius\"",
070 "വീതി":"\"width\"",
071 "ഉയരം":"\"height\"",
072 "നിറം":"\"color\""
073 }[matched];
074 });
075 var col = {"പച്ച":"#00ff00", "ചുവപ്പ്":"#ff0000", "നീല":"#0000ff"};
076
077 var j = {};
078 try {
079 j = JSON.parse( params );
080
081 } catch {
082 if (cmd != "മായ്ക്കുക") {
083 Err();
084 return;
085 }
086 }
087
088 if ('color' in j) {
089 if (j.color in col) {
090 cx.strokeStyle = col[j.color];
091 } else {
092 cx.strokeStyle = j.color;
093 }
094 } else {
095 cx.strokeStyle = "#000";
096 }
097
098 cx.beginPath();
099 switch(cmd) {
100 case "മായ്ക്കുക":
101 cx.clearRect(0,0,c.offsetWidth,c.offsetHeight);
102 break;
103 case "വൃത്തം":
104 if ( !Number.isInteger(j.left) || !Number.isInteger(j.top) || !Number.isInteger(j.radius)) {
105 Err();
106 }
107 cx.arc(j.left, j.top,j.radius,0, 2 * Math.PI, false);
108 break;
109 case "രേഖ":
110 cx.moveTo(j.left, j.top);
111 cx.lineTo(j.width, j.height);
112 break;
113 case "ചതുരം":
114 cx.rect(j.left, j.top, j.width, j.height);
115 break;
116 default:
117 Err();
118 break;
119 }
120 function Err() {
121 alert(`Syntax Error in "${cmd}" at line ${i+1}`);
122 }
123
124 if (cmd != "മായ്ക്കുക") cx.stroke();
125 cx.closePath();
126 });
127 });
128
129 </script>
130 </body>
131 </html>