click-game added

zonayedpca · zonayedpca · commit 97d34c1ec29e · 2018-10-13T20:31:00.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Simple Click Game</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="points">
+        <p class="stats">0</p>
+      </div>
+      <div class="btns">
+        <button type="button" name="start">Start</button>
+        <button type="button" name="click" disabled="true">Click</button>
+      </div>
+      <div class="copyright">
+        <ul>
+          <li>হাতেকলমে জাভাস্ক্রিপ্ট</li>
+          <li><a href="https://www.zonayed.me">জুনায়েদ আহমেদ</a></li>
+        </ul>
+      </div>
+    </div>
+    <script src="script.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/script-solved.js b/script-solved.js
@@ -0,0 +1,68 @@
+// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন
+const stats = document.querySelector('.stats');
+const btnStart = document.querySelector('button[name=start]');
+const btnClick = document.querySelector('button[name=click]');
+
+// ডিফল্ট উইন স্কোর সেট করুন
+const winScore = 10;
+
+// একটা কাউন্ট ভ্যারিয়েবল সেট করুন
+let count = 0;
+
+// স্টার্ট বাটনে ক্লিক ইভেন্ট লাগান
+btnStart.addEventListener('click', () => {
+  // ক্লিক করলেই গেইম শুরু হওয়ার ফাংশন চলবে
+  start();
+});
+
+// ক্লিক বাটনে ক্লিক ইভেন্ট লাগান
+btnClick.addEventListener('click', () => {
+  // ক্লিক করলেই কাউন্ট এক করে বাড়বে
+  count++;
+  // কাউন্টটা শো করান
+  stats.textContent = count;
+});
+
+// গেইম শুরু করার ফাংশন
+const start = () => {
+  // কাউন্ট জিরোতে সেট হবে
+  count = 0;
+
+  // কাউন্টের টেক্সটাও জিরোতে সেট হবে
+  stats.textContent = count;
+
+  // ক্লিক বাটন থেকে ডিসাবল্ড অবস্থা সরিয়ে ফেলা
+  btnClick.removeAttribute('disabled');
+
+  // কাউন্ট শুরু করা
+  startCounting();
+}
+
+// কাউন্ট শুরু করার ফাংশন
+const startCounting = () => {
+  // সেট টাইম আউট ফাংশন, ২ সেকেন্ড এর জন্যে অপেক্ষা করবে
+  setTimeout(() => {
+    // উইন হয়েছে কিনা দেখার জন্যে
+    if(isWin()) {
+      // উইন হলে উইনের টেক্সট দেখানো
+      stats.textContent = 'You Won!';
+    } else {
+      // উইন না হলে উইন হয়নি সে টেক্সট দেখানো
+      stats.textContent = 'You Lost!';
+    }
+    // উইন হয়ে গেলে ক্লিক বাটন ডিসাবল করে ফেলা
+    btnClick.setAttribute('disabled', true);
+  }, 2000);
+}
+
+// উইন হয়েছে কিনা চেক করুন
+const isWin = () => {
+  // স্কোর চেক করা
+  if(count < winScore) {
+    // কাউন্ট উইনস্কোর থেকে ছোটো হলে উইন হয়নি
+    return false;
+  } else {
+    // কাউন্ট উইনস্কোর থেকে বড় হলে উইন হয়েছে
+    return true;
+  }
+}
diff --git a/script.js b/script.js
@@ -0,0 +1 @@
+// Write your code here
diff --git a/style.css b/style.css
@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+body {
+  height: 100vh;
+  width: 100%;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  background: #8E2DE2;
+  background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
+  background: linear-gradient(to right, #4A00E0, #8E2DE2);
+}
+
+body>div {
+  flex: 1;
+}
+
+button {
+  border: none;
+  font-weight: 900;
+  padding: 10px 25px;
+  text-transform: uppercase;
+  font-size: 18px;
+  margin: 0 5px;
+  border-radius: 40px;
+}
+
+.points {
+  margin-bottom: 25px;
+}
+
+.points .stats {
+  font-size: 108px;
+  font-weight: bold;
+  color: #FFEB3B;
+}
+
+button[name=start] {
+  background-color: #4caf50;
+  color: #fff;
+}
+
+button[name=click] {
+  background-color: #F44336;
+  color: #fff;
+}
+
+button[disabled] {
+  background-color: #9E9E9E;
+  cursor: not-allowed;
+}
+
+.copyright {
+  margin-top: 45px;
+  color: #fff;
+}
+
+.copyright ul {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+}
+
+.copyright ul li {
+  display: inline-block;
+  margin: 0 5px;
+  font-weight: 900;
+  font-size: 13px;
+}
+
+.copyright ul li a {
+  text-decoration: none;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: #fff;
+}
