xxxxxxxxxx
1
<!-- 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
xxxxxxxxxx
1
2
3
<script>
4
// Get trigger fields
5
var custom_paint_yes = document.querySelector("#custom_paint_yes");
6
var custom_paint_no = document.querySelector("#custom_paint_no");
7
// fields to reveal
8
var custom_paint_date = document.querySelector("#custom_paint_date");
9
var custom_paint_label = document.querySelector(".custom_paint_label");
10
11
//animation
12
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