Fanna1119/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <fieldset>
      <legend>vertical</legend>
      <input type="radio" id="top" name="alignY" value="Top" required />
      <label for="top">top</label><br />
      <input type="radio" id="bottom" name="alignY" value="Bottom" required />
      <label for="bottom">bottom</label><br />
    </fieldset>

    <fieldset>
      <legend>horizontal</legend>
      <input type="radio" id="left" name="alignX" value="Left" />
      <label for="left">left</label><br />

      <input type="radio" id="center" name="alignX" value="Center" />
      <label for="center">center</label><br />

      <input type="radio" id="right" name="alignX" value="Right" />
      <label for="right">right</label><br />
    </fieldset>

    <fieldset>
      <legend>type</legend>
      <input type="radio" id="info" name="type" value="Info" />
      <label for="info">info</label><br />

      <input type="radio" id="error" name="type" value="Error" />
      <label for="Error">error</label><br />

      <input type="radio" id="ok" name="type" value="Ok" />
      <label for="ok">ok</label><br />
    </fieldset>

    <fieldset>
      <legend>image</legend>

      <input type="checkbox" name="imageparse" id="imageparse" />
      <label for="imageparse">imageparse</label><br />
    </fieldset>

    <fieldset>
      <legend>text</legend>

      <input type="text" name="inputtext" id="inputtext" />

      <button id="execute">execute</button>

    </fieldset>

    <div id="SnackBarContainer" class="hide">
      <div id="SnackBar">
        <div id="snackicon"></div>
        <p id="SnackTekst"></p>
        <span id="hideme" class="hideicon"></span>
      </div>
    </div>

    <script type="module" src="/main.js"></script>
  </body>
</html>

## main.js
import './style.css'

const selectElement = (element) => document.querySelector(element);

//selects all queries of given type
const SelectAllElementsOf = (element) => document.querySelectorAll(element);

const alignY = SelectAllElementsOf('input[name="alignY"]');
const alignX = SelectAllElementsOf('input[name="alignX"]');
const type = SelectAllElementsOf('input[name="type"]');

const imageparse = SelectAllElementsOf('input[name="imageparse"]');

const inputtext = selectElement('input[name="inputtext"]');

const execute = selectElement("#execute");


const validateRadio = (element) => {
  try {
    //removes parent invalid
    element[0].parentNode.classList.remove('not-valid');
    return Array.from(element).find(radio => radio.checked).value;
  }
  catch (error) {
    //adds not-valid class.
    element[0].parentNode.classList.add('not-valid');
    //catches error on undefined or unselected for radio. radio has no value(undefined) if unselected
    return false
  }
}

const validateCheckbox = (element) => {
  try {
    return Array.from(element).find(check => check.checked).value;
  }
  catch (error) {
    return false
  }

}

const validateInput = (element) => {

  if (element.value.length > 0) {
    element.parentNode.classList.remove('not-valid');
    return element.value
  } else {
    element.parentNode.classList.add('not-valid');
    return false
  }
}


const validateAll = () => {

  let vertical = validateRadio(alignY);
  let horizontal = validateRadio(alignX);
  let warningtype = validateRadio(type);

  let image = validateCheckbox(imageparse);
  let textinput = validateInput(inputtext);

  let inputs = [vertical, horizontal, warningtype, textinput]

  //returns true if no false in radios Array
  const validateRadioBoxes = inputs.some((x) => typeof x === 'boolean') ? false : true;

  if (validateRadioBoxes) {

    return {
      Y: vertical,
      X: horizontal,
      warn: warningtype,
      img: image,
      text: textinput

    }
  } else {
    return false;
  }

}


const generateSnack = (
  //default values for snack
  axisY = "Top",
  axisX = "Center",
  boxtype = "Ok",
  image = false,
  text = "hello world"
) => {

  let snackBarContainer = selectElement("#SnackBarContainer");
  let snackBar = selectElement("#SnackBar");
  let snackText = selectElement("#SnackTekst");
  let snackIcon = selectElement("#snackicon");
  //clear classes

  snackBarContainer.className = "";
  snackBar.className = "";
  snackIcon.className = "";

  snackBarContainer.classList.add(axisY, axisX);
  snackBar.classList.add(boxtype);
  snackText.textContent = text;

  if (image) {
    switch (boxtype) {
      case "Ok":
        snackIcon.className = "checkmark"
        break;

      case "Info":
        snackIcon.className = "infomark"
        break;

      case "Error":
        snackIcon.className = "exmark"
        break;
    }
  }
}

execute.addEventListener("click", () => {
  let data = validateAll();
  if (data) {
    generateSnack(data.Y, data.X, data.warn, data.img, data.text);
  }

});

## style.css
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#SnackBarContainer {
  display: flex;
  width: 100%;
  position: fixed;
  left: 0;
  pointer-events: none;
  padding: 5px;
}

#SnackBar {
  min-width: 250px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  color: #fff;
  border: 10px;
  padding: 2px 10px;
}

#snackicon {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  flex-shrink: 0;
  background-size: cover;
}

.Info {
  background-color: rgb(0, 132, 255);
}

.Error {
  background: rgb(255, 0, 64);
}

.Ok {
  background: rgb(0, 255, 157);
  color: black !important;
}

#SnackBar p {
  margin: 0;
  padding: 10px;
  flex: 1;
}

.Top {
  top: 0;
}

.Bottom {
  bottom: 0;
}

.Center {
  justify-content: center;
}

.Left {
  justify-content: flex-start;
}

.Right {
  justify-content: flex-end;
}

fieldset {
  border: grey 1px dashed;
  background: none;
}

.not-valid {
  border: red 1px solid;
}

.checkmark {
  content: url("https://api.iconify.design/akar-icons:circle-check.svg?color=white&height=24");
  vertical-align: -0.125em;
}

.infomark {
  content: url("https://api.iconify.design/akar-icons:info.svg?height=24");
  vertical-align: -0.125em;
}

.exmark {
  content: url("https://api.iconify.design/akar-icons:circle-x.svg?height=24");
  vertical-align: -0.125em;
}

.hide {
  opacity: 0;
  display: none !important;
}

.hideicon {
  content: url("https://api.iconify.design/akar-icons:cross.svg?width=15&height=15");
  vertical-align: -0.125em;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="favicon.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Vite App</title>
	</head>
	<body>
	<fieldset>
	<legend>vertical</legend>
	<input type="radio" id="top" name="alignY" value="Top" required />
	<label for="top">top</label><br />
	<input type="radio" id="bottom" name="alignY" value="Bottom" required />
	<label for="bottom">bottom</label><br />
	</fieldset>

	<fieldset>
	<legend>horizontal</legend>
	<input type="radio" id="left" name="alignX" value="Left" />
	<label for="left">left</label><br />

	<input type="radio" id="center" name="alignX" value="Center" />
	<label for="center">center</label><br />

	<input type="radio" id="right" name="alignX" value="Right" />
	<label for="right">right</label><br />
	</fieldset>

	<fieldset>
	<legend>type</legend>
	<input type="radio" id="info" name="type" value="Info" />
	<label for="info">info</label><br />

	<input type="radio" id="error" name="type" value="Error" />
	<label for="Error">error</label><br />

	<input type="radio" id="ok" name="type" value="Ok" />
	<label for="ok">ok</label><br />
	</fieldset>

	<fieldset>
	<legend>image</legend>

	<input type="checkbox" name="imageparse" id="imageparse" />
	<label for="imageparse">imageparse</label><br />
	</fieldset>

	<fieldset>
	<legend>text</legend>

	<input type="text" name="inputtext" id="inputtext" />

	<button id="execute">execute</button>

	</fieldset>

	<div id="SnackBarContainer" class="hide">
	<div id="SnackBar">
	<div id="snackicon"></div>
	<p id="SnackTekst"></p>
	<span id="hideme" class="hideicon"></span>
	</div>
	</div>

	<script type="module" src="/main.js"></script>
	</body>
	</html>
	import './style.css'

	const selectElement = (element) => document.querySelector(element);

	//selects all queries of given type
	const SelectAllElementsOf = (element) => document.querySelectorAll(element);

	const alignY = SelectAllElementsOf('input[name="alignY"]');
	const alignX = SelectAllElementsOf('input[name="alignX"]');
	const type = SelectAllElementsOf('input[name="type"]');

	const imageparse = SelectAllElementsOf('input[name="imageparse"]');

	const inputtext = selectElement('input[name="inputtext"]');

	const execute = selectElement("#execute");



	const validateRadio = (element) => {
	try {
	//removes parent invalid
	element[0].parentNode.classList.remove('not-valid');
	return Array.from(element).find(radio => radio.checked).value;
	}
	catch (error) {
	//adds not-valid class.
	element[0].parentNode.classList.add('not-valid');
	//catches error on undefined or unselected for radio. radio has no value(undefined) if unselected
	return false
	}
	}

	const validateCheckbox = (element) => {
	try {
	return Array.from(element).find(check => check.checked).value;
	}
	catch (error) {
	return false
	}

	}

	const validateInput = (element) => {

	if (element.value.length > 0) {
	element.parentNode.classList.remove('not-valid');
	return element.value
	} else {
	element.parentNode.classList.add('not-valid');
	return false
	}
	}


	const validateAll = () => {

	let vertical = validateRadio(alignY);
	let horizontal = validateRadio(alignX);
	let warningtype = validateRadio(type);

	let image = validateCheckbox(imageparse);
	let textinput = validateInput(inputtext);

	let inputs = [vertical, horizontal, warningtype, textinput]

	//returns true if no false in radios Array
	const validateRadioBoxes = inputs.some((x) => typeof x === 'boolean') ? false : true;

	if (validateRadioBoxes) {

	return {
	Y: vertical,
	X: horizontal,
	warn: warningtype,
	img: image,
	text: textinput

	}
	} else {
	return false;
	}

	}


	const generateSnack = (
	//default values for snack
	axisY = "Top",
	axisX = "Center",
	boxtype = "Ok",
	image = false,
	text = "hello world"
	) => {

	let snackBarContainer = selectElement("#SnackBarContainer");
	let snackBar = selectElement("#SnackBar");
	let snackText = selectElement("#SnackTekst");
	let snackIcon = selectElement("#snackicon");
	//clear classes

	snackBarContainer.className = "";
	snackBar.className = "";
	snackIcon.className = "";

	snackBarContainer.classList.add(axisY, axisX);
	snackBar.classList.add(boxtype);
	snackText.textContent = text;

	if (image) {
	switch (boxtype) {
	case "Ok":
	snackIcon.className = "checkmark"
	break;

	case "Info":
	snackIcon.className = "infomark"
	break;

	case "Error":
	snackIcon.className = "exmark"
	break;
	}
	}
	}

	execute.addEventListener("click", () => {
	let data = validateAll();
	if (data) {
	generateSnack(data.Y, data.X, data.warn, data.img, data.text);
	}

	});
	#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	}

	#SnackBarContainer {
	display: flex;
	width: 100%;
	position: fixed;
	left: 0;
	pointer-events: none;
	padding: 5px;
	}

	#SnackBar {
	min-width: 250px;
	pointer-events: auto;
	display: flex;
	align-items: center;
	color: #fff;
	border: 10px;
	padding: 2px 10px;
	}

	#snackicon {
	width: 25px;
	height: 25px;
	flex-basis: 25px;
	flex-shrink: 0;
	background-size: cover;
	}

	.Info {
	background-color: rgb(0, 132, 255);
	}

	.Error {
	background: rgb(255, 0, 64);
	}

	.Ok {
	background: rgb(0, 255, 157);
	color: black !important;
	}

	#SnackBar p {
	margin: 0;
	padding: 10px;
	flex: 1;
	}

	.Top {
	top: 0;
	}

	.Bottom {
	bottom: 0;
	}

	.Center {
	justify-content: center;
	}

	.Left {
	justify-content: flex-start;
	}

	.Right {
	justify-content: flex-end;
	}

	fieldset {
	border: grey 1px dashed;
	background: none;
	}

	.not-valid {
	border: red 1px solid;
	}

	.checkmark {
	content: url("https://api.iconify.design/akar-icons:circle-check.svg?color=white&height=24");
	vertical-align: -0.125em;
	}

	.infomark {
	content: url("https://api.iconify.design/akar-icons:info.svg?height=24");
	vertical-align: -0.125em;
	}

	.exmark {
	content: url("https://api.iconify.design/akar-icons:circle-x.svg?height=24");
	vertical-align: -0.125em;
	}

	.hide {
	opacity: 0;
	display: none !important;
	}

	.hideicon {
	content: url("https://api.iconify.design/akar-icons:cross.svg?width=15&height=15");
	vertical-align: -0.125em;
	}