Donation Prototype - v2 Visual Hierarchy Fixes

Developer
Zane Riley
Size
16,897 Kb
Views
16,192
  1. Donation Prototype - v2 Visual Hierarchy Fixes Previews
  2. Donation Prototype - v2 Visual Hierarchy Fixes HTML Codes
  3. Donation Prototype - v2 Visual Hierarchy Fixes CSS Codes
  4. Donation Prototype - v2 Visual Hierarchy Fixes JS Codes

How do I make an donation prototype - v2 visual hierarchy fixes?

Also big thanks to Dave Arnold for the great code review.. What is a donation prototype - v2 visual hierarchy fixes? How do you make a donation prototype - v2 visual hierarchy fixes? This script and codes were developed by Zane Riley on 11 September 2022, Sunday.

Donation Prototype - v2 Visual Hierarchy Fixes Previews
IQ Test

Donation Prototype - v2 Visual Hierarchy Fixes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Donation Prototype - v2 Visual Hierarchy Fixes</title> <meta name="viewport" content="width=device-width">
<script src="//use.typekit.net/rku0ory.js"></script> <script>try{Typekit.load();}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/qcmpw.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <div class="donate-module"> <form class="donate-module-content" id="donateForm" novalidate="novalidate" autocomplete="on" method="POST" data-parsley-validate="data-parsley-validate"> <h2 class="donation-module-title">Donate Today</h2> <fieldset class="donation-module-content-amount active"> <div class="donation-instructions"> <p>Choose the amount you'd like to give.</p> </div> <div class="donation-module-amounts"> <h4 class="donation-module-subtitle">Amount</h4> <ul> <li class="amount amount-cont-1"> <input type="radio" name="amount" id="amount_10" value="10" tabindex="1"/> <label for="amount_10">$10</label> </li> <li class="amount amount-count-2"> <input type="radio" name="amount" id="amount_35" value="35" tabindex="2" checked="checked"/> <label for="amount_35">$35</label> </li> <li class="amount amount-cont-3"> <input type="radio" name="amount" id="amount_50" value="50" tabindex="3"/> <label for="amount_50">$50</label> </li> <li class="amount amount-count-4"> <input type="radio" name="amount" id="amount_100" value="100" tabindex="4"/> <label for="amount_100">$100</label> </li> <li class="amount amount-count-5"> <input type="radio" name="amount" id="amount_250" value="250" tabindex="5"/> <label for="amount_250">$250</label> </li> <li class="amount amount-count-6"> <input type="radio" name="amount" id="amount_500" value="500" tabindex="6"/> <label for="amount_500">$500</label> </li> <div class="amount-count-other"> <label for="amount_other">Enter Other Amount</label> <input class="amount-other" type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="7" maxlength="5"/> </div> <div class="amount-reoccuring"> <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring" tab-index="8"/> <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> </div> </ul> </div> <div class="next-step"> <p class="impact-statement"><span class="impact-amount">$35</span><span class="impact-phrase"> can pay for: </span><span class="impact-results">180 days back to 3 girls.</span></p> <button class="btn btn--large btn--confirm next" type="button" name="next" value="next" tab-index="9">Next ➜</button> </div> </fieldset> <fieldset class="donation-module-content-name previous"> <div class="donation-instructions"> <p>Enter your information below.</p> </div> <div class="donation-module-information"> <h4>Name and Information</h4> <div class="information-name"> <div class="form-group"> <div class="first-name"> <label for="first-name">First Name</label> <input type="text" id="first-name" placeholder="Grace"/> </div> <div class="last-name"> <label for="last-name">Last Name</label> <input type="text" id="last-name" placeholder="Hopper"/> </div> </div> </div> <div class="information-email"> <label for="email">Email</label> <input type="email" id="email" placeholder="[email protected]"/> </div> </div> <div class="next-step"> <button class="btn btn--large btn--confirm next" type="button" name="next" value="next">Next ➜</button> </div> </fieldset> <fieldset class="donation-module-content-payment previous"> <div class="donation-instructions"> <p>Enter your payment details below.</p> </div> <div class="donation-module-information"> <h4>Payment Details</h4> </div> <div class="information-cc"> <label class="control-label" for="cc-number">Credit Card Number</label> <input class="form-control cc-number" id="cc-number" type="tel" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required="required"/><span class="cc-brand"></span> </div> <div class="form-group cc-expa"> <label class="control-label" for="cc-exp">Expiraton Date</label> <input class="form-control cc-exp" id="cc-expa-month" type="tel" autocomplete="cc-exp" placeholder="MM" required="required" data-stripe="exp-month"/> <input class="form-control" id="cc-expa-year" type="tel" autocomplete="cc-exp" placeholder="YYYY" required="required" data-stripe="exp-month"/> </div> <div class="form-group last"> <label class="control-label" for="cc-cvc">CVC <a id="cvc-help" href="">?</a></label> <input class="form-control cc-cvc" id="cc-cvc" type="tel" autocomplete="off" placeholder="•••" required="required" data-stripe="cvc" maxlength="4"/> </div> <div class="next-step"> <button class="btn btn--large btn--success donate" name="donate" value="donate" type="submit">Donate $35</button> </div> </fieldset> </form> <div class="thank-you-transition"></div> <div class="thank-you"> <div class="close">×</div> <div class="message"> <p>You're making a huge difference.</p><a class="btn btn--confirm">Share My Impact</a> </div> </div> <div class="clearfix"></div> <div class="progress-bar"> <div class="top-bar"></div> <div class="step amount active"> <p> <span>1</span> Amount</p> </div> <div class="step name"> <p> <span>2</span> Name</p> </div> <div class="step payment last"> <p> <span>3</span> Payment</p> </div> <div class="step--active"> <div class="top-bar"></div> </div> </div> </div> <p class="notes">Form does not post anywhere.</p>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Donation Prototype - v2 Visual Hierarchy Fixes - Script Codes CSS Codes

$primary-color: #ef6c00;
$primary-color-lighter: #ffc855;
$primary-color-lightest: #ffffc8;
$accent-color: #bf2030;
$confirm-color: #814efc;
$success-color: #29ce75;
$inverse-color: #fff;
$main-text: rgba(55, 0, 67, 1);
$sub-text: rgba(55, 0, 67, 0.87);
$hint-text: rgba(55, 0, 67, 0.33);
$border-radius: 0.2em;
// DONATION MODULE - GLOBAL
.donate-module { background-color: $inverse-color; border-radius: $border-radius; box-shadow: 0px 2px 4px 0px rgba(55, 0, 67, 0.20); -webkit-font-smoothing: antialiased; min-height: 32em; overflow: hidden; position: relative; transform: rotateZ(360deg); transition: max-height 200ms cubic-bezier(0.000, -0.600, 0.000, 1.650); width: 25em; -webkit-transform: translateZ(0) scale(1.0, 1.0); fieldset { background: $inverse-color; transition: all 750ms cubic-bezier(1.000, -0.500, 0.520, 1.650); opacity: 0; position: absolute; transform: translateX(0%); float: left; max-width: 22em; &.active { display: block; opacity: 1; position: relative; transform: translateX(0); } &.next { opacity: 0; transform: translateX(-110%); } &.previous { transform: translate(110%); } }
}
// DONATION MODULE - CONTENT WITHIN MODULE
.donate-module-content { padding: 1.5em 1.5em 0; position: relative; > *:first-child, h2:first-child { margin-top: 0; } .donation-instructions { margin-bottom: 1.918em; text-align: left; p:last-of-type { margin-bottom: 0; } } // DONATE MODAL - NAME - IMPACT STATEMENT .next-step { text-align: right; .btn { margin-top: 1em; width: 49%; } } label + input:not([type='checkbox']):not([type='radio']) { display: block; } input:not([type='checkbox']):not([type='radio']) { margin-bottom: 1.333em; width: 100%; }
}
// DONATION MODAL - FIELDSET - DONATION AMOUNT
.donation-module-content-amount { text-align: center; width: 100%; h4 { margin-top: 0; text-align: left; } .donation-module-amounts { margin-bottom: 1.918em; } .amount { @include column(1/6); display: inline-block; margin-bottom: 1.633em; margin-top: 2.933em; input { position: absolute; visibility: hidden; z-index: 99; } label { border-radius: 10em; cursor: pointer; display: block; margin-top: -1.633em; position: relative; z-index: 2; color: $main-text; font-weight: 700; &:after { background-color: $primary-color-lighter; border: 0; border-radius: 3em; bottom: -50%; content: ''; display: inline-block; height: 3.25em; left: 0; margin: auto; position: absolute; right: 0; width: 3.25em; z-index: -1; } } } .amount-count-other { clear: both; display: block; position: relative; width: 100%; label { display: none; visibility: hidden; } input { padding: 0.6em 2em 0.6em 1.75em; width: 100%; } &:before { bottom: 0.35em; content: '$'; display: inline-block; font-weight: 900; left: 0.75em; position: absolute; z-index: 1; } &:after { bottom: 0.35em; content: 'USD'; display: inline-block; font-weight: 900; position: absolute; right: 0.5em; z-index: 1; } } .amount-reoccuring { text-align: right; } .impact-statement { font-style: italic; margin-bottom: 0; } .impact-amount, .impact-results { font-style: normal; font-weight: 900; }
}
// DONATION MODAL - FIELDSET - NAME AND INFORMATION
.donation-module-content-name { width: 100%; .form-group { > * { @include column(1/2); } }
}
.donation-module-content-payment { .form-group { @include column(1/2); &.last { margin-right: 0; } #cc-expa-month { display: inline-block; width: 35%; border-right: 0; margin: 0; float: left; border-radius: 0.2em 0em 0 0.2em; } #cc-expa-year { display: inline-block; width: 65%; border-left: 0; margin: 0; border-radius: 0em 0.2em 0.2em 0em; margin-left: -10px; } } .cc-expa { position: relative; &:after { bottom: 0.35em; content: '/'; display: inline-block; font-weight: 900; color: $hint-text; position: absolute; left: -45%; right: 0; margin: auto; width: 1em; text-align: center; } }
}
.thank-you-transition { content: ""; position: absolute; background-color: $success-color; border-radius: 50em; width: 1em; height: 1em; bottom: 8.6em; right: 6.5em; z-index: 1; transform: scale3d(0, 0, 1); transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; &.active { opacity: 1; transform: scale3d(100,100,1); } &.exiting { opacity: 0; /*animation: thank-you-exit 300ms forwards;*/ }
}
.thank-you { position: absolute; width: 100%; height:100%; top: 0; right: 0; left: 0; margin: auto; opacity:0; visibility:hidden; color:$inverse-color; font-weight:700; &.active { visibility: visible; opacity:1; z-index: 3; } .close { cursor: pointer; transition: all .4s ease-in-out; font-size:2em; text-align:right; margin-right:0.75em; z-index:1; } .message { position:absolute; top:0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; width:100%; height:100%; transition: all .4s ease-in-out; font-size:1.5em; text-align:center; z-index:-1; > *:first-child { margin-top:0; } .btn{ font-size: 1rem; } }
}
// DONATE MODUAL - PROGRESS BAR
.progress-bar { background-color: $primary-color; bottom: 0; clear: both; color: $inverse-color; display: table; margin: 1.333rem 0 0; position: absolute; width: 100%; z-index: 0; // PROGRESS BAR - STEPS .step { @include span(1/3); cursor: pointer; margin: 0; overflow: hidden; padding: 0.95em 0.75em 0.75em; position: relative; text-align: center; // PROGRESS BAR - LAST STEP &.last { float: right; } // PROGRESS BAR - STEP LABELS p { margin-bottom: 0; position: relative; z-index: 2; } // PROGRESS BAR - STEP LABELS NUMBERING span { color: $primary-color; margin-right: 0.5em; position: relative; &:before { background-color: $inverse-color; border-radius: 1em; bottom: -0.01em; content: ''; height: 1.2em; left: -.30em; margin: auto; position: absolute; width: 1.2em; z-index: -1; } } &.active { span { color: $accent-color; transition: color 250ms ease-in-out; &:before { } } } } // DONATE MODAL - PROGRESS BAR -- ACTIVE STATE .step--active { background-color: $accent-color; bottom: 0; content: ''; height: 100%; left: 0; position: absolute; transform: 0; transition: left 500ms cubic-bezier(0.805, -0.175, 0.000, 1.650); width: 33.333%; z-index: 1; // DONATE MODAL - PROGRESS BAR -- ACTIVE STATE -- TOP BORDER .top-bar { background-color: $primary-color; } } // DONATE MODAL - PROGRESS BAR -- TOP BORDER .top-bar { background-color: $primary-color-lighter; content: ''; display: block; height: 0.2em; left: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 1; &.active { background-color: $primary-color; } }
}
// DONATE MODAL - RADIO LABELS -- UNCHECKED
input[type=radio] + label { color: $inverse-color; &:after { transition: background-color 200ms ease-in-out; }
}
// DONATE MODAL RADIO LABELS -- CHECKED
input[type=radio]:checked + label { color: $inverse-color; transition: color 50ms ease-in-out; animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1) forwards; &:after { transition: background-color 200ms ease-in-out; background-color: $primary-color; }
}
// HELPER CLASSES
.hide { display: none;
}
.clearfix { clear: both;
}
.bounce-in { animation: bounce-in .4s ease-in-out forwards;
}
.bounce-out { animation: bounce-in .1s ease-in-out reverse forwards;
}
// GLOBAL CLASSES
a { color: $primary-color; text-decoration: none; &:hover { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)90%, $primary-color 10%); background-repeat: repeat-x; text-decoration: none; }
}
.btn,
a,
button { cursor: pointer;
}
.btn,
button { background: $primary-color; border-radius: $border-radius; border: 0; color: $inverse-color; font-size: 1em; font-weight: 700; padding: 0.75em 1em; position: relative; transition: background-color .1s ease-in-out; &:after { background: inherit; border-radius: $border-radius; bottom: -20px; content: ''; left: -20px; opacity: 0.4; position: absolute; right: -20px; top: -20px; transform: scale3d(0.8, 0.5, 1); z-index: -1; } &:active { transform: scale3d(0.95, 0.95, 1); &:after { animation: button-down-after 0.2s forwards; } } &:hover{ background-image:none; }
}
.btn--confirm { background-color: $confirm-color; border: 1px solid rgba(55, 0, 67, 0.20); box-shadow: 0px 1px 2px 0px rgba(55, 0, 67, 0.20); text-shadow: 0px 1px 0px $hint-text; &:hover { background-color: #6322ff; } &:active { background-color: #40267f; }
}
.btn--success { background-color: $success-color; color: $main-text; &:hover { background-color: adjust-saturation($success-color, 30%); }
}
// INPUTS
input { border: 1px solid $hint-text; border-radius: $border-radius; background-color: #f3f3f3; color: $main-text; font-size: 1em; font-weight: 900; padding: .6em; transition: border .1s ease-in-out;
}
label { display: block;
}
// Placeholder Text Styling
::-webkit-input-placeholder { color: $hint-text; font-weight: 300;
}
// Placeholder Text Styling
:-moz-placeholder { color: $primary-color-lighter; font-weight: 300; opacity: 1;
}
// Placeholder Text Styling
::-moz-placeholder { color: $primary-color-lighter; font-weight: 300; opacity: 1;
}
// Placeholder Text Styling
:-ms-input-placeholder { color: $primary-color; font-weight: 300;
}
input:active,
input:focus { border: 1px solid $primary-color-lighter;
}
// Checkbox Styling
input[type=checkbox] { display: none;
}
input[type=checkbox] + label,
input[type=radio] + label { cursor: pointer; position: relative; display: inline-block;
}
// Checkmark box
input[type='checkbox'] + label > span { background: transparent; border: 1px solid $hint-text; background-color: #f3f3f3; border-radius: $border-radius; cursor: pointer; display: inline-block; margin-bottom: 0.1655em; margin-right: 0.1em; height: 1em; transition: all 250ms cubic-bezier(.4, .0, .23, 1.5); width: 1em; vertical-align: middle;
}
// Highlights labels
input[type='checkbox'] + label:hover,
input[type='checkbox']:focus + label {}
// Highlights Checkbox
input[type='checkbox'] + label:hover > span,
input[type='checkbox']:focus + label > span { border-color: $primary-color;
}
// Checkbox Background Color
input[type='checkbox']:checked + label > span { border: .5em solid #f3f3f3; animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);
}
// Checkmark Inside Checkbox
input[type='checkbox'] + label > span:before { content: ""; position: absolute; top: 0em; left: 0.125em; border-right: 0.3em solid transparent; border-bottom: 0.3em solid transparent; box-sizing: content-box;
}
// Checkmark Inside Checkbox
input[type='checkbox']:checked + label > span:before { transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards; box-sizing: content-box;
}
// CODEPEN STYLING
.notes { margin-bottom: 0; font-size: 0.75em; color: $inverse-color; padding: 0.25em
}
main { align-content: center; align-items: center; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; justify-content: space-around;
}
html { box-sizing: border-box;
}
*,
:after,
:before { box-sizing: inherit; margin: 0; outline: 0;
}
body,
html { min-height: 100%; height: 100%;
}
body { background-color: $primary-color; background-image: url('https://i.imgur.com/gk3hqjs.jpg'); background-size: cover; color: $main-text; font-family: adelle-sans, sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; &:after { content: ''; /* background-image: url('https://dl.dropboxusercontent.com/u/52491126/dfg-bg-v2.svg');*/ background-repeat: repeat; background-size: 10em; opacity: 0.25; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; transition: opacity 400ms ease-in-out; }
}
p { margin-bottom: 1.3em;
}
h1,
h2,
h3,
h4 { font-family: adelle, serif; font-weight: inherit; line-height: 1.2; margin: 1.414em 0 .33333em;
}
h1 { font-size: 2.441em; margin-top: 0;
}
h2 { font-size: 1.953em;
}
h3 { font-size: 1.563em;
}
h4 { font-size: 1.25em;
}
.font-small,
small { font-size: .8em;
}
// ANIMATIONS
@keyframes slideIn { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.3% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 102.854, 0, 0, 1); } 8.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 175.717, 0, 0, 1); } 12.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 210.455, 0, 0, 1); } 17.22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.667, 0, 0, 1); } 28.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 204.125, 0, 0, 1); } 39.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 198.754, 0, 0, 1); } 61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200.083, 0, 0, 1); } 83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 199.994, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1); }
}
.animation-target { animation: animation 1000ms linear infinite both;
}
@keyframes bounce-in { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1); opacity: 0; } 7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 46.374, 0, 1); } 11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.237, 0, 1); } 15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 11.867, 0, 1); } 18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.014, 0, 1); } 22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.774, 0, 1); } 30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.234, 0, 1); } 50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.521, 0, 1); } 70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.346, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}
@keyframes shrink-bounce { 0% { transform: scale(1); } 33% { transform: scale(.85); } 100% { transform: scale(1); }
}
@keyframes checkbox-check { 0% { width: 0; height: 0; border-color: $primary-color; transform: translate3d(0, 0, 0) rotate(45deg); } 33% { width: .2em; height: 0; transform: translate3d(0, 0, 0) rotate(45deg); } 100% { width: .2em; height: .5em; border-color: $primary-color; transform: translate3d(0, 0, 0) rotate(45deg); }
}
@keyframes button-down-after { to { opacity: 0; transform: scale(1, 1); }
}
@keyframes thank-you-exit { 0% { opacity: 1; width: 250%; height: 185%; } 1% { display: block; } 99% { width: 250%; height: 185%; } 100% { width: 0%; height: 0%; display: none; opacity: 0; }
}

Donation Prototype - v2 Visual Hierarchy Fixes - Script Codes JS Codes

// Prevent button submission for this demo.
$('form').submit(function(e) { e.preventDefault();
});
/* * * FUNCTION - Display the donation amount in the final Donation button * */
function changeDonationAmount(amountString) { var dollarAmount = parseInt(amountString.replace('$', ''), 10); var impactAmount = Math.floor(dollarAmount / 10); function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } // copy to impact statement $('.impact-amount').text('$' + dollarAmount); if (dollarAmount < 10) { $('.impact-amount').text(''); $('.impact-phrase').text(''); $('.impact-results').text('Every dollar makes a difference.'); } else if (dollarAmount >= 10 && dollarAmount <= 9999) { dollarAmountFormatted = numberWithCommas(dollarAmount); $('.impact-amount').text('$' + dollarAmountFormatted); $('.impact-phrase').text(' can pay for: '); $('.impact-results').text('180 days back to ' + impactAmount + ' girls.'); } else if (dollarAmount >= 9999) { $('.impact-amount').text(''); $('.impact-phrase').text(''); $('.impact-results').text('Your donation will change thousands of lives.'); } // If it doesn't equal a number, let's hide the impact statement completely if (isNaN(dollarAmount)) { $('.impact-statement').addClass('hide').removeClass('bounce-in'); $('button.donate').text('Donate'); } else { // otherwise let's show the impact statement and put the dollar amount on the donate button. "Donate $50" $('.impact-statement').addClass('bounce-in').removeClass('hide'); $('button.donate').text('Donate $' + dollarAmountFormatted); }
}
/* * * Donation Amounts (e.g. $10, $35, $50...) Radio Buttons * */
// If Amount button is clicked...
$('.amount label').on('click', function() { // Let's calculate the donation amount and its impact changeDonationAmount($(this).text()); // Clear other amount donation, if any $('#amount_other').val('');
});
// If a person enters a custom donation amount...
$('#amount_other').keyup(function() { // Let's calculate the donation amount and its impact changeDonationAmount($(this).val()); // Clear button selection $('.amount input[type=radio]').prop('checked', false);
});
/* * * FUNCTION - populates donation form with placeholder * information of notable women. * */
function namePlaceholderGenerator() { var notableWomen = [{ firstName: 'Grace', lastName: 'Hopper' }, { firstName: 'Sojourner', lastName: 'Truth' }, { firstName: 'Mary', lastName: 'Anning' }]; // Picks a random number between two values. function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // In this case, the amount of notableWomen to choose from. var placeholderNumber = randomIntFromInterval(0, 2); $('.first-name input').attr('placeholder', notableWomen[placeholderNumber].firstName); $('.last-name input').attr('placeholder', notableWomen[placeholderNumber].lastName); $('.information-email input').attr('placeholder', notableWomen[placeholderNumber].firstName + notableWomen[placeholderNumber].lastName + '@gmail.com');
}
// Load a different notableWomen as placeholders in the donation form.
namePlaceholderGenerator();
/* * * FUNCTION - Steps animations (e.g. Amount, Name, Payment) * */
function moveBackground(module, percent) { // Move the red background state behind the appropriate section. $('.step--active').css('left', percent);
}
/* * * FUNCTION - Multi-step form animation * */
function moveForm(module) { // Let's make sure the other modules aren't in view. $(module).addClass('active').removeClass('next').removeClass('previous'); // If a fieldset isn't one that was clicked on, let's hide it. $('fieldset').not(module).removeClass('active'); // A specific class needs to be added for a specific transition, depending on which fieldset is currently in view. if ($('.donation-module-content-amount').hasClass('active')) { $('.donation-module-content-name').removeClass('active').addClass('previous'); $('.donation-module-content-payment').removeClass('active').addClass('previous'); } else if ($('.donation-module-content-name').hasClass('active')) { $('.donation-module-content-amount').removeClass('active').addClass('next'); $('.donation-module-content-payment').removeClass('active').addClass('previous'); } else if ($('.donation-module-content-payment').hasClass('active')) { $('.donation-module-content-amount').removeClass('active').addClass('next'); $('.donation-module-content-name').removeClass('active').addClass('next'); }
}
/* * * Multi-Step lables at bottom of form * */
$('.step').on('click', function() { //remove all other instances of 'active' $('.step').removeClass('active'); //then apply '.active' to .step that was clicked $(this).addClass('active'); // If the '01 Amount' step has '.active' class if ($('.amount').hasClass('active')) { moveBackground('.amount', '0%'); moveForm('.donation-module-content-amount'); // otherwise if 'O1 Name' step has '.active' class } else if ($('.name').hasClass('active')) { moveBackground('.name', '33.333%'); moveForm('.donation-module-content-name'); } else if ($('.payment').hasClass('active')) { moveBackground('.donation-module-content-payment', '67.666%'); moveForm('.donation-module-content-payment'); }
});
/* * * Buttons in multi-step donation forms. * */
// If you click the 'Next' button on the amount section...
$('.donation-module-content-amount button.next').on('click', function() { moveBackground('.donation-module-content-name', '33.333%'); moveForm('.donation-module-content-name');
});
// If you click the 'Next' button on the information section...
$('.donation-module-content-name button.next').on('click', function() { moveBackground('.donation-module-content-name', '67.666%'); moveForm('.donation-module-content-payment');
});
/* * * Thank You Confirmation * */
// When you click the final 'donate' button...
$('.donation-module-content-payment button.donate').on('click', function() { $('.thank-you-transition').removeClass('exiting').addClass('active');	setTimeout(function() { $('.thank-you').addClass('active'); }, 200); setTimeout(function() { moveBackground('donation-module-content-amount', '0%'); moveForm('.donation-module-content-amount'); }, 400);
});
// Closing the thank you screen
$('.thank-you .close').on('click', function() { $('.thank-you-transition').removeClass('active').addClass('exiting'); $('.thank-you').removeClass('active'); $('#donateForm').trigger('reset'); // Resetting the impact statement to the default value as well. $('.impact-amount').text('$35'); $('.impact-phrase').text(' can pay for: '); $('.impact-results').text('180 days back to ' + 3 + ' girls.'); setTimeout(function() { $('.thank-you-transition').removeClass('exiting'); }, 400);
});
/* * * Form Validation * */
// Masking
// Only allow digits in custom donation amount input.
$('.amount-other').on('keypress', function(ev) { var keyCode = window.event ? ev.keyCode : ev.which; //codes for 0-9 if (keyCode < 48 || keyCode > 57) { //codes for backspace, delete, enter if (keyCode !== 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) { ev.preventDefault(); } }
});
// Formatting the Payment Section
Donation Prototype - v2 Visual Hierarchy Fixes - Script Codes
Donation Prototype - v2 Visual Hierarchy Fixes - Script Codes
Home Page Home
Developer Zane Riley
Username zaneriley
Uploaded September 11, 2022
Rating 3
Size 16,897 Kb
Views 16,192
Do you need developer help for Donation Prototype - v2 Visual Hierarchy Fixes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zane Riley (zaneriley) Script Codes
Name
Donation Prototype - v3 Multi-pay option
Landing Page Prototype
3d Shadow Prototype v2
Splash Page with animated gradient and text clipping.
Masking Gifs
Landing Page Prototype
Fluid Type Demo with Grid
Callout Example
Portfolio Header and Footer
Button Explorations
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!