mate-academy · dtsehelnyk · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,5 +19,11 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
+    - run: npm install
     - run: npm start & sleep 5 && npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ node_modules
 # Generated files
 backstop_data
 dist
+.cache
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # Base layout template with Gulp, SCSS and Stylelint
 1. Create a repo using this template
 1. Replace `<your_account>` and `<repo_name>` with your Github username and the new repo name
-    - [DEMO LINK](https://<your_account>.github.io/<repo_name>/)
+    - [DEMO LINK](https://dtsehelnyk.github.io/gulp-template/)
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@linthtml/linthtml": "^0.3.2",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "0.0.1",
-    "@mate-academy/scripts": "^0.2.0",
+    "@mate-academy/scripts": "^0.7.12",
     "@mate-academy/stylelint-config": "0.0.9",
     "colors": "^1.3.3",
     "eslint": "^5.16.0",

diff --git a/src/images/Cow-head-face_2560x1600.jpg b/src/images/Cow-head-face_2560x1600.jpg
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,37 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Title</title>
+    <title>Bulls and cows</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./styles/main.scss">
   </head>
+
   <body>
-    <h1>Hello Mate Academy</h1>
+    <main class="main">
+      <article class="content">
+        <h1>Bulls and cows</h1>
+
+        <form class="content__form" action="">
+          <input
+            id="input-num"
+            class="content__input"
+            type="number"
+            placeholder="* * * *"
+            required
+          >
+          <button id="check-btn" class="content__button">Check</button>
+        </form>
+
+        <ol
+          id="attempts-list"
+          class="content__list"
+          reversed
+        >
+        </ol>
+      </article>
+    </main>
+
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,59 @@
 'use strict';
+
+const checkBtn = document.querySelector('#check-btn');
+const input = document.querySelector('#input-num');
+const attemptsList = document.querySelector('#attempts-list');
+
+// computed random number
+let randomNum = Math.floor(Math.random() * 10000);
+
+randomNum = randomNum.toString().padStart(4, '0');
+
+// button click
+checkBtn.addEventListener('click', e => {
+  e.preventDefault();
+
+  // fill input value
+  if (input.value.length < 4) {
+    input.value = input.value.padStart(4, '0');
+  } else if (input.value.length > 4) {
+    input.value = input.value.substr(-4, 4);
+  }
+
+  const checkResult = checkMatch(randomNum, input.value);
+
+  if (checkResult.full === 4) {
+    window.alert('Сongratulations!');
+  }
+
+  attemptsList.insertAdjacentHTML('afterbegin', `<li>${input.value} 
+    <span class="green">${checkResult.full}</span> 
+    <span class="yellow">${checkResult.partial}</span></li>`);
+
+  input.value = '';
+  window.console.log(randomNum);
+});
+
+function checkMatch(computedNum, userNum) {
+  let fullMatch = 0;
+  let partialMatch = 0;
+  const result = {};
+
+  for (let i = 0; i < computedNum.length; i++) {
+    if (computedNum[i] === userNum[i]) {
+      fullMatch++;
+    }
+  }
+
+  for (let i = 0; i < computedNum.length; i++) {
+    if (userNum.includes(computedNum[i])) {
+      partialMatch++;
+    }
+  }
+
+  result.full = fullMatch;
+  result.partial = partialMatch - fullMatch;
+  window.console.table(result);
+
+  return result;
+}
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -3,4 +3,5 @@
   src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
+
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,5 +3,91 @@
 @import "typography";
 
 body {
-  background: $c-gray;
+  margin: 0;
+  font-family: "East Sea Dokdo", cursive;
+  background: url(../images/Cow-head-face_2560x1600.jpg) center no-repeat;
+  background-size: cover;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: 5px 5px 5px -5px rgba(60, 60, 60, 0.3) inset;
+  background-color: #ccc;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 4px;
+  box-shadow: 5px 5px 5px -5px rgba(60, 60, 60, 0.3);
+}
+
+h1 {
+  margin: 0;
+  text-align: center;
+  font-size: 64px;
+  font-family: "East Sea Dokdo", cursive;
+}
+
+.main {
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 20px;
+  min-height: 100vh;
+  max-width: 1200px;
+
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  height: 500px;
+  width: 100%;
+  max-width: 400px;
+  overflow-y: auto;
+  background-color: #f5f5f5;
+  border-radius: 10px;
+  box-shadow: 2px 2px 10px 2px rgba($color: #333, $alpha: 0.8);
+
+  &__input {
+    display: block;
+    margin-bottom: 20px;
+    padding: 10px;
+    width: 300px;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 3px;
+    border: 1px solid #333;
+  }
+
+  &__button {
+    display: block;
+    margin: 0 auto;
+    padding: 10px;
+    width: 150px;
+    background-color: #d0d0ff;
+    border-radius: 3px;
+    border: 1px solid #333;
+    @include hover(opacity, 0.7); 
+    cursor: pointer;
+  }
+
+  &__list {
+    padding-left: 0;
+    font-size: 30px;
+  }
+}
+
+.green {
+  margin: 0 30px;
+  color: green;
+}
+
+.yellow {
+  color: orange;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ node_modules @@
     # Generated files
     backstop_data
     dist
+    .cache