From e719a67d7d412af66fb4f5bba1db469478446abb Mon Sep 17 00:00:00 2001 From: Ivan Zinchenko Date: Wed, 22 May 2019 19:41:11 +0500 Subject: [PATCH] Init --- index.html | 26 +++++++++++++++ main.js | 33 +++++++++++++++++++ style.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..61de6ea --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + Clicker + + +
+
+
clicker
+
+ +
+
+
x1
+
x5
+
x10
+
+
x1
+
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..931adf2 --- /dev/null +++ b/main.js @@ -0,0 +1,33 @@ +var button = document.getElementById("btn"); +var counter = document.getElementById("clikerItem"); +var boosterCounter = document.getElementById("booster-counter"); +var booster1 = document.getElementById("booster-x1"); +var booster5 = document.getElementById("booster-x5"); +var booster10 = document.getElementById("booster-x10"); +var boost = 1; +var point = 0; + +function addPoint(event) { + point += boost; + counter.innerHTML = point; +} + +function boost1(event) { + boost = 1; + boosterCounter.innerHTML = "x" + boost; +} + +function boost5(event) { + boost = 5; + boosterCounter.innerHTML = "x" + boost; +} + +function boost10(event) { + boost = 10; + boosterCounter.innerHTML = "x" + boost; +} + +button.addEventListener("click", addPoint); +booster1.addEventListener("click", boost1); +booster5.addEventListener("click", boost5); +booster10.addEventListener("click", boost10); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9da5220 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +@import url('https://fonts.googleapis.com/css?family=Kodchasan&display=swap'); + +* { + padding: 0; + margin: 0; + font-family: 'Kodchasan', sans-serif; + color: #fff; + box-sizing: border-box; + text-align: center; +} + +::selection { + background: transparent; +} +::-moz-selection { + background: transparent; +} + +body { + overflow: hidden; +} + +.wrapper { + height: 100vh; + display: flex; + background-image: linear-gradient(to bottom, #ff7675, #d63031); + align-items: center; + justify-content: center; +} + +.clickerForm { + min-width: 490px; +} + +#clikerItem { + text-align: center; + font-size: 110px; + margin-bottom: 70px; + text-transform: uppercase; +} + +.btn { + clip-path: circle(50%); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +} + +.btn-inner:hover { + transform: scale(1.1); +} + +.btn-inner { + width: 200px; + height: 200px; + font-size: 50px; + text-align: center; + background-image: linear-gradient(to bottom, #81ecec, #00cec9); + cursor: pointer; + text-transform: uppercase; + clip-path: circle(50%); + border: none; + + transition: transform .2s ease; +} + +.booster { + display: flex; + align-items: center; + justify-content: space-around; + margin-top: 50px; +} + +.booster-item { + background-image: linear-gradient(to bottom, #81ecec, #00cec9); + font-size: 25px; + padding: 10px 20px; + border-radius: 20px; + cursor: pointer; + width: 80px; + + transition: transform .2s ease; +} + +.booster-item:hover { + transform: scale(1.1); +} + +.booster-counter { + margin-top: 10px; + font-size: 20px; +} \ No newline at end of file