xxxxxxxxxx1
<!-- Start your project here-->2
<div class="container">3
<div class="col-6">4
<p class="my-0">Custom_paint?</p>5
<div class="form-check form-check-inline mb-1">6
<input class="form-check-input check" type="radio" name="is_custom_paint" id="custom_paint_yes"/>7
<label class="form-check-label" for="custom_paint_yes"> Yes</label>8
</div>9
<div class="form-check form-check-inline mb-1">10
<input class="form-check-input check" type="radio" name="is_custom_paint" id="custom_paint_no"/>11
<label class="form-check-label" for="custom_paint_no"> No </label>12
</div>13
</div>14
<!-- Reveal this and hide it based on radio button-->15
<div class="col-6 float-start">16
17
<div id="custom_paint_date" 18
class="form-outline datepicker d-none " data-mdb-format="mmm, dd, yyyy" data-mdb-toggle-button="false">19
<input type="text" name="custom_paint_date" class="form-control d-none custom_paint_label" id="exampleDatepicker13" data-mdb-toggle="datepicker" />20
<label for="exampleDatepicker13" class="form-label">Select a date for paint</label>21
<button class="datepicker-toggle-button" data-mdb-toggle="datepicker">22
<i class="fas fa-calendar datepicker-toggle-icon"></i>23
</button>24
</div>25
</div>26
<!-- Reveal this and hide it based on radio button-->27
<!-- End your project here-->1
1
xxxxxxxxxx1
2
3
<script>4
// Get trigger fields5
var custom_paint_yes = document.querySelector("#custom_paint_yes");6
var custom_paint_no = document.querySelector("#custom_paint_no");7
// fields to reveal8
var custom_paint_date = document.querySelector("#custom_paint_date");9
var custom_paint_label = document.querySelector(".custom_paint_label");10
11
//animation12
let animation = 'fade-in-down';13
const animatePaint = new mdb.Animate(custom_paint_date,14
{15
animation: animation,16
animationStart: "onLoad",17
animationDelay: "100",18
animationDuration: "800",19
});20
//condition to set event listener based on Mobile (unable to use 'click' or 'focus' on mobile)21
if (navigator.userAgent.toLowerCase().match(/mobile/i)) { 22
const touchFcYes = new mdb.Touch(custom_paint_yes, 'tap');23
touchFcYes.init();24
25
custom_paint_yes.addEventListener('tap', function ()26
{27
animation = 'fade-in-down'28
custom_paint_date.classList.remove("d-none");29
custom_paint_label.classList.remove("d-none");30
animatePaint.stopAnimation();31
animatePaint.changeAnimationType(animation);32
animatePaint.startAnimation();33
});34
}else{35
custom_paint_yes.addEventListener('focus', function ()36
{37
animation = 'fade-in-down'38
custom_paint_date.classList.remove("d-none");39
custom_paint_label.classList.remove("d-none");40
animatePaint.stopAnimation();41
animatePaint.changeAnimationType(animation);42
animatePaint.startAnimation();43
});44
}45
46
if (navigator.userAgent.toLowerCase().match(/mobile/i)) { 47
const touchFcNo = new mdb.Touch(custom_paint_no, 'tap');48
touchFcNo.init();49
custom_paint_no.addEventListener('tap', function ()50
{51
animation = 'fade-out-up'52
animatePaint.stopAnimation();53
animatePaint.changeAnimationType(animation);54
animatePaint.startAnimation();55
setTimeout(function ()56
{57
custom_paint_date.classList.add("d-none");58
custom_paint_label.classList.add("d-none");59
}, 500);60
});61
}else{62
custom_paint_no.addEventListener('focus', function ()63
{64
animation = 'fade-out-up'65
animatePaint.stopAnimation();66
animatePaint.changeAnimationType(animation);67
animatePaint.startAnimation();68
setTimeout(function ()69
{70
custom_paint_date.classList.add("d-none");71
custom_paint_label.classList.add("d-none");72
}, 500);73
});74
}75
76
77
78
79
80
</script>81
Console errors: 0