Skip to content

Instantly share code, notes, and snippets.

@Fanna1119

Fanna1119/index.html

Last active March 25, 2021 11:44
Show Gist options
  • Save Fanna1119/0dd2c908ff026e18b113fa8054a2a86d to your computer and use it in GitHub Desktop.
Save Fanna1119/0dd2c908ff026e18b113fa8054a2a86d to your computer and use it in GitHub Desktop.
Download ZIP
snackvanilla
Raw
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>
Raw
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);
}
});
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment