The css fails to display properly upon the page being reloaded using a button

While diving into the world of learning React JSX, I've encountered a perplexing issue. After clicking the load button, the page redirects correctly but the CSS styling I've implemented fails to display.

Here is the HTML code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/javascript"></script>
  </body>
</html>

Here is the CSS code:

body {
  background-color: darkcyan;
  color: bisque;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.transform-images {
  height: 50%;
  width: 50%;
  margin: 2%;
}

This is the JS code:

import React from "react";
import ReactDOM from "react-dom";

const randomIMG = "https://picsum.photos/200";

const newLocal = (
  <center>
    <a href="public/index.html">
      <button type="button">load</button>
    </a>
  </center>
);
ReactDOM.render(
  <div>
    <h1 className="heading">My Favourite Foods</h1>
    <div>
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image1"
      ></img>
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image2"
      ></img>
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image3"
      ></img>
    </div>
    {newLocal}
  </div>,
  document.getElementById("root")
);

Initially, the page loads perfectly but upon clicking the button, all the CSS styling disappears.

Answer №1

It appears that the CSS file path you are using is incorrect. Please attempt the following:

<link rel="stylesheet" href="/styles.css" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If every object within the array contains a value in the specified property, then return true

In my current project, I am working with an array of objects that looks something like this: $scope.objectArray = [ {Title: 'object1', Description: 'lorem', Value: 57}, {Title: 'object2', Description: 'ipsum', V ...

Sort through an array of objects using a different array

I am looking to showcase projects based on specific skills. For instance, if I choose "HTML", I want to see all projects that have "HTML" listed in their array of skills. If I select multiple skills, then only display projects that have those exact skills. ...

The function Rotate() does not exist

Within my project, I have set up a canvas where I am able to: Load an image onto the canvas Resize the uploaded image Currently, I am working on implementing a rotate function that allows me to rotate the loaded image within the canvas by holding down th ...

Github Actions troubleshoot: Next.js Cypress tests encountering 'cannot read properties of undefined (reading 'getInitialProps')' error

Attempting to execute my headless Cypress tests on my Next.js React app via Github Actions has hit a snag. While the Cypress tests run smoothly when I build and run the app locally, running the same command in Github Actions triggers a Next.js error relate ...

What is the best way to extract and count specific values from a JSON file using JavaScript?

My JSON data looks like this: /api/v1/volumes: [ { "id": "vol1", "status": "UP", "sto": "sto1", "statusTime": 1558525963000, "resources": { "disk": 20000000 }, "used_resources": { "disk": 15000000 }, "las ...

Put a watch on a variable as soon as it is set

When initializing a variable, I want to use the $watch function in Angular without it automatically initializing right away. Is there a way to accomplish this? $watch $scope.$watch(function () { return $scope.character.level; }, function (ne ...

Loop through XMLHttpRequest requests

I have been attempting to send multiple server requests within a for loop. After coming across this particular question, I tried out the recommended solution. Unfortunately, it doesn't seem to be functioning as expected. for (var i = 1; i <= 1 ...

Error occurs while attempting to access document.getElementById

I've been trying to make the following code display the word "Test", but all I'm getting is a message saying "TypeError: document.getElementById(...)". I can't seem to figure out what's wrong: <html> <head> <meta h ...

Obtaining an OBJECT from a hashmap instead of a string

In my code, I am working with a hashmap and I want to extract all the values from this map without needing to reference a specific key. Here is a basic overview of the process: Create a hashmap using an external file with a structure of "id:value" Utili ...

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

Encountered an error: Object(...) function not defined when using React, Formik, and Webpack

I have encountered an issue while trying to use both Formik and React-Form-Hooks in my project. Despite using Typescript as my language and Babel as the transpiler, both libraries throw the same error when compiled. Uncaught TypeError: Object(...) is not ...

Utilizing Conditional HTML/CSS for Enhanced Outlook Emails on Office 365

One interesting feature of Microsoft Outlook is its support for conditional CSS, allowing developers to create markup and styling that is specifically designed to render on Outlook. Despite the claims, I found that the following snippet, intended to be hid ...

Utilizing a Frozen Tensorflow Model with NodeJS for High-Performance Computing

I am new to tensorflowjs and js in general, but I have a trained model that I need to run on it. I have converted the model to json format, but I am having trouble feeding data into it: const tf = require('@tensorflow/tfjs') const tfn = require( ...

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

Dynamic form name validation in Angular is crucial for ensuring the accuracy and

When it comes to validating a form in Angular, I usually use the ng-submit directive like this: <form name="formName" ng-submit="formName.$valid && submitForm()"></form> This method works well for forms with predefined names that I se ...

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

EJS is having trouble locating an image within the static public directory

I'm currently facing an issue with rendering a HTML template as a PDF using EJS. Despite my efforts, the images are not displaying properly. Here is how my project is structured: - public - images image.jpg - routes documentsRoute.js ...

Plot data points from geojson onto a leaflet map using markers

How can I efficiently import geoJson data (containing over 2000 coordinates) into a leaflet map? Below is a brief snippet of geo json: { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { ...

"Transmitting an ajax POST call and receiving a corresponding GET response

Currently, I am utilizing the following AJAX code: $.ajax({ url: "Editor.aspx/Page_LoadComplete", data: { "contentCheckCode": contents }, type: "POST", success: function (response) { alert("Contents saved..."); }, error: fu ...

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...