For my school project we are adding navigation to simple websites with javascript. I'm using Visual Studio Code and live server extension. When I run the website through live server extension it works fine.Here
However when i deploy to github and visit the site, the navigation does not appear and i get a 404 errorhere
this is my menu.js file that sits in the scripts folder
const root = "/WSOA3028A_2583750"
const menuItems = [
{name: "Home", href: root + "/index.html"},
{name: "Blog", href: `${root}/Blogs/index.html`},
{name: "Essays", href: `${root}/Essays/index.html`},
{name: "Portfolio", href: `${root}/Portfolio/index.html`},
{name: "Design", href: `${root}/Design/index.html`},
{name: "About", href: `${root}/About/index.html`},
];
export function initialise(currentPage){
console.log("worked")
const nav = document.querySelector("header > nav")
const ul = document.createElement("ul")
for(let menuItem of menuItems)
{
const li = document.createElement("li")
if(currentPage != menuItem.name)
{
const a = document.createElement("a")
a.innerText = menuItem.name
a.setAttribute("href", menuItem.href)
li.appendChild(a)
}
else{
li.innerText = menuItem.name
}
ul.appendChild(li)
}
nav.appendChild(ul)
}
this is where i call the menu.js script in my index.html file that sits outside the folders
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Cameron Morgan">
<meta name="description" content="This is the index page of the website displaying the portfolio and blogs for Cameron Morgan in the course Interactive Media ">
<meta name="robots" content="index,follow">
<meta name="keywords" content="Web Development, Game Development, Interactive, Blog, Portfolio, Essay, Design">
<meta property="og:title" content="Cameron Morgan Portfolio Website">
<meta property="og:description" content="Welcome to Cameron Morgan's Portfolio Website, here you can find his portfolio of work, including games, websites, blogs, analysis.">
<meta property="og:url" content="https://wits-digital-arts-interactive-media.github.io/WSOA3028A_2583750/">
<link rel="icon" type="image/png" href="Images/coffee.png">
<script type="module">
import { initialise } from "./Scripts/menu.js";
initialise("Home"); // Call the initialise function with a test argument
</script>
<title>Interactive Media Website</title>
</head>
Chrome throws up CORS errors
Access to script at 'file:///C:/Users/camer/IM_GITHUB/WSOA3028A_2583750/Scripts/menu.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
and
Failed to load resource: net::ERR_FAILED
file:///C:/? You've deployed it wrong