Init

2019-05-22 19:41:11 +05:00 · 2019-05-22 19:41:11 +05:00 · e719a67d7d
commit e719a67d7d
3 changed files with 152 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="style.css">
+	<title>Clicker</title>
+</head>
+<body>
+	<div class="wrapper">
+		<div class="clickerForm">
+			<div id="clikerItem">clicker</div>
+			<div class="btn">
+				<button id="btn" class="btn-inner">click</button>
+			</div>
+			<div class="booster">
+				<div id="booster-x1" class="booster-item">x1</div>
+				<div id="booster-x5" class="booster-item">x5</div>
+				<div id="booster-x10" class="booster-item">x10</div>
+			</div>
+			<div id="booster-counter" class="booster-counter">x1</div>
+		</div>
+	</div>
+
+	<script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ 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);
--- a/style.css
+++ 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;
+}