diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfa..340cff5 100644 --- 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 index 0f8d3cf..549c139 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 7fa4acc..f070259 100644 --- 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 `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) + - [DEMO LINK](https://dtsehelnyk.github.io/gulp-template/) diff --git a/package.json b/package.json index b4878db..35f0710 100644 --- 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 new file mode 100644 index 0000000..65ad6c8 Binary files /dev/null and b/src/images/Cow-head-face_2560x1600.jpg differ diff --git a/src/index.html b/src/index.html index 5d357bd..038af5d 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,37 @@ - Title + Bulls and cows + + + -

Hello Mate Academy

+
+
+

Bulls and cows

+ +
+ + +
+ +
    +
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..ce86786 100644 --- 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', `
  • ${input.value} + ${checkResult.full} + ${checkResult.partial}
    • `); + + 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 index 2067b3f..333de9d 100644 --- 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 index 0f8860e..fc9d9c6 100644 --- 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; }