</article> </div> </div> </div> <footer class="site-footer"> <div class="wrapper"> <p><span class="copy">©</span> <span>2023,</span> <span class="footer-title">Dumb Struct</span></p> </div> </footer> <script src = "https://cdn.jsdelivr.net/npm/mo-js@latest/build/mo.min.js"> </script> <script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-database.js"></script> <script> var firebaseConfig = { apiKey: "AIzaSyBQFmif4GfnirYysAD78hcD9j0q_fTNPF0", authDomain: "appreciation-widget.firebaseapp.com", databaseURL: "https://appreciation-widget.firebaseio.com", projectId: "appreciation-widget", storageBucket: "appreciation-widget.appspot.com", messagingSenderId: "614176916789", appId: "1:614176916789:web:43eea986d6fa1564" }; var app = firebase.initializeApp(firebaseConfig); console.log("INIT FIREBASE"); console.log(app) var ref = app.database().ref() </script> <script> "use strict"; function addClap() { var clap = document.getElementById('clap'); var clapIcon = document.getElementById('clap--icon'); var clapCount = document.getElementById('clap--count'); var clapTotalCount = document.getElementById('clap--count-total'); var initialNumberOfClaps = generateRandomNumber(500, 10000); var btnDimension = 80; var tlDuration = 300; var numberOfClaps = 0; var clapHold = void 0; var triangleBurst = new mojs.Burst({ parent: clap, radius: { 50: 95 }, count: 5, angle: 30, children: { shape: 'polygon', radius: { 6: 0 }, scale: 1, stroke: 'rgba(211,84,0 ,0.5)', strokeWidth: 2, angle: 210, delay: 30, speed: 0.2, easing: mojs.easing.bezier(0.1, 1, 0.3, 1), duration: tlDuration } }); var circleBurst = new mojs.Burst({ parent: clap, radius: { 50: 75 }, angle: 25, duration: tlDuration, children: { shape: 'circle', fill: 'rgba(149,165,166 ,0.5)', delay: 30, speed: 0.2, radius: { 3: 0 }, easing: mojs.easing.bezier(0.1, 1, 0.3, 1) } }); var countAnimation = new mojs.Html({ el: '#clap--count', isShowStart: false, isShowEnd: true, y: { 0: -30 }, opacity: { 0: 1 }, duration: tlDuration }).then({ opacity: { 1: 0 }, y: -80, delay: tlDuration / 2 }); var countTotalAnimation = new mojs.Html({ el: '#clap--count-total', isShowStart: false, isShowEnd: true, opacity: { 0: 1 }, delay: 3 * tlDuration / 2, duration: tlDuration, y: { 0: -3 } }); var scaleButton = new mojs.Html({ el: '#clap', duration: tlDuration, scale: { 1.3: 1 }, easing: mojs.easing.out }); clap.style.transform = "scale(1, 1)"; var animationTimeline = new mojs.Timeline(); animationTimeline.add([triangleBurst, circleBurst, countAnimation, countTotalAnimation, scaleButton]); clap.addEventListener('click', function() { repeatClapping(); }); clap.addEventListener('mousedown', function() { clapHold = setInterval(function() { repeatClapping(); }, 400); }); clap.addEventListener('mouseup', function() { clearInterval(clapHold); }); function repeatClapping() { updateNumberOfClaps(); animationTimeline.replay(); clapIcon.classList.add('checked'); } function updateNumberOfClaps() { numberOfClaps < 50 ? numberOfClaps++ : null; clapCount.innerHTML = "+" + numberOfClaps; clapTotalCount.innerHTML = initialNumberOfClaps + numberOfClaps; var ref = firebase.database().ref('urls/a'); ref.transaction(function(count) { return (count || 0) + 1; }); } function generateRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } } addClap(); </script> </body> </html>
