I am building an app in node.js ran into a problem because I couldn't get an HTMLElement
Is it possible to do something like
document.querySelector("#div")
Or
document.getElememtById("div")
But in Node.js express?
My code:
Index.js:
const express = require('express');
// App set up
const app = express();
app.get('/', (req, res) => {
res.sendFile("Public/index.html", {root: __dirname});
})
app.use(express.static('Public'));
// Listen
app.listen(3000, () => console.log('started'));
/index.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="div"> Hello world! </div>
</body>
</html>
Related
I want to build an application with Node.js and Svelte, but when I try to import a component it wasn't load.
Server side code:
const app = require("express")();
const http = require("http").Server(app);
const port = process.env.PORT || 8080;
const io = require("socket.io")(http);
const fs = require('fs')
const express = require('express')
app.get('/', (req, res) => {
res.write(fs.readFileSync('./pages/homepage.svelte', 'utf-8'));
res.end();
});
io.sockets.on('connection', function (socket) {
console.log('Utente connesso!')
});
http.listen(port, function() {
console.log("Listening on *:" + port);
});
Homepage.svelte:
<script>
import Component from './components/Component.svelte'
</script>
<!DOCTYPE html>
<html lang="it">
<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>SocialTree</title>
</head>
<body>
<Component />
</body>
</html>
Component.svelte code:
<div>
<h1>Test</h1>
</div>
Thanks in advice and sorry for bad english!
SI have an express server running. In the app.post ('/ login'), I have a data object that has a name and a password which i obtained from a form. I would like to forward this data to another EJS page.
app.js --> server
const express = require('express');
const app = express();
const port = 3000 || process.env.PORT;
app.use(express.json());
//Set the views + engine
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('index');
});
app.get('/about', (req, res) => {
res.render('about');
});
app.post('/login', (req, res) => {
const data = req.body;
res.render('about', {data: data}); //i want to send this data to the about page and priew it on the screen
});
app.listen(port, () => {
console.log(`Listening on port: ${port}`);
})
about.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Data</h1>
<p><%= data %></p> <!--Preview to entred data from the user here-->
</body>
</html>
So I am working on this calculator app using Express.js and when I use the res.send Method I am not receiving any kind of response now.
I expect my webpage to send me the sum as in the calculator.js file.
I am using nodemon as well.
This is HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form method="POST">
<input name='num1' placeholder='num1' type='text'>
<input name='num2' placeholder='num2' type='text'>
<button
type="submit" name="submit">Calculate</button></form>
<h1 class='answer'></h1>
</body>
</html>
This is calculator.js
const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require("body-parser");
const {
json,
urlencoded
} = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true
}));
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html")
});;
app.post("/", function (req, res) {
console.log(req.body);
var num1 = Number(req.body.num1);
var num2 = Number(req.body.num2);
var sum = num1 + num2;
res.send(sum);
});
app.listen(port, () => console.log(`Example app listening on port port!`))
you can't use res.send() to send number, it will be sent as a http status code. You can simply convert calculated sum to string and then send it:
res.send(sum.toString())
res.send has been deprecated in the latest version of Express (4.17.1).
Using res.sendStatus instead solved my problem.
I tried importing modules but they were not found
const express = require('express');
const app = express();
const view = __dirname + '/view/';
app.get('/', function (req, res) {
res.sendFile(path.join(view + 'home.html'));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<h1>ok</h1>
</body>
<script>
import data from 'input-plugin-date';
</script>
</html>
how do I import plugins or anything on the express router because I need them
I have recently started using node.js and while using body parser I stumbled upon an error which i have no clue about.
I get an error cannot read property 'date' of undefined although i am mentioning date in my html part.
my codes are as follows:
app.js:
var moment = require('moment');
var express = require('express');
var bodyparser = require('body-parser');
var app = express();
app.set('view engine','ejs');
app.get('/',function(req,res){
res.render('index');
})
app.get('/ans', function(req,res){
res.render('ans');
})
app.post('/', function(req,res){
var date = req.body.date;
console.log(date);
res.render('ans',{"date": date});
});
app.listen(3000,function(err){
if(err) console.log(err);
else
console.log("App is running");
});
index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>timestamp</title>
</head>
<body>
<h1>API Basejump: Timestamp microservice</h1>
<h2>Enter the date</h2>
<form action="/" method="post" >
<input type="text" name="date">
<input type="submit">
</form>
</body>
</html>
ans.ejs:
<!DOCTYPE html>
<html>
<head>
<title>timestamp</title>
</head>
<body>
<h1>API Basejump: Timestamp microservice</h1>
<p>Date: <% date %></p>
</body>
</html>
You need to setup express to use body-parser
var app = express();
app.use(bodyParser.urlencoded({ extended: false }))