Webapp UI Component Series
Toggle.
Wiki topics:
🌐 · Web Development
Webapp UI Component Series
Toggle.
Way 0
<!DOCTYPE>
<html>
<head></head>
<body>
<div class="javascript_css"></div>
<script>
function toggle0(documentElement) {
if (document.getElementById("label0") == null) {
var labelElement = document.createElement("label");
labelElement.setAttribute("id", "label0");
labelElement.setAttribute("class", "label_simple");
labelElement.style.position = "absolute";
labelElement.style.top = "60px";
labelElement.style.left = "0px";
labelElement.style.display = "inline-block";
labelElement.style.width = "300px";
labelElement.style.height = "20px";
labelElement.style.border = "1px solid gray";
labelElement.style.borderRadius = "10px";
labelElement.style.backgroundColor = "hsl(0 100% 100%)";
documentElement.appendChild(labelElement);
var inputElement = document.createElement("input");
inputElement.setAttribute("id", "input0");
inputElement.setAttribute("class", "input_simple");
inputElement.setAttribute("type", "checkbox");
inputElement.setAttribute("onclick", "processEvent_click_toggle()");
inputElement.style.display = "none";
document.getElementById("label0").appendChild(inputElement);
var spanElement = document.createElement("span");
spanElement.setAttribute("id", "span0");
spanElement.setAttribute("class", "span_simple");
spanElement.style.cursor = "pointer";
spanElement.style.position = "absolute";
spanElement.style.top = "0px";
spanElement.style.left = "0px";
spanElement.style.width = document.getElementById("label0").style.height;
spanElement.style.height = document.getElementById("label0").style.height;
spanElement.style.backgroundColor = "hsl(30 100% 90%)";
spanElement.style.background ="radial-gradient(ellipse 50% 50% at 30% 25%, hsl(30 100% 100%), hsl(30 100% 40%) 100%)";
spanElement.style.boxShadow = "inset 0px 0px 0px rgba(255,255,255,0.6), inset 0px 0px 0px rgba(0,0,0,0.6)";
spanElement.style.transition = "0.5s";
spanElement.style.border = `2px solid ${spanElement.style.backgroundColor}`;
spanElement.style.borderRadius = parseInt(document.getElementById("label0").style.height.split("px")[0]/2)+"px";
spanElement.innerText = "Text0";
spanElement.style.fontSize = "12px";
document.getElementById("label0").appendChild(spanElement);
}
}
function processEvent_click_toggle() {
if (document.getElementById("input0").checked == true) {
document.getElementById("span0").style.backgroundColor = "hsl(30 100% 90%)";
document.getElementById("span0").style.background ="radial-gradient(ellipse 50% 50% at 30% 25%, hsl(30 100% 100%), hsl(30 100% 40%) 100%)";
document.getElementById("span0").style.left = "0px";
document.getElementById("span0").innerText = "Text0";
} else if (document.getElementById("input0").checked == false) {
document.getElementById("span0").style.backgroundColor = "hsl(230 100% 90%)";
document.getElementById("span0").style.background ="radial-gradient(ellipse 50% 50% at 30% 25%, hsl(230 100% 100%), hsl(230 100% 40%) 100%)";
document.getElementById("span0").style.left = parseInt(parseInt(document.getElementById("label0").style.width.split("px")[0]) - parseInt(document.getElementById("span0").style.width.split("px")[0]))+"px";
document.getElementById("span0").innerText = "Text1";
}
document.getElementById("span0").style.border = `2px solid ${document.getElementById("span0").style.backgroundColor}`;
}
</script>
<script>
topbar();
function topbar() {
document.getElementsByClassName("javascript_css")[0].style.position = "absolute";
document.getElementsByClassName("javascript_css")[0].style.width = "300px";
document.getElementsByClassName("javascript_css")[0].style.height = "50px";
document.getElementsByClassName("javascript_css")[0].style.border = "1px solid gray";
document.getElementsByClassName("javascript_css")[0].style.borderRadius = "2px";
document.getElementsByClassName("javascript_css")[0].innerHTML = "Toggle.";
toggle0(document.getElementsByClassName("javascript_css")[0]);
}
</script>
</body>
</html>Way 1
<!DOCTYPE>
<html>
<head></head>
<body>
<div class="javascript_css"></div>
<script>
function toggle1(documentElement) {
if (document.getElementById("label0") == null) {
var labelElement = document.createElement("label");
labelElement.setAttribute("id", "label0");
labelElement.setAttribute("class", "label_simple");
labelElement.style.position = "absolute";
labelElement.style.top = "60px";
labelElement.style.left = "0px";
labelElement.style.display = "inline-block";
labelElement.style.width = "100px";
labelElement.style.height = "50px";
labelElement.style.backgroundColor = "hsl(0 100% 100%)";
labelElement.style.overflow = "hidden";
labelElement.style.border = "3px ridge seagreen";
labelElement.style.borderRadius = "25px";
documentElement.appendChild(labelElement);
var inputElement = document.createElement("input");
inputElement.setAttribute("id", "input0");
inputElement.setAttribute("class", "input_simple");
inputElement.setAttribute("type", "checkbox");
inputElement.setAttribute("onclick", "processEvent_click_toggle()");
inputElement.style.position = "absolute";
inputElement.style.top = "-3px";
inputElement.style.left = "0px";
inputElement.style.width = "50px";
inputElement.style.height = "50px";
inputElement.style.display = "none";
inputElement.style.border = "1px solid gray";
document.getElementById("label0").appendChild(inputElement);
var pElement = document.createElement("p");
pElement.setAttribute("id", "p0");
pElement.setAttribute("class", "p_simple");
pElement.style.position = "absolute";
pElement.style.top = "-15px";
pElement.style.left = "0px";
pElement.style.width = "50px";
pElement.style.height = "50px";
pElement.style.border = "1px solid gray";
pElement.style.backgroundColor = "seagreen";
pElement.style.clipPath = "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)";
// OR
// pElement.style.clipPath = "xywh(0px 0px 49px 49px round 25px 25px 25px 25px)";
document.getElementById("label0").appendChild(pElement);
}
}
function processEvent_click_toggle() {
if (document.getElementById("input0").checked == true) {
// Checked.
document.getElementById("input0").style.display = "block";
document.getElementById("input0").style.left = "47px";
document.getElementById("input0").style.accentColor = "seagreen";
document.getElementById("input0").style.clipPath = "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)";
document.getElementById("p0").style.display = "none";
} else if (document.getElementById("input0").checked == false) {
// Initial - NotChecked.
document.getElementById("input0").style.display = "none";
document.getElementById("input0").style.left = "0px";
document.getElementById("p0").style.display = "block";
}
}
</script>
<script>
topbar();
function topbar() {
document.getElementsByClassName("javascript_css")[0].style.position = "absolute";
document.getElementsByClassName("javascript_css")[0].style.width = "300px";
document.getElementsByClassName("javascript_css")[0].style.height = "50px";
document.getElementsByClassName("javascript_css")[0].style.border = "1px solid gray";
document.getElementsByClassName("javascript_css")[0].style.borderRadius = "2px";
document.getElementsByClassName("javascript_css")[0].innerHTML = "Toggle.";
toggle1(document.getElementsByClassName("javascript_css")[0]);
}
</script>
</body>
</html>Good Luck with your workflows and Happy Practicing! 👋
메타데이터
- post_id
- 0440b6402cc7
- slug
- webapp-ui-component-series-0440b6402cc7
- url
- https://towardsdev.com/webapp-ui-component-series-0440b6402cc7
- canonical_url
- https://towardsdev.com/webapp-ui-component-series-0440b6402cc7
- author_url
- https://medium.com/@j622amilah
- status
- ok
- fetched_at
- 2026-07-08 21:20:17
