Index.js issues

I am having issues when I deploy on github its missing my css but when i deploy manually it’s fine I was using scrimba site to learn html but CSS wont work my site is 3funfactsaboutelon.netlify.app

@blopez209 The CSS does work, your index.js does not.

i’m using this code off scrimba // space, scary, military, romantic, cowboy, fantasy, superhero
favouriteMovieGenre(“space”)

// watermelon, tomato, banana, orange, avocado, blueberry
favouriteFruit(“watermelon”)

// light, dark
favouriteMode(“light”)

// sharp, soft, round
favouriteEdgeStyle(“soft”)

////////////////////////////////////
// IGONE THE CODE BELOW THIS LINE //
////////////////////////////////////

function setProp(prop, value) {
document.documentElement.style.setProperty(prop, value)
}

function favouriteEdgeStyle(style) {
setProp(“–image”, “var(–” + style + “)”);
}

function favouriteMovieGenre(font) {
if (font) {
setProp(“–font”, “var(–” + font + “)”);
}
}

function favouriteMode(mode) {
if (mode === “light” || !mode) {
setProp(‘–background’, “var(–light)”);
setProp(‘–text’, “var(–dark)”);
} else if (mode === “dark”) {
setProp(‘–background’, “var(–dark)”);
setProp(‘–text’, “var(–light)”);
}
}

function favouriteFruit(theme) {
if (theme === “pastel”) {
setProp(‘–light’, “#f2f6c3”)
setProp(‘–dark’, “#68c4af”)
} else if (theme === “muted”) {
setProp(‘–light’, “#4c5b64”)
setProp(‘–dark’, “#45241c”)
} else if (theme === “love”) {
setProp(‘–light’, “#f06836”)
setProp(‘–dark’, “#ba0001”)
} else if (theme === “sky”) {
setProp(‘–light’, “#99ccff”)
setProp(‘–dark’, “#3366ff”)
} else if (theme === “forrest”) {
setProp(‘–light’, “#91B247”)
setProp(‘–dark’, “#597C2B”)
} else if (theme === “shiny”) {
setProp(‘–light’, “#2e9afe”)
setProp(‘–dark’, “#02197c”)
} else if (theme === “banana”) {
setProp(‘–light’, “#fbec5d”)
setProp(‘–dark’, “#6b3e26”)
} else if (theme === “watermelon”) {
setProp(‘–light’, “#75b855”)
setProp(‘–dark’, “#ad3838”)
} else if (theme === “tomato”) {
setProp(‘–light’, “#d62e2e”)
setProp(‘–dark’, “#600000”)
} else if (theme === “avocado”) {
setProp(‘–light’, “#6b8c21”)
setProp(‘–dark’, “#704012”)
} else if (theme === “orange”) {
setProp(‘–light’, “#ffca16”)
setProp(‘–dark’, “#f97300”)
} else if (theme === “blueberry”) {
setProp(‘–light’, “#41a8f9”)
setProp(‘–dark’, “#064490”)
} else {
setProp(‘–light’, “#f5f5f5”)
setProp(‘–dark’, “#222222”)
}
}

not sure what I would need to modify or add to get index js to work or would I need to add something to html?

It has nothing to do with the content of the file.

Hint: Open the Network tab in Developer Tools.

getting error on this line of code script src=“index.js”></script also wouldnt let me post it in the <> brackets

You can put code inside backticks (i.e. these ``)

<script type="module" src="index.js"></script> this line of code fixed it had to use bing ai but then realized that it still wasnt updating so i deleted site and reuploaded it which fixed it since im so new i dont know how to update it with github any other way or maybes theres a delay

Nope. No delay.

Should have used Grok AI! :face_vomiting: :rofl:

What does Developer Tools show? What error message does it give?

it was something with the way it was deployed something wrong with the build now its changing my website background once i deleted it and retried it which means it’s working.

Building websites using AI but understanding nothing about how anything works sounds extremely painful.

Based on the symptoms, the fact your CSS had a hash -DcwyGpX9.css but your index.js didn’t, and the code you say you changed the reference to, then you’re probably using Vite and you experienced an issue lots of people hit.

The Vite - Getting Started Documentation outlines it:

Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code. Even inline <script type="module"> and CSS referenced via <link href> also enjoy Vite-specific features.

You probably didn’t have the type="module" declaration that Vite requires.