VA79 vanaf1979

## classlist-toggle-basic.js

element.classList.toggle("classname");


## classlist-remove-js.js

const box = document.querySelector(".box");

const removeButton = document.querySelector('#removeClass');

removeButton.addEventListener('click', () => {

  box.classList.remove("active");

});

## classlist-remove-basic.js

element.classList.remove("classname");


## classlist-add-basic.js

element.classList.add("classname");


## classlist-add-js.js

const box = document.querySelector(".box");

const addButton = document.querySelector('#setStyles');

addButton.addEventListener('click', () => {

  box.classList.add("active");

});

## classlist-add-css.css

.box {
  width: 200px;
  height: 150px;
  background-color: hsl(222, 99%, 38%);
  transition: all 0.2s ease-out;
}

.box.active {
  background-color: hsl(222, 99%, 58%);

## swap-text-colors-with-variables.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Using css variables to change color in a specific section</title>
    <link rel="stylesheet" href="./styles.css">
</head>

## align-lists-lsp.css

ul {
    padding-left: 0;
    list-style-position: inside;
}


## align-lists-background.css

ul {
    padding-left: 0;
    background-color: lightblue;
}


## align-lists-addback-padding.css

ul {
    padding-left: 1.4rem;
}

	const box = document.querySelector(".box");

	const addButton = document.querySelector('#setStyles');

	addButton.addEventListener('click', () => {

	box.classList.add("active");

	});

	.box {
	width: 200px;
	height: 150px;
	background-color: hsl(222, 99%, 38%);
	transition: all 0.2s ease-out;
	}

	.box.active {
	background-color: hsl(222, 99%, 58%);

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Using css variables to change color in a specific section</title>
	<link rel="stylesheet" href="./styles.css">
	</head>