I have the following code, which I've been working on as a CSS/HTML proof-of-concept.
The intention is to have variables defined on either at loadtime through the default selected option, or when the user alters the option selected on the tag. Upon selection or on load, the CSS is meant to takes the values defined for each of the months, and then applies the necessary arithmetic and displays the result in the form of a binary value, along with the decimal equivalent, calculated by calc() call in the #result:after style. I don't want to hardcode the decimal values as there is a possibility that the variables --m0 to --m7 may change later on, and I want the CSS calc() to do all the heavy lifting.
Unfortunately, regardless of the month selected either by a user or on load, the value still results in displaying "00000000 = 0" instead of the current values depicted in the comments, for example, seeing "00000110 = 6" if September was selected, or "00000001 = 1" for January which is set by default on-load.
I am almost certain there is a way to ensure that these values can be calculated/recalculated on the selection of a new option, or upon loading of the page. Is there a CSS-only way to do this? I canonly assume I've either coded this incorrectly, or that I'm missing something vital within my code... Could anyone please shed some light?
Thanks in advance.
Please Note: I am after HTML/CSS solutions only, as I said, this is a proof of concept with regards to CSS functionality and how far I can take this POC. Answers like "You should do this in JavaScript" are unhelpful and completely miss the point of what I'm trying to achieve here.
:root {
--isLeapYear: 0; /* Determinant to be worked out later, set as 0 for now */
}
#month:valid > option[value="1"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: calc(1 - var(--isLeapYear)); /* 1, 0 if a leap year */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="2"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: calc(1 - var(--isLeapYear)); --m1: var(--isLeapYear); --m0: var(--isLeapYear);
/* 4, 3 if a leap year */
--hasDay29: var(--isLeapYear);
--hasDay30: 0;
--hasDay31: 0;
}
#month:valid > option[value="3"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 0; /* 4 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="4"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 0; /* 0 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 0;
}
#month:valid > option[value="5"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 1; --m0: 0; /* 2 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="6"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 1; /* 5 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 0;
}
#month:valid > option[value="7"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 0; /* 0 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="8"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 1; --m0: 1; /* 3 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="9"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 1; --m0: 0; /* 6 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 0;
}
#month:valid > option[value="10"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 1; /* 1 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#month:valid > option[value="11"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 0; /* 4 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 0;
}
#month:valid > option[value="12"]:checked {
--m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 1; --m0: 0; /* 6 */
--hasDay29: 1;
--hasDay30: 1;
--hasDay31: 1;
}
#result:after {
counter-reset: v7 var(--m7);
counter-reset: v6 var(--m6);
counter-reset: v5 var(--m5);
counter-reset: v4 var(--m4);
counter-reset: v3 var(--m3);
counter-reset: v2 var(--m2);
counter-reset: v1 var(--m1);
counter-reset: v0 var(--m0);
--result: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
counter-reset: result var(--result);
/* Debug to confirm month values are actually calculating*/
content: counter(v7) counter(v6) counter(v5) counter(v4) counter(v3) counter(v2) counter(v1) counter(v0) " = " counter(result);
}<div id="controls">
<select id="month">
<option value="1" selected="selected">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<div id="result"></div>
</div>