Develop Reference

How to customize a URL at which a specific HTML file will load?

I have 3 separate HTML files:
index.html for a Home page
about.html for an About Us page
contact.html for a Contact Us page
At the moment, when I go to the URL .../ or .../index.html, the browser displays the index.html file, for .../html/about.html it shows the about.html file, etc.
However, I would like to make it so that the index.html file content will be shown when I type in the URL .../home, the about.html when I go to .../about-us, etc.
Also, to each of these 3 pages, I am adding links to the other two pages, so when someone is on the Home page, for example, and clicks on the About Us link from there, I would like them to be redirected to the URL .../about-us where the about.html file content will be shown (the content is showing correctly even now, but the redirect is to .../html/about.html instead of .../about-us).
How can I achieve this please (using any of the following: HTML/CSS/JS/Node.js)? I have seen this done for a SPA using React (react-router-dom), but without React I am not sure how to do it. Thank you!
Project file structure
Link elements from index.html:
<header>
Home
Contact Us
About Us
</header>
I was not able to figure out how to achieve it using JS code to modify the window.location.href in the .js files linked to the HTML files, so I tried to set up a server with Node.js to add the routes needed, but that does not feel like the right approach. And, it did not solve the issue with redirecting to the desired URL in the browser when clicking the links.

javascript and css loads but not working on navigation in React js

I am working in react js. I put all the assets links in public/index.html. When i start project, only first page works fine. When i navigate to other pages, all pages does not show the correct resul, and when i get back to first page it does not work. I checked the css and javascript files by ctrl+u. All files are loaded. The Both source files, before navigate and after navigate are same all files are loaded but on navigation it does not work. Please have a look on my index.html, how i use link tag to import css and javascript file. Any help would be appreciated.
Thank
I put all links to app.js and assets moved to src directory. Css files are working but jquery shows following error

import your CSS file in the "App.js" file. It'll work

Express: Redirect on button click to other HTML File

I'm trying to create a website with a Home Page UI from which loads of different files (pages) could be navigated to. I've set up the Home page (index.html with its css, jQuery & JS loading correctly). But I can't seem to get a grasp on how to integrate my vision of buttons on a home page which will redirect user to other HTML pages with corresponding links to CSS, JS & jQuery. But my question is more specific:
How do you render HTML files in express with a function in a js file? in directory:
C:\CodingProjects\Principles\ public\javascripts\home.js
(Principles being the project folder)
I've namely set up a function which executes when I click a button, like so:
<button onclick="BoostOddsRedirect()">Boost your odds of success through de-centralized principle-guided decision-making.</button>
& JS ofc:
const BoostOddsRedirect = () => {
//Here I want the functionality of rendering another HTML file, namely BoostOdds.html, with the directory: C:\CodingProjects\Principles\public\markups\IntPrinHTML\BoostOdds.html
};
Which I've tested to be correctly linked in HTML file in which button with onclick attribute is created.
It'd be great if solution can be reproduced for other buttons and other files effieciently.
What I've done is just intuitive start of a functionality which I do not know how to complete, so if you have a better idea, I'd love to here it. Please let me know if you need more info, thanks.

djangobyexample book - jquery bookmarklet not working at all

I'm working through Django By Example and in one chapter a jQuery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
The tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is how it must look like when clicked on the bookmarklet, this is the part where nothing happens for me when I clicked on bookmarklet.
(how to solve this?)
These are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
I believe the JavaScript launcher is unable to load the JavaScript files or the JS launcher itself is not getting loaded.
The JavaScript launcher is getting called through a Django template tag "include" inside the anchor tag.
this is the link:
https://github.com/davejonesbkk/bookmarks/blob/master/account/templates/account/dashboard.html
I tried debugging it through CTRL+SHIFT+I console where trouble showed that "include" tag not working properly.

Your include tag is split over two lines:
images from other websites → <a href="javascript:{% include
"bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>
Django does not support multiple line tags. Change it to:
images from other websites → Bookmark it<p>

I have faced the similar error while going through the book.
The bookmark button is not functioning,when i debugged it through chrome debugger,i could able to see errors at js level.I have made two changes to resolve these errors.
1.Error message: net::ERR_ABORTED
Action step:
In the book its mentioned that to place bookmarklet.js in images application directory,but in bookmarklet_launcher.js the source is refered to below path
http://127.0.0.1:8000/static/js/bookmarklet.js?r=
So place bookmarklet.js in /static/js/ directory inside images application(if folder structure not available create it).
2.Error message: net::ERR_ABORTED
There is one more file that should be placed which is bookmarklet.css which is being refereed at below line in bookmarklet.js.
href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
Action step:
create a file bookmarklet.css inside /static/css/ directory and place the css code.Refer below link for css code:
Git Hub link for css code reference
1.After the above steps,restart the development server.
2.Drag the bookmark it button to create a bookmark in browser.
3.Open any website that is HTTP(not https) and click on bookmark it(The one which is bookmarked in browser not bookmark it button).
4.The below pop up appears

the problem is that template doesn't exist so try t do the following
**
1. make sure your include code in same line
2. make sure same name of the template exist on your project director /images/templates/file_name.js.
3. or go to setting and add your templates directory to templates.
4. if it load but no images views don't forget that you only accept jpeg and jpg images only
** so you can try another sites like wikipedia **

I was able to solve this by making sure that the url from ngrok tunnel in the bookmarklet.js and bookmarklet_luncher.js starts with https not http
Instead of this http://127.0.0.1:8000/static/js/bookmarklet.js?r= it should rather be
https://127.0.0.1:8000/static/js/bookmarklet.js?r=

After 4 hours of doing everything... googling, deleting code, and rewriting code...
Only had to hit Ctrl+C to stop server and re-run server .
Just take a break and come back to fix it :)
Mine works same as instructed in the book – no changes, no nothing.
Only restarted the server.

Angular2, links not working with lazy loaded modules, but worked on page refresh

I have Angular2 project built with Angular-CLI. I'm using lazy loading for modules which I guess causing my problem.
After I load project with Module A on browser, and I click navigation link which load Module B (with lazy loading) then clicking on simple link, ie.
Click me
it doesn't work, nothing happened, but when I refresh page on Module B, same links start working.
Does anyone have a clue why this is happening?
I checked on network tab and in both cases, all requests look the same, only difference that when switching between modules page is loading whole application with Module A, and then just loads required files for Module B.
I know this is not a very detailed description but for now I don't know what to say more.
Thanks for any help.

Finally, I found the solution. The problem was about how I've inserted HTML chunk in angular template.
Before I was using [innerHTML]="fullDescription" property which prevents from clicking in links.
Solution
<div innerHTML="{{fullDescription}}"></div>
Also I had to omit bypassSecurityTrustHtml from DomSanitizer.
Hope this will help someone.