├── _config.yml
├── .vscode
    └── settings.json
├── README.md
├── .gitignore
├── .stylelintrc.json
├── package.json
├── .hintrc
├── .eslintrc.json
├── index.html
├── scripts
    ├── refactored.js
    └── script.js
├── .github
    └── workflows
    │   └── linters.yml
└── css
    └── style.css


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-time-machine


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ![image](https://user-images.githubusercontent.com/85465559/159894943-2ecacf51-9c99-4845-99e7-5100ca77e44d.png)
2 | 
3 | ![image](https://user-images.githubusercontent.com/85465559/159895154-802ad065-1ff2-4c9b-be89-b8de3761c44b.png)
4 | 
5 | [live demo](https://oybekkayumov.github.io/Guess-My-Number/)
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | test.md
 2 | 
 3 | node_modules/
 4 | 
 5 | .vscode/*
 6 | !.vscode/settings.json
 7 | !.vscode/tasks.json
 8 | !.vscode/launch.json
 9 | !.vscode/extensions.json
10 | !.vscode/*.code-snippets
11 | 
12 | # Local History for Visual Studio Code
13 | .history/
14 | 
15 | # Built Visual Studio Code Extensions
16 | *.vsix


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": null,
 6 |     "scss/at-rule-no-unknown": true,
 7 |     "csstree/validator": true
 8 |   },
 9 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
10 | }
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "devDependencies": {
 3 |     "babel-eslint": "^10.1.0",
 4 |     "eslint": "^7.32.0",
 5 |     "eslint-config-airbnb-base": "^14.2.1",
 6 |     "eslint-plugin-import": "^2.25.3",
 7 |     "hint": "^6.1.9",
 8 |     "stylelint": "^13.13.1",
 9 |     "stylelint-config-standard": "^21.0.0",
10 |     "stylelint-csstree-validator": "^1.9.0",
11 |     "stylelint-scss": "^3.21.0"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "connector": {
 3 |     "name": "local",
 4 |     "options": {
 5 |       "pattern": ["**", "!.git/**", "!node_modules/**"]
 6 |     }
 7 |   },
 8 |   "extends": ["development"],
 9 |   "formatters": ["stylish"],
10 |   "hints": [
11 |     "button-type",
12 |     "disown-opener",
13 |     "html-checker",
14 |     "meta-charset-utf-8",
15 |     "meta-viewport",
16 |     "no-inline-styles:error"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "jest": true
 6 |   },
 7 |   "parser": "babel-eslint",
 8 |   "parserOptions": {
 9 |     "ecmaVersion": 2018,
10 |     "sourceType": "module"
11 |   },
12 |   "extends": ["airbnb-base"],
13 |   "rules": {
14 |     "no-shadow": "off",
15 |     "no-param-reassign": "off",
16 |     "eol-last": "off",
17 |     "import/extensions": [ 1, {
18 |       "js": "always", "json": "always"
19 |     }]
20 |   },
21 |   "ignorePatterns": [
22 |     "dist/",
23 |     "build/"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="css/style.css">
 8 |     <title>Guess My Number!</title>
 9 | </head>
10 | <body>
11 |     <header>
12 |         <h1>Guess My Number!</h1>
13 |         <p class="between">(Between 1 and 20)</p>
14 |         <button class="btn again">Again!</button>
15 |         <div class="number">?</div>
16 |       </header>
17 |    
18 |       <main>
19 |         <section class="left">
20 |           <input type="number" class="guess" />
21 |           <button class="btn check">Check!</button>
22 |         </section>
23 |         <section class="right">
24 |           <p class="message">Start guessing...</p>
25 |           <p class="label-score">💯 Score: <span class="score">20</span></p>
26 |            <p class="label-highscore">🚀 Highscore: <span class="highscore">0</span></p>
27 |         </section>
28 |       </main>
29 |       
30 |       <!-- <script src="scripts/script.js"></script> -->
31 |       <script src="scripts/refactored.js"></script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/scripts/refactored.js:
--------------------------------------------------------------------------------
 1 | let secretNumber = Math.trunc(Math.random() * 20) + 1;
 2 | let score = 20;
 3 | let highscore = 0;
 4 | 
 5 | const displayMessage = function (message) {
 6 |   document.querySelector('.message').textContent = message;
 7 | };
 8 | 
 9 | document.querySelector('.check').addEventListener('click', () => {
10 |   const guess = Number(document.querySelector('.guess').value);
11 | 
12 |   if (!guess) {
13 |     // document.querySelector('.message').textContent = '⛔ No Number!';
14 |     displayMessage('⛔ No Number!');
15 |   } else if (guess === secretNumber) {
16 |     // document.querySelector('.message').textContent = '🏆 Correct Number!';
17 |     displayMessage('🏆 Correct Number!');
18 | 
19 |     document.querySelector('.number').textContent = secretNumber;
20 | 
21 |     document.querySelector('body').style.backgroundColor = '#60b347';
22 | 
23 |     document.querySelector('.number').style.width = '30rem';
24 | 
25 |     if (score > highscore) {
26 |       highscore = score;
27 |       document.querySelector('.highscore').textContent = highscore;
28 |     }
29 |   } else if (guess !== secretNumber) {
30 |     if (score > 1) {
31 |       displayMessage(guess > secretNumber ? '⬆ 👆 Too high!' : '⬇ 👇 Too low!');
32 |       score -= 1;
33 |       document.querySelector('.score').textContent = score;
34 |     } else {
35 |       displayMessage('💥 You lost the game!');
36 |       document.querySelector('.score').textContent = 0;
37 |     }
38 |   }
39 | });
40 | 
41 | document.querySelector('.again').addEventListener('click', () => {
42 |   score = 20;
43 |   secretNumber = Math.trunc(Math.random() * 20) + 1;
44 | 
45 |   // document.querySelector('.message').textContent = 'Start guessing...';
46 |   displayMessage('Start guessing...');
47 |   document.querySelector('.score').textContent = score;
48 |   document.querySelector('.number').textContent = '?';
49 |   document.querySelector('.guess').value = '';
50 | 
51 |   document.querySelector('body').style.backgroundColor = '#222';
52 | 
53 |   document.querySelector('.number').style.width = '15rem';
54 | });
55 | 


--------------------------------------------------------------------------------
/scripts/script.js:
--------------------------------------------------------------------------------
 1 | let secretNumber = Math.trunc(Math.random() * 20) + 1;
 2 | let score = 20;
 3 | let highscore = 0;
 4 | 
 5 | document.querySelector('.check').addEventListener('click', () => {
 6 |   const guess = Number(document.querySelector('.guess').value);
 7 | 
 8 |   if (!guess) {
 9 |     document.querySelector('.message').textContent = '⛔ No Number!';
10 |   } else if (guess === secretNumber) {
11 |     document.querySelector('.message').textContent = '🏆 Correct Number!';
12 | 
13 |     document.querySelector('.number').textContent = secretNumber;
14 | 
15 |     document.querySelector('body').style.backgroundColor = '#60b347';
16 | 
17 |     document.querySelector('.number').style.width = '30rem';
18 | 
19 |     if (score > highscore) {
20 |       highscore = score;
21 |       document.querySelector('.highscore').textContent = highscore;
22 |     }
23 |   } else if (guess > secretNumber) {
24 |     if (score > 1) {
25 |       document.querySelector('.message').textContent = '⬆ 👆 Too high!';
26 |       score -= 1;
27 |       document.querySelector('.score').textContent = score;
28 |     } else {
29 |       document.querySelector('.message').textContent = '💥 You lost the game!';
30 |       document.querySelector('.score').textContent = 0;
31 |     }
32 |   } else if (guess < secretNumber) {
33 |     if (score > 1) {
34 |       document.querySelector('.message').textContent = '⬇ 👇 Too low!';
35 |       score -= 1;
36 |       document.querySelector('.score').textContent = score;
37 |     } else {
38 |       document.querySelector('.message').textContent = '💥 You lost the game!';
39 |       document.querySelector('.score').textContent = 0;
40 |     }
41 |   }
42 | });
43 | 
44 | document.querySelector('.again').addEventListener('click', () => {
45 |   score = 20;
46 |   secretNumber = Math.trunc(Math.random() * 20) + 1;
47 | 
48 |   document.querySelector('.message').textContent = 'Start guessing...';
49 |   document.querySelector('.score').textContent = score;
50 |   document.querySelector('.number').textContent = '?';
51 |   document.querySelector('.guess').value = '';
52 | 
53 |   document.querySelector('body').style.backgroundColor = '#222';
54 | 
55 |   document.querySelector('.number').style.width = '15rem';
56 | });
57 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-18.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.7.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-18.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@6.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-18.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-18.04
52 |     steps:
53 |       - uses: actions/checkout@v2
54 |       - uses: actions/setup-node@v1
55 |         with:
56 |           node-version: "12.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .
63 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
  2 | 
  3 | * {
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 62.5%;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | body {
 15 |   font-family: 'Press Start 2P', sans-serif;
 16 |   color: #eee;
 17 |   background-color: #222;
 18 | 
 19 |   /* background-color: #60b347; */
 20 | }
 21 | 
 22 | /* layout */
 23 | header {
 24 |   position: relative;
 25 |   height: 35vh;
 26 |   border-bottom: 7px solid #eee;
 27 | }
 28 | 
 29 | main {
 30 |   display: flex;
 31 |   align-items: center;
 32 |   justify-content: space-around;
 33 |   color: #eee;
 34 |   height: 65vh;
 35 | }
 36 | 
 37 | .left {
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   align-items: center;
 41 |   width: 52rem;
 42 | }
 43 | 
 44 | .right {
 45 |   font-size: 2rem;
 46 |   width: 52rem;
 47 | }
 48 | 
 49 | /* elements style */
 50 | h1 {
 51 |   position: absolute;
 52 |   font-size: 4rem;
 53 |   text-align: center;
 54 |   width: 100%;
 55 |   top: 52%;
 56 |   left: 50%;
 57 |   transform: translate(-50%, -50%);
 58 | }
 59 | 
 60 | .number {
 61 |   position: absolute;
 62 |   font-size: 6rem;
 63 |   text-align: center;
 64 |   background: #eee;
 65 |   color: #333;
 66 |   bottom: 0%;
 67 |   left: 40%;
 68 |   width: 15rem;
 69 |   padding: 3rem 0;
 70 | 
 71 |   /* transform: translate(-50%, -50%); */
 72 | }
 73 | 
 74 | .between {
 75 |   position: absolute;
 76 |   font-size: 1.4rem;
 77 |   top: 2rem;
 78 |   right: 2rem;
 79 | }
 80 | 
 81 | .again {
 82 |   position: absolute;
 83 |   top: 2rem;
 84 |   left: 2rem;
 85 | }
 86 | 
 87 | .guess {
 88 |   display: block;
 89 |   font-family: inherit;
 90 |   font-size: 5rem;
 91 |   text-align: center;
 92 |   color: inherit;
 93 |   background: none;
 94 |   border: 4px solid #eee;
 95 |   width: 25rem;
 96 |   padding: 2.5rem;
 97 |   margin-bottom: 3rem;
 98 | }
 99 | 
100 | .btn {
101 |   font-size: 2rem;
102 |   font-family: inherit;
103 |   color: #222;
104 |   background-color: #eee;
105 |   cursor: pointer;
106 |   border: none;
107 |   padding: 2rem 3rem;
108 | }
109 | 
110 | .btn:hover {
111 |   background-color: #eee;
112 | }
113 | 
114 | .message {
115 |   margin-bottom: 8rem;
116 |   height: 3rem;
117 | }
118 | 
119 | .label-score {
120 |   margin-bottom: 2rem;
121 | }
122 | 


--------------------------------------------------------------------------------