Citation in HTML and CSS

Question

Citation in HTML and CSS

How can I reference a specific folder/file in my HTML code so that it encompasses the CSS, JavaScript, and HTML files?

Here's an example of the code I am working with:

<input onclick="setTimeout(function(){location.href='Darkmode';}, 500);" type="checkbox"/>
    <label></label>

Within my directory, I have a folder named Darkmode which contains files such as darkmode.html, css, and js.

I intend to use this folder as a subsite for my main website. When a user toggles the button on my main site, I want them to switch to Dark Mode.

The issue lies in how to properly reference all the Darkmode files simultaneously - including the HTML, CSS, and JS.

If I modify location.href='Darkmode'; to location.href='darkmode.html';, solely the HTML is targeted without incorporating the associated CSS and JavaScript. Is there a method to link to these various files collectively, such that the browser processes the CSS, JS, and HTML components of Dark Mode?

javascript html jquery css

Answer 1

Answer №1

In the event that the HTML code varies, it is recommended to reference the html file darkmode.html and ensure that the appropriate CSS and JS files are linked within that file. However, if the design changes are minimal, it is considered a best practice to make alterations solely to the CSS. This can be achieved without modifying the actual page content by simply adjusting a single class in the body tag:

const btn = document.getElementById("darkmode")

btn.addEventListener("click", ()=>{
  document.body.classList.toggle("darkmode")
})

body.darkmode{
  background: #222;
  color: #fff;
}

<button id="darkmode">Click to switch light/dark</button>
<h1>This is my webpage</h1>
<p>Here is a paragraph</p>
<ul>
  <li>This</li>
  <li>is</li>
  <li>an</li>
  <li>unordered</li>
  <li>list</li>
</ul>

Answer 2

In the event that the HTML code varies, it is recommended to reference the html file darkmode.html and ensure that the appropriate CSS and JS files are linked within that file. However, if the design changes are minimal, it is considered a best practice to make alterations solely to the CSS. This can be achieved without modifying the actual page content by simply adjusting a single class in the body tag:

const btn = document.getElementById("darkmode")

btn.addEventListener("click", ()=>{
  document.body.classList.toggle("darkmode")
})

body.darkmode{
  background: #222;
  color: #fff;
}

<button id="darkmode">Click to switch light/dark</button>
<h1>This is my webpage</h1>
<p>Here is a paragraph</p>
<ul>
  <li>This</li>
  <li>is</li>
  <li>an</li>
  <li>unordered</li>
  <li>list</li>
</ul>

Citation in HTML and CSS

Answer №1

Similar questions

Can we display an express view in response to a WebSocket event?

Assign a class when a path is clicked using Leaflet.js

Is it possible to include edit links to local files in an HTML report that I am creating?

Creating a Pyraminx using triangular shapes

Creating a responsive design for Bootstrap divs

Unable to loop through a list in JavaScript

Mobile devices experiencing issues with rendering Dojo pie charts

What is the process to enable mandatory validation after a change in input in Angular 4?

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

Assistance required for JavaScript with Image and Hyperlinks

Using $_POST method to navigate within the same web page

What is the best way to send a PHP variable in a WordPress AJAX request?

Using Roboto Typeface in Cascading Style Sheets

Tips for retrieving the chosen value from a dropdown list in HTML

Utilizing AngularJS to Retrieve URL Parameters Within a Controller

Removing Files from an ASP.NET MVC 5 Website

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

Retrieve the result of the Object match operation

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

`Vue JS table with Boostrap styling showcasing a loading indicator for busy state`