Sujan Shrestha sjns19

## Modal.css
.modal {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

## Modal.js
let documentBody = document.body;
let Modal = undefined;

function createElement(name, classes, parent) {
  let element = document.createElement(name);

  element.className += classes;

  if (parent) {
    parent.appendChild(element);

## style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --background-color: #fff;
  --text-color: #000;
  --grey: #777;

## index.js
// Get the button that is used to toggle the dark mode
const themeBtn = document.getElementById("dark-mode-btn");
// Get the <html> element
const docEl = document.documentElement;

// Handling the click event
themeBtn.addEventListener("click", () => {
  // Toggle the dark-theme class inside of the html element
  docEl.classList.toggle("dark-theme");
  // Set the dark theme value in user's browser.

## style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;

## index.js
// Get the <link> element
const stylesheet = document.getElementById("main-style");
// Get the button that is used to toggle the dark mode
const themeBtn = document.getElementById("dark-mode-btn");

// Just an object literal that holds the file paths
const cssPath = {
  light: "src/style.css",
  dark: "src/style.dark.css",
};

## style.dark.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;


html {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;

## style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
	.modal {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	let documentBody = document.body;
	let Modal = undefined;

	function createElement(name, classes, parent) {
	let element = document.createElement(name);

	element.className += classes;

	if (parent) {
	parent.appendChild(element);
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	:root {
	--background-color: #fff;
	--text-color: #000;
	--grey: #777;
	// Get the button that is used to toggle the dark mode
	const themeBtn = document.getElementById("dark-mode-btn");
	// Get the <html> element
	const docEl = document.documentElement;

	// Handling the click event
	themeBtn.addEventListener("click", () => {
	// Toggle the dark-theme class inside of the html element
	docEl.classList.toggle("dark-theme");
	// Set the dark theme value in user's browser.
	// Get the <link> element
	const stylesheet = document.getElementById("main-style");
	// Get the button that is used to toggle the dark mode
	const themeBtn = document.getElementById("dark-mode-btn");

	// Just an object literal that holds the file paths
	const cssPath = {
	light: "src/style.css",
	dark: "src/style.dark.css",
	};