const name = 'Mazhar';
const age = 31;
const job = 'Web Developer';
const city = 'Mumbai';
let html;
html = '
<ul>
<li>Name: ${name}</li>
<li>Age: ${age}</li>
<li>Job: ${job}</li>
<li>City: ${city}</li>
</ul>
';
document.body.innerHTML = html;
Hi my this code is not working. I have put it in .js file and linked it to my html file and checking in the console.
Thank You
okay So i had to add this line :
on the body of my html page. I had added it in under section
Related
I am making a blog using markdown.
From next.js.
After reading markdown using fs, the process of converting it to html is as follows.
const markdownToHtml = async (markdownValue: string) => {
const processedValue = await unified()
.use(remarkParse)
.use(remarkHtml)
.process(markdownValue)
const stringedValue = processedValue.toString()
return stringedValue
}
This allowed me to express markdown as my blog post.
However, I would like to provide several posts and 'previews' on other pages.
Like this page.
enter image description here
In order to do that, I want to print only the p-tag.
<h2>sorry..</h2>
<p>Hi!</p>
<p><img src="/assets/cardTmp.jpg" alt="tmp"></p>
<p>hello world</p>
<p><strong>bye</strong></p>
All I need is 'Hi! hello world bye'.
Should I use a regular expression or javascript function?
Do you have any recommended methods or libraries?
I tried to use a regular expression, but I'm sure there's a cleaner and clearer way.
You can do that :
// Parse the HTML string into a DOM tree
const doc = new DOMParser().parseFromString(html, 'text/html');
// Get all the <p> tags from the document
const presult = doc.getElementsByTagName('p');
// Loop through the <p> tags
for (let i = 0; i < presult .length; i++) {
console.log(presult[i].textContent);
}
I fetched a html page as a string and would like to retrieve the text between tags and get a value from a json key.
In javascript, this works :
For instance, if the string is :
<!doctype html>
<html lang="fr-FR">
<head>
<script>
window.changeTargetingData = {
"petition":{
"id":"19197290",
"signatureCount":{"total":323030,"displayed":323030}
}
};
</script>
</head>
</html>
This gives me what I want in javascript :
const doc = new DOMParser().parseFromString(textResponse, 'text/html');
const script = doc.querySelector('script');
const objJSON = script.textContent.match(/window.changeTargetingData = ([^]+);/)[1];
const obj = JSON.parse(objJSON);
console.log(obj.petition.signatureCount.total);
but I didn't find DOMParser or any DOM requests in corvid. Does anything exists to get a value from a html page ?
Thanks.
OK, you just need to change what is written on the doc.
It's :
import { JSDOM } from 'jsdom';
const domm = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(domm.window.document.querySelector("p").textContent);
and now it works....
I have a stylesheet I created in the "public" directory of my express app. It is called app.css.
I've added a link tag to an ejs file, where I want the style to apply.
It will not apply the style.
I have told express to serve the public directory with an app.use as you can see in my code below:
var express = require('express');
var app = express();
app.use(express.static("public"));
app.get("/mynameis/:name", function(req, res){
var name = req.params.name;
res.render("app.ejs", {name: name});
});
app.get("/posts", function(req, res){
var posts = [
{band: "Led Zeppelin", album: "Houses Of The holy"},
{band: "Pink Floyd", album: "Animals"}
];
res.render("posts.ejs", {posts:posts});
})
The ejs file looks like this:
<link rel="stylesheet" href="app.css">
<h1> The Posts Page</h1>
<% for(var i = 0; i < posts.length; i++){ %>
<li><%= posts[i].band %> - <%= posts[i].album %> </li>
<% }; %>
The css looks like this:
body {
background:blue;
}
What is going on? Why won't the ejs file recognize my stylesheet?
I was having similar issues but this line helped me:
app.use(express.static(__dirname + '/public'));
It also looks like you're missing a "/" in front of app.css. Right now, it is being read as "publicapp.css", so you need the forward-slash to make it "public/app.css".
I hope that helps
I know similar questions have been asked before, but I've had a good look through & unfortunately none of the answers are helping me.
My CSS file is being ignored in certain circumstances.
So in my app.js file I have this code, defining my view engine setup
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
In my index.js file I have the following the code for UserList page
/* GET Userlist page. */
router.get('/userlist', function(req, res) {
var db = req.db; // (1) Extract the db object we passed to our HTTP request
var collection = db.get('usercollection'); // (2) Tell our app which collection we want to use
// (3) Find (query) results are returned to the docs variable
collection.find({},{},function(e,docs){
res.render('userlist', { "userlist" : docs }); // (4) Render userlist by passing returend results to said variable
});
});
Finally, my userlist.ejs page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
<link rel='stylesheet' href='/stylesheets/style.css' type="text/css" />
</head>
<body>
<h1>User List</h1>
<ul>
<%
var list = '';
for (i = 0; i < userlist.length; i++) {
list += '<li>' + userlist[i].username + '</li>';
}
return list;
%>
</ul>
</body>
</html>
But when I run my page the CSS file is not loaded. However if I exclude this code:
<%
var list = '';
for (i = 0; i < userlist.length; i++) {
list += '<li>' + userlist[i].username + '</li>';
}
return list;
%>
The CSS file is loaded and applied without issue. Can anyone tell me why this is please? Apologies for the newbie question, but I've been trying to figure this out for ages.
I should mention the 'h1' tags are ignored too. The only thing rendered is the list items.
Not sure if its relevant, but my app is connecting to MongoDB to return the user data.
Any assistance would be very much appreciated!
Thank you!
Make sure that your CSS file is either defined as an endpoint in your index.js file or make sure that public/stylesheets/style.css exists so it can be loaded through the app.use(express.static(path.join(__dirname, 'public'))); command.
I'm trying to figure out how to render all the pages in a page collection on a single page. I want all my posts after each other in the generated index.html, like on a blog's front page.
The file structure is
src/
index.hbs
posts/
post-1.hbs
post-2.hbs
post-3.hbs
The below does almost what I'm looking for.
<section>
{{#each pages}}
<article>
<header>
<h2>{{data.title}}</h2>
</header>
{{page}}
</article>
{{/each}}
</section>
What am I missing?
Excuse the quick and dirty answer, I wanted to get it up here as quickly as possible. I'll clean it up in a day or two. (2013-09-26)
After working on this I ended up making a Handlebars helper that I could use in the index.hbs template. With it, I end up with the below Handlebars template for index.hbs.
index.hbs
---
title: Home
---
<p>I'm a dude. I live in Stockholm, and most of the time I work with Goo.</p>
<section>
{{#md-posts 'src/posts/*.*'}}
<article>
<h2>{{title}}</h2>
{{#markdown}}
{{{body}}}
{{/markdown}}
</article>
{{/md-posts}}
</section>
Folder structure
src/
index.hbs
posts/
post-1.hbs
post-2.hbs
post-3.md // <--- Markdown with Handlebars
Gruntfile.coffee
assemble:
options:
flatten: true
layout: 'layouts/default.hbs'
assets: 'public/assets'
helpers: 'src/helpers/helper-*.js'
root: // this is my target
src: 'src/*.hbs' // <--- Only assemble files at source root level
dest: 'public/'
src/helpers/helper-md-posts.js
This helper takes a glob expression, reads the files, extracts the YAML front matter, compiles the body source, and finally adds it all to the Handlebars block context. The helper is somewhat misnames, as it doesn't actually compile Markdown... so naming suggestions are welcome.
var glob = require('glob');
var fs = require('fs');
var yamlFront = require('yaml-front-matter');
module.exports.register = function(Handlebars, options) {
// Customize this helper
Handlebars.registerHelper('md-posts', function(str, options) {
var files = glob.sync(str);
var out = '';
var context = {};
var data = null;
var template = null;
var _i;
for(_i = 0; _i < files.length; _i++) {
data = yamlFront.loadFront(fs.readFileSync(files[_i]), 'src');
template = Handlebars.compile(data.src); // Compile the source
context = data; // Copy front matter data to Handlebars context
context.body = template(data); // render template
out += options.fn(context);
}
return out;
});
};
See it all in this repo: https://github.com/marcusstenbeck/marcusstenbeck.github.io/tree/source