diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/backstop_data/engine_scripts/cookies.json b/backstop_data/engine_scripts/cookies.json deleted file mode 100644 index b59400d7e..000000000 --- a/backstop_data/engine_scripts/cookies.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - { - "domain": ".www.yourdomain.com", - "path": "/", - "name": "yourCookieName", - "value": "yourCookieValue", - "expirationDate": 1798790400, - "hostOnly": false, - "httpOnly": false, - "secure": false, - "session": false, - "sameSite": "no_restriction" - } -] diff --git a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js b/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js deleted file mode 100644 index 6c1e1b884..000000000 --- a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js +++ /dev/null @@ -1,39 +0,0 @@ -module.exports = async (page, scenario) => { - var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector; - var clickSelector = scenario.clickSelectors || scenario.clickSelector; - var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector; - var scrollToSelector = scenario.scrollToSelector; - var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int] - - if (keyPressSelector) { - for (const keyPressSelectorItem of [].concat(keyPressSelector)) { - await page.waitForSelector(keyPressSelectorItem.selector); - await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress); - } - } - - if (hoverSelector) { - for (const hoverSelectorIndex of [].concat(hoverSelector)) { - await page.waitForSelector(hoverSelectorIndex); - await page.hover(hoverSelectorIndex); - } - } - - if (clickSelector) { - for (const clickSelectorIndex of [].concat(clickSelector)) { - await page.waitForSelector(clickSelectorIndex); - await page.click(clickSelectorIndex); - } - } - - if (postInteractionWait) { - await new Promise(resolve => setTimeout(resolve, postInteractionWait)); - } - - if (scrollToSelector) { - await page.waitForSelector(scrollToSelector); - await page.evaluate(scrollToSelector => { - document.querySelector(scrollToSelector).scrollIntoView(); - }, scrollToSelector); - } -}; diff --git a/backstop_data/engine_scripts/puppet/loadCookies.js b/backstop_data/engine_scripts/puppet/loadCookies.js deleted file mode 100644 index 11070c632..000000000 --- a/backstop_data/engine_scripts/puppet/loadCookies.js +++ /dev/null @@ -1,32 +0,0 @@ -let fs = require('fs'); - -module.exports = async (page, scenario) => { - let cookies = []; - let cookiePath = scenario.cookiePath; - - // READ COOKIES FROM FILE IF EXISTS - if (fs.existsSync(cookiePath)) { - cookies = JSON.parse(fs.readFileSync(cookiePath)); - } - - // MUNGE COOKIE DOMAIN - cookies = cookies.map(cookie => { - cookie.url = 'https://' + cookie.domain; - delete cookie.domain; - - return cookie; - }); - - // SET COOKIES - const setCookies = async () => { - return Promise.all( - cookies.map(async (cookie) => { - await page.setCookie(cookie); - }) - ); - }; - - await setCookies(); - - console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2)); -}; diff --git a/backstop_data/engine_scripts/puppet/onBefore.js b/backstop_data/engine_scripts/puppet/onBefore.js deleted file mode 100644 index a1c374c37..000000000 --- a/backstop_data/engine_scripts/puppet/onBefore.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = async (page, scenario, vp) => { - await require('./loadCookies')(page, scenario); -}; diff --git a/backstop_data/engine_scripts/puppet/onReady.js b/backstop_data/engine_scripts/puppet/onReady.js deleted file mode 100644 index 2c65b2bad..000000000 --- a/backstop_data/engine_scripts/puppet/onReady.js +++ /dev/null @@ -1,24 +0,0 @@ -module.exports = async (page, scenario, vp) => { - console.log('SCENARIO > ' + scenario.label); - await require('./clickAndHoverHelper')(page, scenario); - - const { - postDOMChangeWait = 0, - } = scenario; - - await page.waitForSelector('.stopwatch'); - - await page.evaluate(() => { - const calendarElement = document.querySelector('.stopwatch'); - const isAlreadySpeedUp = calendarElement.classList.contains('stopwatch--speed-up'); - - if (isAlreadySpeedUp) { - return; - } - - calendarElement.classList.add('stopwatch--speed-up'); - }); - - await page.waitForSelector('.stopwatch--speed-up'); - await new Promise(resolve => setTimeout(resolve, postDOMChangeWait)); -}; diff --git a/package-lock.json b/package-lock.json index 211b7ce4a..6d8d464c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", @@ -1230,10 +1230,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 5b13ea006..cc8982744 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", diff --git a/readme.md b/readme.md index b55608052..69e30cf13 100644 --- a/readme.md +++ b/readme.md @@ -32,11 +32,11 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ## Checklist ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stop-watch/) +- [DEMO LINK](https://.github.io/layout_stop-watch/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. -- [ ] Keyframes implemented using from/to + transform with rotate property -- [ ] Stopwatch is centered and has the correct arrows size -- [ ] All `Typical Mistakes` from the `BEM` lesson theory are checked. -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] Keyframes implemented using from/to + transform with rotate property +- [x] Stopwatch is centered and has the correct arrows size +- [x] All `Typical Mistakes` from the `BEM` lesson theory are checked. +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 272a19648..8cf7ce87d 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,10 @@ /> -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..38ae93e29 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,65 @@ body { margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.stopwatch { + height: 80vmin; + width: 80vmin; + border-radius: 50%; + border: 1vmin dotted #000; + + display: flex; + justify-content: center; + align-items: center; + + &__circle { + border-radius: 50%; + height: 5vmin; + width: 5vmin; + background-color: #f6a603; + position: relative; + } + + &__minutes { + height: 20vmin; + width: 3vmin; + background-color: #0700ff; + position: absolute; + bottom: 50%; + + animation: minut 3600s steps(60, end) infinite; + transform-origin: bottom center; + + &--speed-up { + animation-duration: 600s; + } + } + + &__second { + height: 38vmin; + width: 1.5vmin; + background-color: #2c8000; + position: absolute; + bottom: 50%; + + animation: minut 60s linear infinite; + transform-origin: bottom center; + + &--speed-up { + animation-duration: 10s; + } + } +} + +@keyframes minut { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } }