Skip to content

Instantly share code, notes, and snippets.

@BRonen

BRonen/full_adder.html

Last active March 7, 2024 20:42
Show Gist options
  • Save BRonen/1d5437546977867373ae556ba1ba9aa2 to your computer and use it in GitHub Desktop.
Save BRonen/1d5437546977867373ae556ba1ba9aa2 to your computer and use it in GitHub Desktop.
Download ZIP
Full adder made to prove that html with css is turing complete (without js)
Raw
full_adder.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
gap: 1rem;
}
.first,
.second {
margin-left: 1.1rem;
gap: 0.25rem;
}
body:not(:has(.first input[data='1']:checked):has(.second input[data='1']:checked)):has(.first input[data='1']:checked) .result-1,
body:not(:has(.first input[data='1']:checked):has(.second input[data='1']:checked)):has(.second input[data='1']:checked) .result-1 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked) .result-2 {
color: red;
}
body:not(:has(.first input[data='2']:checked):has(.second input[data='2']:checked)):has(.first input[data='2']:checked) .result-2,
body:not(:has(.first input[data='2']:checked):has(.second input[data='2']:checked)):has(.second input[data='2']:checked) .result-2 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):not(:has(.first input[data='2']:checked)):not(:has(.second input[data='2']:checked)) .result-2 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):not(:has(.first input[data='2']:checked):has(.second input[data='2']:checked)):has(.first input[data='2']:checked) .result-2,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):not(:has(.first input[data='2']:checked):has(.second input[data='2']:checked)):has(.second input[data='2']:checked) .result-2 {
color: black;
}
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked) .result-4,
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked) .result-4 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked) .result-4,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked) .result-4 {
color: red;
}
body:not(:has(.first input[data='3']:checked):has(.second input[data='3']:checked)):has(.first input[data='3']:checked) .result-4,
body:not(:has(.first input[data='3']:checked):has(.second input[data='3']:checked)):has(.second input[data='3']:checked) .result-4 {
color: red;
}
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked) .result-4,
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked):has(.second input[data='3']:checked) .result-4 {
color: black;
}
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked):has(.second input[data='3']:checked) .result-4 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked):has(.first input[data='3']:checked) .result-4,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked):has(.second input[data='3']:checked) .result-4,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked) .result-4,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked):has(.second input[data='3']:checked) .result-4 {
color: black;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked):has(.first input[data='3']:checked):has(.second input[data='3']:checked) .result-4,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked):has(.second input[data='3']:checked) .result-4 {
color: red;
}
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked):has(.first input[data='3']:checked) .result-8,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.first input[data='2']:checked):has(.second input[data='3']:checked) .result-8,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked) .result-8,
body:has(.first input[data='1']:checked):has(.second input[data='1']:checked):has(.second input[data='2']:checked):has(.second input[data='3']:checked) .result-8 {
color: red;
}
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked):has(.first input[data='3']:checked) .result-8,
body:has(.first input[data='2']:checked):has(.second input[data='2']:checked):has(.second input[data='3']:checked) .result-8 {
color: red;
}
body:has(.first input[data='3']:checked):has(.second input[data='3']:checked) .result-8 {
color: red;
}
</style>
</head>
<body>
<div class="first">
<input type="checkbox" data='3' />
<input type="checkbox" data='2' />
<input type="checkbox" data='1' />
</div>
<div class="second">
<input type="checkbox" data='3' />
<input type="checkbox" data='2' />
<input type="checkbox" data='1' />
</div>
<div class="result">
<p class="result-8">8</p>
<p class="result-4">4</p>
<p class="result-2">2</p>
<p class="result-1">1</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment