{"id":20886871,"url":"https://github.com/barkode/tapandplay","last_synced_at":"2026-04-29T04:08:27.669Z","repository":{"id":247069430,"uuid":"822555061","full_name":"barkode/TapAndPlay","owner":"barkode","description":"Learning JS. BlackJack game","archived":false,"fork":false,"pushed_at":"2024-07-12T05:47:59.000Z","size":16688,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-31T20:16:53.712Z","etag":null,"topics":["css3","html-css-javascript","html5","javascript"],"latest_commit_sha":null,"homepage":"https://barkode.github.io/TapAndPlay/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/barkode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-01T11:16:42.000Z","updated_at":"2024-07-12T05:49:32.000Z","dependencies_parsed_at":"2024-07-06T12:26:29.259Z","dependency_job_id":"d847ffe4-c3b1-40b9-8390-b047267fee9f","html_url":"https://github.com/barkode/TapAndPlay","commit_stats":null,"previous_names":["barkode/tapandplay"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/barkode/TapAndPlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2FTapAndPlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2FTapAndPlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2FTapAndPlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2FTapAndPlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barkode","download_url":"https://codeload.github.com/barkode/TapAndPlay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2FTapAndPlay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32410017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T03:46:11.172Z","status":"ssl_error","status_checked_at":"2026-04-29T03:37:55.317Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html-css-javascript","html5","javascript"],"created_at":"2024-11-18T08:18:20.252Z","updated_at":"2026-04-29T04:08:27.652Z","avatar_url":"https://github.com/barkode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tap\u0026Play\n\n## Introduction\n\nWelcome screen responsive view\n\n![Tap\u0026Play responsive view](./assets/docs/is-responsive-welcome.png)\n\nResponsive view after a player enter them name\n\n![Tap\u0026Play responsive view](./assets/docs/is-responsive-after-authorization.png)\n\nA site with an online game Blatsk Yatsk. For ease of use, the site is designed\ntaking into account the screen sizes of most devices.\n\nYou can [visit our site here.](https://barkode.github.io/TapAndPlay/)\n\n## Content\n\n- [User Experience](#user-experience-ux)\n  - [User Stories](#user-stories)\n- [Design](#design)\n  - [Website Structure](#website-structure)\n  - [Wireframes](#wireframes)\n  - [Color Scheme](#color-scheme)\n  - [Typography](#typography)\n  - [Media Content](#imagery)\n  - [Accessibility](#accessibility)\n- [Features](#features)\n  - [Favicon](#favicon)\n  - [Welcome Screen](#welcome-screen)\n  - [Main Page](#main-page)\n    - [Logo](#logo)\n    - [Statistic](#statistic-module)\n    - [Clock Module](#clock-module)\n    - [Buttons Module](#buttons-module)\n    - [Local Storage](#local-storage)\n    - [Clear All Data Module](#clear-all-data-module)\n  - [Footer](#footer)\n  - [Error Page](#error-page)\n- [Technologies and Media](#technologies-used)\n- [Deployment](#deployment)\n  - [Deployment to Github Pages](#github-pages)\n  - [Fork Repository](#forking-the-github-repository)\n  - [Clone Repository](#making-a-local-clone)\n- [Testing](#testing)\n  - [Testing User Stories](#testing-user-stories)\n  - [HTML Validation](#html-validation)\n  - [CSS Validation](#css-validation)\n  - [JS Validation](#js-validation)\n  - [Lighthouse Performance Tests](#lighthouse-performance-tests)\n    - [Desktop](#desktop)\n    - [Mobile](#mobile)\n  - [Manual Testing](#manual-testing)\n- [Future Improvements](#future-improvements)\n- [Credits](#credits)\n  - [Code \u0026 Content](#code--content)\n  - [Media](#media)\n  - [Acknowledgment](#acknowledgment)\n\n## User Experience (UX)\n\n### User stories\n\n1. As a user, I want to be able to easily understand the rules of Blackjack so\n   that I can start playing quickly. Acceptance Criteria:\n\n- Clear and concise instructions are available on the main menu or accessible\n  within the game.\n- Instructions include the objective of the game, card values, and basic\n  gameplay mechanics.\n\n2. As a user, I want to be able to start a new game of Blackjack easily.\n\nAcceptance Criteria:\n\n- A prominent \"Start Game\" button is available on the main page.\n- Upon starting, the game initializes with a shuffled deck and deals the initial\n  cards.\n\n3. As a user, I want to be able to see my current hand and the dealer’s visible\n   card so that I can make informed decisions.\n\nAcceptance Criteria:\n\n- The user’s hand is displayed clearly on the screen.\n- The dealer’s visible card is shown, with the other card face-down.\n\n4. As a user, I want to have options to 'Hit', 'Stand', or 'Rules' during my\n   turn so that I can play the game strategically.\n\nAcceptance Criteria:\n\n- Buttons for 'Hit', 'Stand', and 'Info' are available and functional.\n\n- The game provides feedback for each action.\n\n5. As a user, I want to see the outcome of each round and understand why I won\n   or lost so that I can learn and improve my strategy.\n\nAcceptance Criteria:\n\n- The game displays the outcome of each round (win, lose).\n- A brief explanation is provided.\n\n6. As a user, I want to be able to track my winnings and losses so that I can\n   manage my betting strategy.\n\nAcceptance Criteria:\n\n- A summary of wins and losses is available, either per game or session.\n\n7. As a user, I want the game interface to be visually appealing and intuitive\n   so that I can have an enjoyable gaming experience.\n\nAcceptance Criteria:\n\n- The game has a clean, user-friendly interface with attractive graphics.\n- The layout is intuitive, with clear buttons and easily readable text.\n\n8. As a user, I want to be able to read the rules of the game.\n\nAcceptance Criteria:\n\n- On the main page there is a button that shows the game rules page.\n\n9. As a user I want to be able to delete all stats and title.\n\nAcceptance Criteria:\n\n- There is a button on the site that deletes all statistics and the username.\n\n- After deleting the statistics and username, you will be redirected to the\n  welcome page.\n\n10. As a user, after entering a name, I want the site to remember my name and\n    game statistics.\n\nAcceptance Criteria:\n\n- After entering the name, the username should be displayed in the statistics.\n\n- At the next login to the site, the user gets to the main screen with the game\n  instead of the welcome screen.\n- The next time you log in to the site, you will see your game statistics and\n  your name on the main screen.\n\n  [Back to top](#content)\n\n## Design\n\nThe design of the game is made in a classic style. The site is built on the\nprinciples of simplicity and functionality. Time was also devoted to creating a\nconcise design and ease of use of the game.\n\n[Back to top](#content)\n\n### Website structure\n\nThe site consists of 2 pages.\n\n- A welcome window greets the user. The user is asked to enter his name and\n  confirm that he is already 18 years old.\n\n- The main page displays the main logo and the game field. Statistics are\n  located in the upper left corner. At the top and in the center is the clock.\n  There are 4 buttons below.\n\n- The start button is responsible for starting the game. The player and the\n  dealer are dealt 2 cards each and the game begins.\n\n- The kick and stand buttons control the game. Pressing the button adds another\n  card to the player. The stand button informs the player that no more cards are\n  needed. Now the dealer takes the cards.\n\n- The rules button displays the rules of the game. At the very bottom of the\n  rules window there is a button that allows you to forget all data (username\n  and game statistics).\n\n- The second page is a 404 error page. This page is displayed if the user wants\n  to open a page that does not exist.\n\n[Back to top](#content)\n\n### Wireframes\n\nBalsamiq was used to create the wireframes during the design process\n\n![Balsamiq welcome screen](./assets/docs/Welcome%20page.png)\n\n![Balsamiq main screen](./assets/docs/Main%20page.png)\n\n![Balsamiq rules screen](./assets/docs/Rules%20screen.png)\n\n[Back to top](#content)\n\n### Color Scheme\n\n![Project used colors](./assets/docs/colors.png)\n\nI was inspired by\n[uzaymacar github](https://github.com/uzaymacar/blackjack-with-gui/blob/master/README.md)\n\n[Back to top](#content)\n\n### Typography\n\nGeometric sans serif typefaces have always been popular, and with support for\nboth the Devanagari and Latin writing systems, BioRhyme is an internationalist\naddition to the genre. Many of the Latin glyphs (such as the ampersand) are more\nconstructed and rationalist than is typical. The font family\n'[BioRhyme](https://fonts.google.com/specimen/BioRhyme?query=BioRhyme)' was\ndownloaded and used from Google Fonts, as it provides an easy-on-the-eye font.\nThis font was used for all text across the website.\n\n![BioRhyme font](./assets/docs/fonts.png)\n![BioRhyme font](./assets/docs/fonts-1.png)\n\n[Back to top](#content)\n\n### Imagery\n\nAll images were downloaded from free resources. Pictures for the site were\ndownloaded from such resources as [Pixels](https://www.pexels.com/),\n[Pixabay](https://pixabay.com/) and [Unsplash](https://unsplash.com/).\n\nIcons for the project were found on [FontAwesome](https://fontawesome.com/) and\n[FLATICON](https://www.flaticon.com/).\n\nAll image sizes were edited using [squoosh](https://squoosh.app/).\n\n[Back to top](#content)\n\n### Accessibility\n\nThe following has been done to ensure that the website is as accessible friendly\nas possible.\n\n- Using semantic HTML.\n- Using descriptive alt attributes on images on the site.\n- Ensuring that there is a sufficient color contrast throughout the site.\n\n[Back to top](#content)\n\n## Technologies Used\n\n### Languages Used\n\n- HTML5 - used to write structure and foundation of code for website.\n- CSS3 - used for styling all content and page structure on site.\n- Git - used to track code changes and as a version control system.\n- JavaScript - JavaScript was used as the main programming language to ensure\n  the site's interactivity. The logic of the game is also written in JavaScript.\n- VSCOde - used as a main IDE.\n\n[Back to top](#content)\n\n### Frameworks, Libraries \u0026 Programs Used\n\n- [Google fonts](https://fonts.google.com/knowledge) and\n  [google webfonts helper](https://gwfh.mranftl.com/fonts)\n\n  Google fonts and google webfonts helper were used to integrate the 'Poppins'\n  font into the style.css file which is used on all pages throughout the project\n\n- [Font Awesome](https://fontawesome.com/)\n\n  Font Awesome was used on all pages throughout the website to add icons for\n  aesthetic and UX purposes.\n\n- [Git](https://gitpod.io/)\n\n  Git was used for version control by utilizing the Gitpod terminal to commit to\n  Git and Push to GitHub.\n\n- [GitHub](https://github.com/)\n\n  GitHub is used to store the projects code after being pushed from Git.\n\n- [Balsamiq](https://balsamiq.com/wireframes/)\n\n  Balsamiq was used to create [wireframes](#wireframes) for website.\n\n- [Figma](https://www.figma.com/community)\n\n  Figma was used to find inspiration.\n\n- [Visual Studio Code](https://code.visualstudio.com/)\n\n  Used Visual Studio Code as a main IDE.\n\n[Back to top](#content)\n\n## Features\n\nThe site contains 2 pages. All pages have a favicon, title, green background.\n\n### Favicon\n\n![Tap\u0026Play favicon image](./assets/docs/favicon.png)\n\nAn icon suitable for the subject was found on the\n[FlatIcon](https://www.flaticon.com/free-icon/numerology_9288700?term=numerology\u0026page=1\u0026position=4\u0026origin=search\u0026related_id=9288700)\nresource.\n\n[Back to top](#content)\n\n### Welcome Screen\n\n![Tap\u0026Play Welcome screen image](./assets/docs/welcome-screen-desk.png)\n\nOn the welcome screen, you can enter the player's name and confirm that they are\n18 years or older.\n\nWelcome screen on tablet\n\n![Tap\u0026Play Welcome screen image tablet](./assets/docs/welcome-screen-tabl.png)\n\nWelcome screen on mobile\n\n![Tap\u0026Play Welcome screen image mobile](./assets/docs/welcome-screen-mobi.png)\n\n[Back to top](#content)\n\n### Main Page\n\n![Tap\u0026Play Main Page image](./assets/docs/main-page-desk.png)\n![Tap\u0026Play Main Page image](./assets/docs/main-page-1-desk.png)\n\nThe site was developed taking into account the requirements for adaptability.\nGames look good on both desktop and mobile devices.\n\n![Tap\u0026Play Main Page image](./assets/docs/main-page-tabl.png)\n\n![Tap\u0026Play Main Page image](./assets/docs/main-page-mobi.png)\n\n[Back to top](#content)\n\n### Logo\n\n![Tap\u0026Play Logo image](./assets/docs/bg-logo.png)\n\nThe logo was created in Figma. The images was downloaded from\n[Pixabay](https://pixabay.com/vectors/joker-clown-medieval-jester-6770391/)\n\nThe image was chenged in [Figma App](https://www.figma.com/) The logo has a\ntransparent background.\n\n[Back to top](#content)\n\n### Statistic Module\n\n![Statistic module image](./assets/docs/statistic-desk.png)\n\nThe statistics module was written. It displays player and dealer win statistics.\nLocal storage was used to store statistics.\n![Statistic module image](./assets/docs/statistic-tabl.png)\n\nThe statistics module was developed taking into account the principles of\nadaptive layout.\n\n![Statistic module image](./assets/docs/statistic-mobi.png)\n\n[Back to top](#content)\n\n### Clock Module\n\nThe clock module has been designed and developed for user convenience. It is\nlocated at the top of the site in the center.\n\n![clock module image](./assets/docs/statistic-desk.png)\n\nLike other modules, the clock module is designed with different user screen\nwidths in mind.\n\n![Clock module image](./assets/docs/statistic-tabl.png)\n\n![Clock module image](./assets/docs/statistic-mobi.png)\n\n[Back to top](#content)\n\n### Buttons Module\n\nThe button module makes the buttons invisible depending on the stage of the\ngame. At the very beginning, only the start and rls buttons are closed. After\nthe game starts, the start button becomes inactive, and the kick and stand\nbuttons become active.\n\n![Buttons module image](./assets/docs/btn-desk.png)\n\nOn mobile\n\n![Buttons module image](./assets/docs/btn-mobi.png)\n\nButton start active\n\n![Buttons module image](./assets/docs/buttons-1-start.png)\n\nButton start inactive\n\n![Buttons module image](./assets/docs/buttons-2-deal-cards.png)\n\n[Back to top](#content)\n\n### Local Storage\n\nThe module was designed to store username and game statistics in local storage.\nDuring the first visit, the user's name is written to the local memory, after\nthat the user is not shown the welcome screen\n\n![Clear all data module image](./assets/docs/read-rules.png)\n\n[Back to top](#content)\n\n### Clear All Data Module\n\nThe module was designed for user convenience. The button is located at the\nbottom of the rules window. When you press the button, all game data and user\nname will be deleted.\n\n![Clear all data module image](./assets/docs/read-rules.png)\n\n[Back to top](#content)\n\n### Footer\n\n![Tap\u0026Play Footer image](./assets/docs/footer-desk.png)\n\nThe footer is designed taking into account the requirements for adaptability.\nGames look good on both desktop and mobile devices.\n\n![Tap\u0026Play Footer image](./assets/docs/footer-tabl.png)\n\nThe link in the footer leads to the game code page.\n\n![Tap\u0026Play Footer image](./assets/docs/footer-mobi.png)\n\n[Back to top](#content)\n\n### Error page\n\n![Error Page](./assets/docs/error-page.png)\n\nAn error page notifies the user of an error. Also, the user can return to the\nmain page. The page is also made taking into account different device widths.\n\n[Back to top](#content)\n\n## Testing\n\n### Testing user stories\n\n**User Story 1:** Understand Rules of Blackjack\n\n**Acceptance Criteria:**\n\nClear and concise instructions available on the main menu or accessible within\nthe game. Instructions include the objective of the game, card values, and basic\ngameplay mechanics.\n\n**Testing:**\n\nMain Menu: Navigated to the main menu and found a clearly labeled \"Rules\" or\n\"Instructions\" button.\n\nInstructions: Clicked on the \"Rules\" button and verified that the instructions\nwere clear, concise, and covered the objective of the game, card values, and\nbasic gameplay mechanics.\n\nResult: **Pass**\n\n**User Story 2:** Start a New Game of Blackjack\n\n**Acceptance Criteria:**\n\nA prominent \"Start Game\" button is available on the main page. Upon starting,\nthe game initializes with a shuffled deck and deals the initial cards.\n\n**Testing:**\n\nStart Button: Located a prominently displayed \"Start Game\" button on the main\npage. Game Initialization: Clicked the \"Start Game\" button and confirmed that\nthe game initialized with a shuffled deck and dealt the initial cards to both\nthe player and the dealer.\n\nResult: **Pass**\n\n**User Story 3:** See Current Hand and Dealer’s Visible Card\n\n**Acceptance Criteria:**\n\nThe user’s hand is displayed clearly on the screen. The dealer’s visible card is\nshown, with the other card face-down.\n\n**Testing:**\n\nUser’s Hand: Verified that the user’s hand was clearly displayed on the screen.\nDealer’s Card: Confirmed that the dealer’s visible card was shown with the\nsecond card face-down.\n\nResult: **Pass**\n\n**User Story 4:** Options to 'Hit', 'Stand', or 'Rules'\n\n**Acceptance Criteria:**\n\nButtons for 'Hit', 'Stand', and 'Info' are available and functional. The game\nprovides feedback for each action.\n\n**Testing:**\n\nButtons Availability: Ensured that 'Hit', 'Stand', and 'Info' buttons were\npresent and clearly labeled. Functionality: Tested each button to confirm they\nperformed the correct actions and provided appropriate feedback.\n\nResult: **Pass**\n\n**User Story 5:** Outcome of Each Round\n\n**Acceptance Criteria:**\n\nThe game displays the outcome of each round (win, lose). A brief explanation is\nprovided.\n\n**Testing:**\n\nRound Outcome: Played a few rounds and verified that the game displayed the\noutcome (win, lose) after each round. Explanation: Confirmed that a brief\nexplanation of the outcome was provided.\n\nResult: **Pass**\n\n**User Story 6:** Track Winnings and Losses\n\n**Acceptance Criteria:**\n\nA summary of wins and losses is available, either per game or session.\n\n**Testing:**\n\nSummary Display: Checked the interface for a summary of wins and losses.\nAccurate Tracking: Verified that the summary accurately tracked the results of\nmultiple games or sessions.\n\nResult: **Pass**\n\n**User Story 7:** Visually Appealing and Intuitive Interface\n\n**Acceptance Criteria:**\n\nThe game has a clean, user-friendly interface with attractive graphics. The\nlayout is intuitive, with clear buttons and easily readable text.\n\n**Testing:**\n\nVisual Appeal: Evaluated the game’s graphics and overall aesthetic appeal.\nUser-Friendly: Assessed the intuitiveness of the layout, button placement, and\nreadability of the text.\n\nResult: **Pass**\n\n**User Story 8:** Read the Rules\n\n**Acceptance Criteria:**\n\nOn the main page, there is a button that shows the game rules page.\n\n**Testing:**\n\nRules Button: Located the button on the main page that leads to the game rules.\nAccessing Rules: Clicked the button and verified that it navigated to the game\nrules page.\n\nResult: **Pass**\n\n**User Story 9:** Delete All Stats and Title\n\n**Acceptance Criteria:**\n\nThere is a button on the site that deletes all statistics and the username.\nAfter deleting the statistics and username, you will be redirected to the\nwelcome page.\n\n**Testing:**\n\nDelete Button: Found the button for deleting all statistics and the username.\nFunctionality: Clicked the button and confirmed that it deleted the statistics\nand username, then redirected to the welcome page.\n\nResult: **Pass**\n\n**User Story 10:** Remember Name and Game Statistics\n\n**Acceptance Criteria:**\n\nAfter entering the name, the username should be displayed in the statistics. At\nthe next login to the site, the user gets to the main screen with the game\ninstead of the welcome screen. The next time you log in to the site, you will\nsee your game statistics and your name on the main screen.\n\n**Testing:**\n\nName Display: Entered a name and verified that it was displayed in the\nstatistics. Remembering Data: Logged out and back in to confirm that the site\nremembered the username and statistics, and navigated directly to the main game\nscreen.\n\nResult: **Pass**\n\n[Back to top](#content)\n\n### HTML Validation\n\n![HTML Validator OK](./assets/docs/w3c-html-validator.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n### CSS Validation\n\n![CSS Validator](./assets/docs/w3c-validation.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n[Back to top](#content)\n\n### JS Validation\n\n![JS Validator](./assets/docs/indexjs-jshint.png)\n\nJSHint validator. Index.js\n\n![JS Validator](./assets/docs/uijs-jshint.png)\n\nJSHint validator. UI.js\n\n![JS Validator](./assets/docs/utilsjs-jshint.png)\n\nJSHint validator. Utils.js\n\n![JS Validator](./assets/docs/gameCountsjs-jshint.png)\n\nJSHint validator. GameCounts.js\n\n[Back to top](#content)\n\n### Lighthouse Performance Tests\n\n#### Desktop\n\n![Index Page Lighthouse image](./assets/docs/lh-desk-index.png)\n\n![Index Page Lighthouse image](./assets/docs/lh-desk-entered.png)\n\n[Back to top](#content)\n\n#### Mobile\n\n![Index Page Lighthouse](./assets/docs/lh-mobi-index.png)\n\n![Index Page Lighthouse](./assets/docs/lh-mobi-entered.png)\n\n[Back to top](#content)\n\n### Manual Testing\n\n| Test                                                    | Steps                                                   | Expected                                                       | Actual      |\n| ------------------------------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------- | ----------- |\n| Enter Player name without click checkbox                | Enter player name and do not click checkbox             | Enter warning message                                          | As expected |\n| Disabled button on welcome screen                       | Try to click button \"Lets Play\"                         | Button is inactive                                             | As expected |\n| Form shows warning message when user doesn't enter name | click lets play button                                  | shows warning message                                          | As expected |\n| Don't show welcome screen after user enter name         | refresh the page                                        | user enter to main page                                        | As expected |\n| The clock shows current time                            | enter to main page                                      | The clock shows current time                                   | As expected |\n| The player name saves in local storage                  | Enter name on welcome screen. Refresh page              | User name shows in statistic corner                            | As expected |\n| Hit and Stand buttons disabled                          | enter to main page                                      | Hit and stand buttons are disabled                             | As expected |\n| The game starts                                         | Enter to main page and click start button               | 2 cards will be dealt                                          | As expected |\n| Hit Button                                              | click hit button                                        | the player will be dealt one card                              | As expected |\n| Stand button                                            | Click stand button                                      | the dealer will be dealt several cards                         | As expected |\n| Rules button                                            | click rules button                                      | displays screen with rules                                     | As expected |\n| Clear all statistic data button                         | click rules button after click clear all statistic data | delete all info from local storage. Redirect to welcome screen | As expected |\n| Save statistic                                          | play several games. Refresh the page                    | saved statistics in the statistics module will be shown.       | As expected |\n| Show win-lose message                                   | Play several games                                      | show modal window with name who win                            | As expected |\n\n#### Testing form validation\n\n- Form button not active\n\n![Form button not active image](./assets/docs/form-1-button-not-active.png)\n\n- Input field on focus\n\n![Form button not active image](./assets/docs/form-2-button-not-active.png)\n\n- The Player writes they name\n\n![Form button not active image](./assets/docs/form-3-Player-enter-name.png)\n\n- The Player does't click checkbox\n\n![Form button not active image](./assets/docs/Form-4-not-confirm-age.png)\n\n- The Player delete they name and tray to confirm form.\n\n![Form button not active image](./assets/docs/form-5-not-enter-name.png)\n\n[Back to top](#content)\n\n### Further Testing\n\nIn the future, it is possible to check the functionality of the site for further\noptimization.\n\nTesting on more devices to find optimal values.\n\nUsing more devices to determine optimal color shades.\n\n[Back to top](#content)\n\n## Bugs\n\n- When creating the site, it was difficult to come up with a beautiful and\n  simple site design. I looked at many sites for inspiration.\n- In the process of writing the code, it was difficult to choose a simple and\n  beautiful effect that would fit the theme of the site.\n- During performance testing, it was found that all images needed to be reduced\n  in size.\n- Need to fix performance on mobile devices.\n- Not smooth card animation\n\n[Back to top](#content)\n\n## Deployment\n\n### Github pages\n\n- This project was deployed to GitHub Pages using the following steps\n\n  - Log in to GitHub and locate the GitHub Repository\n  - At the top of the Repository (not top of page), locate the \"Settings\" Button\n    on the menu.\n  - Scroll down the Settings page until you locate the \"GitHub Pages\" Section.\n  - Under \"Source\", click the dropdown called \"None\" and select \"Main Branch\".\n  - The page will automatically refresh.\n  - Scroll back down through the page to locate the now published site link in\n    the \"GitHub Pages\" section.\n  - live link for the page can be found here\n    [Bake's JOY](https://barkode.github.io/bake-with-joy/)\n\n[Back to top](#content)\n\n### Forking the GitHub Repository\n\n- By forking the GitHub Repository we make a copy of the original repository on\n  our GitHub account to view and/or make changes without affecting the original\n  repository by using the following steps\n- Log in to GitHub and locate the GitHub Repository\n- At the top of the Repository (not top of page) just above the \"Settings\"\n  Button on the menu, locate the \"Fork\" Button.\n- You should now have a copy of the original repository in your GitHub account.\n\n[Back to top](#content)\n\n### Making a Local Clone\n\n- Log in to GitHub and locate the GitHub Repository\n- Under the repository name, click \"Clone or download\".\n- To clone the repository using HTTPS, under \"Clone with HTTPS\", copy the link.\n- Open Git Bash\n- Change the current working directory to the location where you want the cloned\n  directory to be made\n- Type git clone, and then paste the URL you copied in Step 3.\n  - $ git clone \u003chttps://github.com/YOUR-USERNAME/YOUR-REPOSITORY\u003e\n- Press Enter. Your local clone will be created.\n\n[Back to top](#content)\n\n## Future improvements\n\n- Add a selection from multiple card collection.\n- Add sounds effects.\n- Add a new functionality with double button.\n- Add a new functionality with split button.\n- Add the ability to make bets.\n\n[Back to top](#content)\n\n## Credits\n\n### Code \u0026 Content\n\n- [Stack overflow](https://www.stackoverflow.com/),\n  [MDN Web Docs](https://developer.mozilla.org/en-US/),\n  [W3 Schools](https://www.w3schools.com/),\n  [LogRocket](https://blog.logrocket.com/)\n\n  Help in solving problems. Help in implementing best practices. Search for the\n  best practices. Good documentation.\n\n- [Figma](https://www.figma.com/design/fDlsHwelyuOVsfUmCzm3dA/%D0%A1%D1%83%D1%87%D0%B0%D1%81%D0%BD%D1%8F-%D0%BF%D0%B5%D0%BA%D0%B0%D1%80%D0%BD%D1%8F?node-id=0-1\u0026t=VeNx8IUKIo2EOdRB-0)\n\n  Figma as a search platform for inspiration and as a graphic editor.\n\n- Love running project from [Code Institute](https://codeinstitute.net/ie/)\n\n  I was inspired by the Gallery page and some of the code for the site's gallery\n  was taken.\n\n- [UIVerse](https://uiverse.io/)\n\n  credits for hover effect over images and other effects for elements goes to\n\n- [LogRocket](https://blog.logrocket.com/responsive-image-gallery-css-flexbox/)\n\n  credits for gallery goes from\n\n- [Google Maps](https://www.google.ie/maps/)\n\n  Was used to show the location\n\n- [ZelL Liev](https://medium.com/free-code-camp/how-to-check-if-an-input-is-empty-with-css-1a83715f9f3e)\n\n  A piece of code to implement form validation using CSS and regular\n  expressions.\n\n- [freeformatter.com](https://www.freeformatter.com/css-minifier.html#before-output)\n\n  It was used to minimize css\n\n- [W3C Markup Validator](https://validator.w3.org/)\n\n  This service was used to validate HTML files\n\n- [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)\n\n  This service was used to validate CSS files\n\n- [JavaScript Info](https://javascript.info/)\n\n  There is a lot of js documentation on this site\n\n- [Google](https://google.com)\n\n  Search engine to find information\n\n- [ChatGPT](https://chatgpt.com/)\n\n  As a good helper in finding information\n\n[Back to top](#content)\n\n### Media\n\n- [Unsplash](https://unsplash.com/) and [Pexels](https://www.pexels.com/)\n\n  Images on the site are taken from these resources.\n\n- [app-logo](https://app.logo.com/)\n\n  the resource is used to generate an idea and automatically create a logo for\n  the site\n\n- [MDN Web Docs](https://developer.mozilla.org/en-US/)\n\n  Instructions on how to connect the favicon to the site have been taken.\n\n- [FlatIcon](https://www.flaticon.com/)\n\n  The icon for the site was found on this resource.\n\n- [Squoosh](https://squoosh.app/)\n\n  The service was used to optimize pictures\n\n- [FLATICON](https://www.flaticon.com/free-icon/numerology_9288700?term=dice\u0026page=1\u0026position=59\u0026origin=search\u0026related_id=9288700)\n\n  Site favicon\n\n[Back to top](#content)\n\n### Acknowledgment\n\n- I want to thank my tutor [Marko Tot](https://github.com/tmarkec) for his daily\n  care and help. For the desire to create a favorable atmosphere for learning\n  and creativity.\n- I would like to thank my mentor, Anthony Ugwu, for his helpful advice on\n  writing the project.\n- I would also like to thank the entire\n  [Code Institute](https://codeinstitute.net/ie/) and\n  [Kerry College](https://kerrycollege.ie/) for giving me the opportunity to\n  study and participate in this project.\n\n[Back to top](#content)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarkode%2Ftapandplay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarkode%2Ftapandplay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarkode%2Ftapandplay/lists"}