Codepen Challenge - Checkboxes

codepen-challenge-checkboxes.markdown

Codepen Challenge - Checkboxes

A Pen by Pinnacle Web Development on CodePen.

License.

index.html

<div class="cpc_container">  
        <div class="questions">
            <div class="question">
                <div class="question_title">Would you like to receive promotional emails?</div>
                <div class="pinnacle_checkbox">
                    <input type="checkbox" id="promo_email_cb" data-summary="promo_email_sum"></input>
                    <label for="promo_email_cb">
                        <div class="unchecked_area"></div>
                        <div class="checked_area"></div>
                    </label>
                </div>
            </div>
            <div class="question">
                <div class="question_title">Do you agree to our Terms and Conditions?</div>
                <div class="pinnacle_checkbox">
                    <input type="checkbox" id="terms_cb" data-summary="terms_sum"></input>
                    <label for="terms_cb">
                        <div class="unchecked_area"></div>
                        <div class="checked_area"></div>
                    </label>
                </div>
            </div>
        </div>

        <div class="summary">
            <div class="summary_title">Summary</div>
            <div class="summary_content">
                <div class="summary_entry promo_email_sum"></div>
                <div class="summary_entry terms_sum"></div>
            </div>
        </div>
    </div>

script.js

// Object that stores summary text.
var summary_wordage = {
    promo_email_sum: {
        checked: "You'll be receiving exciting promotional emails from us!",
        unchecked: "You wont be receiving exciting promotional emails from us."
        
    },
    terms_sum: {
        checked:  "You've agreed to our terms and conditions!",
        unchecked: "You haven't agreed to our terms and conditions."
    }
}



function updateSummary(checkbox) {

    // Field is the id of selected checkbox. This is required to get the correct text to update the summary.
    var summary = checkbox.getAttribute("data-summary");

    // Status is whether the checkbox is checked or unchecked.
    var status = checkbox.checked ? "checked" : "unchecked";

    // Wordage is the text that will be used in the summary.
    var wordage = summary_wordage[summary][status];

    // The summary element that will be updated.
    var summary_element = document.querySelector("." + summary);

    if (checkbox.checked) {
        summary_element.classList.add("valid");
    } else {
        summary_element.classList.remove("valid");
    }

    // Updates text in summary entry.
    summary_element.innerHTML = wordage;



     // Summary content is the element that wraps all of the summary entries.
     var summary_content = document.querySelector(".summary_content");

     // Stores an array of the summary entry elements.
     var summary_entries = document.querySelectorAll(".summary_entry");
 
     // Initialiser variable that's used to give the green border when all summary entries are valid/checked.
     var all_valid = true;



    // If a summary entry doesn't contain the valid class, then set don't apply the green border around summary content.
    for (var i = 0; i < summary_entries.length; i++) {
        if (!summary_entries[i].classList.contains("valid")) {
            all_valid = false;
        }
    }

    if (all_valid) {
        summary_content.classList.add("valid");
    } else {
        summary_content.classList.remove("valid");
    }




}



// Stores array of checkbox elements
var checkboxes = document.querySelectorAll(".pinnacle_checkbox input");

for (var i = 0; i < checkboxes.length; i++) {

    // Sets event listeners on checkboxes to update summary on change.
    checkboxes[i].addEventListener('change', (event) => {
        updateSummary(event.target);
    })

    // Sets summary content on first load
    updateSummary(checkboxes[i]);
}

style.scss

//Fonts
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

// Variables
$green: #64BE7C;
$red: #E25E5E;
$grey: #707070;

// Mixins
@mixin checkbox() {

    // Label is styled to look like a custom checkbox. Default checkbox is hidden.
    & input {
        display: none;
    }

    & label {
        display: block;
        height: 50px;
        width: 100px;
        border: 2px solid $red;
        transition: border .3s ease;
        border-radius: 5px;
        cursor: pointer;
			background-color: lightgray;

        .unchecked_area {
            width: 50%;
            height: 100%;
            background-color: $red;
            transition: width .3s;
            float: left;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            box-shadow: inset 0px 0px 21px -2px rgba(0,0,0,0.75);
        }

        .checked_area {
            width: 0%;
            height: 100%;
            background-color: $green;
            transition: width .3s;
            float: right;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            box-shadow: inset 0px 0px 21px -2px rgba(0,0,0,0.75);
        }
    }

    & input:checked+label  {
        border: 2px solid $green;

        .unchecked_area {
            width: 0%;
        }

        .checked_area {
            width: 50%;
        }
    }
}
*,
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: "Montserrat";
    font-size: 22px;
		
   background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}


.cpc_container {
    padding: 100px;
    width: 100%;
    max-width: 710px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
}

.pinnacle_checkbox {
    @include checkbox()
}

.question {

    margin-bottom: 60px;

    .question_title {
        margin-bottom: 20px;
    }
    
}

.summary_content {
    width: 100%;
    border: 2px solid #E25E5E;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: white;
    font-size: 14px;
    -webkit-transition: border .3s ease;
    -o-transition: border .3s ease;
    transition: border .3s ease;
    max-width: 500px;

    &.valid {
        border: 2px solid $green;
    }
}

.summary_title {
    margin-bottom: 20px;
}

.summary_entry {
    padding: 20px;
    border-left: 20px solid $red;
    transition: border-left .3s ease;
		color: black;

    &.valid {
        border-left: 20px solid $green;
    }
}