diff options
Diffstat (limited to 'build/dynamic-checkboxes')
| -rw-r--r-- | build/dynamic-checkboxes/index.html | 310 |
1 files changed, 175 insertions, 135 deletions
diff --git a/build/dynamic-checkboxes/index.html b/build/dynamic-checkboxes/index.html index 9adb9f2..e23448b 100644 --- a/build/dynamic-checkboxes/index.html +++ b/build/dynamic-checkboxes/index.html @@ -1,131 +1,155 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Dynamic Checkboxes</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Dynamic Checkboxes</h1> +<h1 id="dynamic-checkboxes">Dynamic Checkboxes</h1> + <p>2019-07-30</p> -<p>Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> -<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It's easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> -<p>Let's get into it.</p> -<h2>What we are building</h2> + +<p>Checkboxes are used quite frequently on forms across the web. Whether you’re selecting a pricing plan during a site’s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> + +<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It’s easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> + +<p>Let’s get into it.</p> + +<h2 id="what-we-are-building">What we are building</h2> + <p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p> + <p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p> -<h2>The Structure (HTML)</h2> -<p>As always, we will start by breaking down the "bones" of the HTML structure for this checkbox form. Let's take a look at the HTML in it's entirety (don't worry, it is a lot more simple than it seems at first glance):</p> -<pre><code><h2>Add-ons</h2> -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> -<label class="checkbox-label" for="checkbox-1"> - <span> +<h2 id="the-structure-html">The Structure (HTML)</h2> + +<p>As always, we will start by breaking down the “bones” of the HTML structure for this checkbox form. Let’s take a look at the HTML in it’s entirety (don’t worry, it is a lot more simple than it seems at first glance):</p> + +<pre><code><h2>Add-ons</h2> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> +<label class="checkbox-label" for="checkbox-1"> + <span> White-labeled Domain - <em>Use your own custom domain with SSL security included.</em> - </span> - <span>$49/mo</span> -</label> - -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"> -<label class="checkbox-label" for="checkbox-2"> - <span> + <em>Use your own custom domain with SSL security included.</em> + </span> + <span>$49/mo</span> +</label> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"> +<label class="checkbox-label" for="checkbox-2"> + <span> API Access - <em>Make API calls to perform custom serving and account actions.</em> - </span> - <span>$49/mo</span> -</label> - -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"> -<label class="checkbox-label" for="checkbox-3"> - <span> + <em>Make API calls to perform custom serving and account actions.</em> + </span> + <span>$49/mo</span> +</label> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"> +<label class="checkbox-label" for="checkbox-3"> + <span> Priority Support - <em>A dedicated account manager to assist your team with ongoing deployments.</em> - </span> - <span>$349/mo</span> -</label> - -<div class="total-cost"> - <h2>Your Plan</h2> - <div> - <span>$</span> - <span id="total-cost-inner">0</span> - <input id="output" type="text" value="0" disabled/> - <span>/mo</span> - </div> -</div> + <em>A dedicated account manager to assist your team with ongoing deployments.</em> + </span> + <span>$349/mo</span> +</label> + +<div class="total-cost"> + <h2>Your Plan</h2> + <div> + <span>$</span> + <span id="total-cost-inner">0</span> + <input id="output" type="text" value="0" disabled/> + <span>/mo</span> + </div> +</div> </code></pre> -<h3>The checkbox inputs & labels</h3> -<pre><code><!-- #1 --> -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> -<!-- #2 --> -<label class="checkbox-label" for="checkbox-1"> +<h3 id="the-checkbox-inputs-labels">The checkbox inputs & labels</h3> - <!-- #2i --> - <span> +<pre><code><!-- #1 --> +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> + +<!-- #2 --> +<label class="checkbox-label" for="checkbox-1"> + + <!-- #2i --> + <span> White-labeled Domain - <em>Use your own custom domain with SSL security included.</em> - </span> - - <!-- #2ii --> - <span>$49/mo</span> + <em>Use your own custom domain with SSL security included.</em> + </span> + + <!-- #2ii --> + <span>$49/mo</span> -</label> +</label> </code></pre> + <ol> -<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p> -</li> -<li>This label needs it's <code>for</code> value to correspond with it's partnered checkbox.</li> +<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p></li> +<li><p>This label needs it’s <code>for</code> value to correspond with it’s partnered checkbox.</p> + +<ul> +<li>i) The first span holds the title and description information of the add-on</li> +<li>ii) The last span holds the cost associated with the current add-on</li> +</ul></li> </ol> -<p> - i) The first span holds the title and description information of the add-on - - ii) The last span holds the cost associated with the current add-on</p> -<h3>The total cost container output</h3> -<pre><code><!-- #1 --> -<div class="total-cost"> - <h2>Your Plan</h2> +<h3 id="the-total-cost-container-output">The total cost container output</h3> - <!-- #2 --> - <div> +<pre><code><!-- #1 --> +<div class="total-cost"> - <!-- #2i --> - <span>$</span> + <h2>Your Plan</h2> - <!-- #2ii --> - <span id="total-cost-inner">0</span> + <!-- #2 --> + <div> - <!-- #2iii --> - <input id="output" type="text" value="0" disabled/> + <!-- #2i --> + <span>$</span> - <!-- #2iv --> - <span>/mo</span> + <!-- #2ii --> + <span id="total-cost-inner">0</span> - </div> + <!-- #2iii --> + <input id="output" type="text" value="0" disabled/> -</div> + <!-- #2iv --> + <span>/mo</span> + + </div> + +</div> </code></pre> + <ol> -<li><p>A simple <code>div</code> with a class we can easily target later</p> -</li> -<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS) - - i) The first <code>span</code> holds the static currency symbol - - ii) The second <code>span</code> is where our updated cost will be injected - - iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code> - - iv) The final <code>span</code> simply holds the static monthly duration content</p> -</li> +<li><p>A simple <code>div</code> with a class we can easily target later</p></li> +<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)</p> + +<ul> +<li>i) The first <code>span</code> holds the static currency symbol</li> +<li>ii) The second <code>span</code> is where our updated cost will be injected</li> +<li>iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code></li> +<li>iv) The final <code>span</code> simply holds the static monthly duration content</li> +</ul></li> </ol> -<p>All that's all we need for the HTML!</p> -<h2>The Visuals (CSS)</h2> + +<p>All that’s all we need for the HTML!</p> + +<h2 id="the-visuals-css">The Visuals (CSS)</h2> + <p>Again, lets take a look at the entire file before we break it down step-by-step:</p> + <pre><code>.checkbox-label { align-items: center; background-color: none; @@ -153,7 +177,7 @@ background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; @@ -163,7 +187,7 @@ } .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); } .checkbox-label span { -webkit-user-select: none; @@ -189,7 +213,7 @@ .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); border-color: mediumpurple; } @@ -228,11 +252,13 @@ } } </code></pre> -<h3>The checkbox label</h3> -<pre><code>/* -This is the main element for each checkbox "container". + +<h3 id="the-checkbox-label">The checkbox label</h3> + +<pre><code>/* +This is the main element for each checkbox "container". Inside it houses the title, description and price. -*/ +*/ .checkbox-label { align-items: center; background-color: none; @@ -252,29 +278,32 @@ Inside it houses the title, description and price. background-color: rgba(255,255,255,0.2); } -/* Update the label styling when the input is :checked */ +/* Update the label styling when the input is :checked */ .checkbox-btn:checked + .checkbox-label { background-color: white; border-color: mediumpurple; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } </code></pre> -<h3>The custom checkbox input</h3> -<p>We need to hide the browser's default checkbox input and replace it with our own using pseudo selectors.</p> -<pre><code>/* Hide browser default input */ + +<h3 id="the-custom-checkbox-input">The custom checkbox input</h3> + +<p>We need to hide the browser’s default checkbox input and replace it with our own using pseudo selectors.</p> + +<pre><code>/* Hide browser default input */ .checkbox-btn { position: absolute; visibility: hidden; } -/* Our custom input checkbox */ +/* Our custom input checkbox */ .checkbox-label:before { background-repeat: no-repeat; background-position: center; background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; @@ -283,30 +312,33 @@ Inside it houses the title, description and price. width: 30px; } -/* -Here we add a simple '+' icon on hover +/* +Here we add a simple '+' icon on hover to our custom pseudo element. Adding it as an inline SVG gives us the -ability to fully customize it's styling -*/ +ability to fully customize it's styling +*/ .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); } -/* +/* When the checkbox input is :checked we need to update the inline SVG to use a checkmark symbol -*/ +*/ .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); border-color: mediumpurple; } </code></pre> -<h3>The total cost container</h3> -<p>We only need some very basic flexbox styling for our bottom "total" container:</p> + +<h3 id="the-total-cost-container">The total cost container</h3> + +<p>We only need some very basic flexbox styling for our bottom “total” container:</p> + <pre><code>.total-cost { align-items: baseline; border-top: 1px solid lightgrey; @@ -328,21 +360,24 @@ update the inline SVG to use a checkmark symbol font-weight: bold; } -/* +/* This input is used in our JavaScript - look at the function part of this post to understand why -*/ +*/ .total-cost input { display: none; } </code></pre> -<h3>Last but not least - mobile</h3> + +<h3 id="last-but-not-least---mobile">Last but not least - mobile</h3> + <p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p> + <pre><code>@media(max-width:480px) { - /* + /* Avoids the inner label content from squishing together and becoming unreadable - */ + */ .checkbox-label { align-items: flex-start; flex-direction: column; @@ -353,39 +388,44 @@ function part of this post to understand why } } </code></pre> -<p>That's it for the styling!</p> -<h2>The Function (JS)</h2> -<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost "injection".</p> + +<p>That’s it for the styling!</p> + +<h2 id="the-function-js">The Function (JS)</h2> + +<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost “injection”.</p> + <pre><code>window.onload=function(){ -// Place the default browser checkbox inputs into a variable -var inputs = document.getElementsByClassName('checkbox-btn') +// Place the default browser checkbox inputs into a variable +var inputs = document.getElementsByClassName('checkbox-btn') -// Now we loop through the inputs and check if they are -// greater than zero. If so, we run our function. -for (var i=0; i < inputs.length; i++) { +// Now we loop through the inputs and check if they are +// greater than zero. If so, we run our function. +for (var i=0; i < inputs.length; i++) { inputs[i].onchange = function() { - // Create `add` variable which takes the :checked input value + // Create `add` variable which takes the :checked input value var add = this.value * (this.checked ? 1 : -1); - // We grab the current total value on our hidden input field and return it - // as a floating point number - // (since in this use case it will be a price number based on currency) - var new_total = parseFloat(document.getElementById('output').value); + // We grab the current total value on our hidden input field and return it + // as a floating point number + // (since in this use case it will be a price number based on currency) + var new_total = parseFloat(document.getElementById('output').value); - // Now we simply add the existing total value with the newly ":checked" input value - var updated_total = document.getElementById('output').value=new_total + add + // Now we simply add the existing total value with the newly ":checked" input value + var updated_total = document.getElementById('output').value=new_total + add - // Place the new updated total directly inside the `total-cost-inner` span element - document.getElementById('total-cost-inner').innerHTML = updated_total; + // Place the new updated total directly inside the `total-cost-inner` span element + document.getElementById('total-cost-inner').innerHTML = updated_total; } } } </code></pre> -<p>That's it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p> + +<p>That’s it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |