First Attempt:
After implementing My code pen on a page, I encountered a blank screen. I then created a separate JS sheet for my sober child theme and tested it with an alert which worked fine. However, when I tried to implement the desired JS code, nothing happened.
Second Attempt:
For my second try, I included all JS and HTML elements as RAW from wp-bakery, but still, nothing happened.
What steps should I take to ensure that this code functions properly?
$('.window').draggable();
$('.icon').draggable();
$('.cancel, .close').on('click', function(e){
e.preventDefault();
$('.window').hide();
});
$('.ok').on('click', function(e){
e.preventDefault();
$('.overlay').toggleClass('on');
$('.power-button').fadeIn();
});
$('.start-btn').on('click', function(e){
e.preventDefault();
$(this).toggleClass('active');
$('.start-menu').toggleClass('open');
});
$('.windows-update').on('click', function(){
$('.overlay').addClass('on');
$('.start-menu').removeClass('open');
$('.start-btn').removeClass('active');
$('.window').hide();
$('.power-button').hide();
setTimeout(function(){
$('.desktop').addClass('windowsXP');
$('.overlay').removeClass('on');
}, 3000);
});
$('.turn-on-computer').on('click', function(){
$('.power-button').addClass('on');
$('.window').hide();
$('.start-menu').removeClass('open');
$('.start-btn').removeClass('active');
setTimeout(function(){
$('.power-button').removeClass('on');
$('.power-button').fadeOut();
}, 2000);
setTimeout(function(){
$('.overlay').removeClass('on');
}, 3000);
});