Import/export implementation using Handlebars and Node.js/Express - javascript

I am trying to implement import/export using handlebars with nodejs/express. For some reason it gives me the following error Uncaught SyntaxError: Unexpected token {
File - api.js
import { getSymbolDb, executeEnterKey } from './fetchData'
const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)
File - fetchData.js
export function getSymbolDb() {}
export function executeEnterKey(event) {}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{{body}}}
<script src="/JS/api.js"></script>
<script src="/JS/fetchData.js"></script>
</body>
</html>


Solution
Here you will find more information on the subject. The following code is the basic example you can start with.
File - api.mjs
import { getSymbolDb, executeEnterKey } from './fetchData.mjs'
const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)
File - fetchData.mjs
export function getSymbolDb() {}
export function executeEnterKey(event) {}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{{body}}}
<script type="module" src="/JS/api.mjs"></script>
<script nomodule src="fallback.js"></script>
</body>
</html>

Related

Java script google api to get authorization code

I done this code using tutorial but it does not work, it simply does open pop-up to enter your credentials for google. What is wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="sign-in-button">Sign in</button>
<script src="https://apis.google.com/js/api.js"></script>
<script>
gapi.auth2.init({
client_id: "655720894976-2rkkoov9efteqna8hq3vbc632brur2jf.apps.googleusercontent.com"
});
document.getElementById("sign-in-button").addEventListener("click", function() {
// Get an authorization code
gapi.auth2.getAuthInstance().grantOfflineAccess({
scope: "https://www.googleapis.com/auth/cloud-platform"
}).then(function(response) {
var authorizationCode = response.code;
});
});
</script>
</body>
</html>

Select event - Why is nothing displayed in the console?

Why is nothing displayed in the console when selecting text?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
dhksdh lsjkdlskdj s fjlkfjs d lsdjslkdj s sldjsldkj s
<script>
const onSelect = () => {
console.log('onSelect text')
}
document.body.addEventListener('select', onSelect)
</script>
</body>
</html>
Maybe I wrote something wrong?

How to highlight syntax while on offline status?

I'm trying to make local code editor github-dark theme based with highlight.js library. But when importing from local file (literally copied source code on https://unpkg.com/highlighted-code#0.3.7/min.js) and stored it on min.js file.
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
textarea[is="highlighted-code"] {
padding: 18px;
width: 1200px;
}
</style>
<script type="module">
(async ({ chrome, netscape }) => {
const { default: HighlightedCode } =
await import('min.js');
HighlightedCode.useTheme('github-dark');
})(self);
</script>
</head>
<body>
<textarea is="highlighted-code" cols="80" rows="12" language="javascript" tab-size="2" auto-height>
</textarea>
</body>
</html>
Sadly, it is only working when I am connected to internet. I want to use it even I am not connected to internet.

HTML button onclick function not recognised in JavaScript

I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!

<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.

You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.

DOM html tag from server-side nodejs

How to append tag inside div id=demo? I use nodejs.
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
server.js
app.get(":/blog", (req,res) => {
res.sendfile("blog.html");
}

Categories

Resources