diff --git a/ui/static/ui/achievement.css b/ui/static/ui/achievement.css
new file mode 100644
index 0000000..5536e9a
--- /dev/null
+++ b/ui/static/ui/achievement.css
@@ -0,0 +1,29 @@
+.achievement {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ position: absolute;
+}
+
+.achievement-animate {
+ animation-name: moveup;
+ animation-duration: 2s;
+ animation-fill-mode: forwards;
+}
+
+.achievement-text {
+ font-size: 4rem;
+}
+
+@keyframes moveup {
+ from {bottom: 0px;}
+ to {bottom: 200px; color: white;}
+}
+
+@keyframes fadeout {
+ from {}
+ to {color: transparent;}
+}
\ No newline at end of file
diff --git a/ui/static/ui/button.js b/ui/static/ui/button.js
index bbfc0e9..4a6dbe3 100644
--- a/ui/static/ui/button.js
+++ b/ui/static/ui/button.js
@@ -1,6 +1,47 @@
const csrftoken = getCookie('csrftoken');
const button = document.getElementById("BUTTON");
const count = document.getElementById("COUNT");
+const button_container = document.getElementById("button-container");
+const achievement = document.getElementById("achievement");
+
+const achievements = {
+ 1: "Clicked!",
+ 2: "Clicked Twice!",
+ 4: "2^2",
+ 8: "2^3",
+ 16: "2^4",
+ 32: "2^5",
+ 64: "2^6",
+ 69: "Sixty-Nine",
+ 100: "one hundred",
+ 128: "2^7",
+ 200: "two hundred",
+ 250: "quarter thousand",
+ 256: "2^8",
+ 420: "Blaze it",
+ 500: "half thousand",
+ 512: "2^9",
+ 1000: "one thousand",
+ 1024: "2^10",
+ 2048: "2048!",
+ 2500: "Keep going!",
+ 4096: "2^11",
+ 5000: "halfway to ten thousand"
+}
+
+function add_achievement(text) {
+ achievement.querySelector(".achievement-text").innerText = text;
+ achievement.classList.remove("achievement-animate");
+ void achievement.offsetWidth;
+ achievement.classList.add("achievement-animate");
+}
+
+function check_achievement(count) {
+ current_achievement = achievements[Number(count)]
+ if (current_achievement != undefined) {
+ add_achievement(current_achievement)
+ }
+}
// when button is clicked submit an empty post request
button.addEventListener("click", event => {
@@ -18,6 +59,7 @@ button.addEventListener("click", event => {
})
.then((data) => {
count.innerText = data.pressed;
+ check_achievement(data.pressed);
}).finally(() => {
button.disabled = false;
button.classList.remove("is-loading");
diff --git a/ui/templates/ui/button.html b/ui/templates/ui/button.html
index 82056d7..5254704 100644
--- a/ui/templates/ui/button.html
+++ b/ui/templates/ui/button.html
@@ -4,6 +4,7 @@
{% block css %}
+
{% endblock %}
{% block js %}
@@ -13,7 +14,12 @@
{% block body %}