├── .gitattributes
├── LICENSE
├── README.md
├── index.html
├── script
└── app.js
└── styles
└── style.css
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 asyncfinkd
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # catch-word
2 | Catch Word With JS
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | catch word with asyncfinkd
7 |
11 |
12 |
Time Out
13 |
14 |
font
15 |
stage
16 |
OK
17 |
18 |
19 |
25 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/script/app.js:
--------------------------------------------------------------------------------
1 | let ScoreElement = document.querySelector(".game__score");
2 | let StageElement = document.querySelector(".game__stage");
3 | let TimerElement = document.querySelector(".timer");
4 | let WordsElement = document.querySelector(".word__container");
5 | let InputElement = document.querySelector("input");
6 | let ContainerElement = document.querySelector(".modal__container");
7 | let ButtonElement = document.getElementById("OK");
8 | let BoxElement = document.querySelector(".modal__container .modal__box");
9 | let AddTimerElement = document.querySelector(".add__timer");
10 | let Score = 0;
11 | let Stage = 0;
12 | let Timer = 50;
13 | let Interval = 1000;
14 | let addTimeNumber = 3;
15 | let Words = [
16 | "book",
17 | "apple",
18 | "microsoft",
19 | "wine",
20 | "production",
21 | "left",
22 | "right",
23 | "bottom",
24 | "top",
25 | "sweet",
26 | "facebook",
27 | "google",
28 | ];
29 | let randomWord = null;
30 | let Elements = [
31 | {
32 | element: ScoreElement,
33 | text: "Score ",
34 | variable: Score,
35 | },
36 | {
37 | element: StageElement,
38 | text: "Stage ",
39 | variable: Stage,
40 | },
41 | ];
42 |
43 | Application();
44 | StartTimer();
45 |
46 | InputElement.addEventListener("keyup", () => {
47 | if (InputElement.value.trim().toLocaleLowerCase() === randomWord) {
48 | InputElement.value = "";
49 | setRandomWord();
50 | Score++;
51 | Timer += addTimeNumber;
52 | TimerElement.innerHTML = Timer + "s";
53 | TimerElement.classList.add("green");
54 | AddTimerElement.style.display = "block";
55 | AddTimerElement.innerHTML = "+" + addTimeNumber;
56 | ScoreElement.innerHTML = "Score " + Score;
57 | setTimeout(() => {
58 | TimerElement.classList.remove("green");
59 | AddTimerElement.style.display = "none";
60 | }, 800);
61 | }
62 | });
63 |
64 | function Application() {
65 | Elements.map((item) => {
66 | const { element, text, variable } = item;
67 | element.innerHTML = text + variable;
68 | });
69 | setRandomWord();
70 | }
71 |
72 | function setRandomWord() {
73 | randomWord = Words[Math.floor(Math.random() * Words.length)];
74 | WordsElement.innerHTML = randomWord;
75 | }
76 |
77 | function timerSetting() {
78 | if (Timer <= 0) {
79 | return gameOver();
80 | } else {
81 | Timer--;
82 | TimerElement.innerHTML = Timer + "s";
83 | }
84 | }
85 |
86 | function StartTimer() {
87 | setInterval(timerSetting, Interval);
88 | }
89 |
90 | function gameOver() {
91 | clearInterval(StartTimer);
92 | ContainerElement.style.display = "flex";
93 | setTimeout(() => {
94 | BoxElement.style.opacity = "1";
95 | }, 500);
96 | }
97 |
98 | ButtonElement.addEventListener("click", () => {
99 | window.location.reload();
100 | });
101 |
--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Code Author asyncfinkd
3 | Github: http://github.com/asyncfinkd
4 | */
5 |
6 | @import url("https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap");
7 |
8 | * {
9 | margin: 0;
10 | padding: 0;
11 | box-sizing: border-box;
12 | outline: none;
13 | border: none;
14 | user-select: none;
15 | }
16 |
17 | :root {
18 | --font: "Odibee Sans";
19 | --medium-rem: 1.4375rem;
20 | --small-rem: 0.625rem;
21 | --zero: 0;
22 | --default-rem: 1.125rem;
23 | --large-rem: 2.25rem;
24 | --light-red: #ff6666;
25 | --medium-red: #ff4545;
26 | --light-gray: #c4c4c4;
27 | --blue-color: #379fff;
28 | --white-color: #fff;
29 | --center: center;
30 | --width-full: 100%;
31 | --height-full: 100vh;
32 | --width-not-full: 97%;
33 | --light-dark: rgba(0, 0, 0, 0.5);
34 | }
35 |
36 | body {
37 | padding-left: var(--medium-rem);
38 | padding-right: var(--medium-rem);
39 | }
40 |
41 | .font {
42 | font-family: var(--font);
43 | }
44 |
45 | .game__container {
46 | display: flex;
47 | justify-content: space-between;
48 | align-items: var(--center);
49 | margin-top: var(--small-rem);
50 | }
51 |
52 | .game__container .game__score,
53 | .game__container .game__stage {
54 | font-size: var(--default-rem);
55 | }
56 |
57 | .game__container .game__stage {
58 | color: var(--light-red);
59 | }
60 |
61 | .word__container {
62 | font-size: var(--large-rem);
63 | margin-top: calc(100px - 75px);
64 | text-align: var(--center);
65 | }
66 |
67 | input {
68 | border-bottom: 1px solid var(--light-gray);
69 | font-size: calc(100px - 76px);
70 | text-align: var(--center);
71 | display: flex;
72 | margin: calc(100px - 35px) auto 40px auto;
73 | width: var(--width-full);
74 | max-width: var(--width-full);
75 | }
76 |
77 | .timer {
78 | font-size: calc(100px - 64px);
79 | text-align: var(--center);
80 | }
81 |
82 | .modal__container {
83 | position: fixed;
84 | top: var(--zero);
85 | left: var(--zero);
86 | width: var(--width-full);
87 | height: var(--height-full);
88 | background-color: var(--light-dark);
89 | display: none;
90 | align-items: var(--center);
91 | justify-content: var(--center);
92 | animation-name: fade-anim;
93 | animation-duration: 0.8s;
94 | }
95 |
96 | .modal__container .modal__box {
97 | width: 400px;
98 | opacity: 0;
99 | display: flex;
100 | justify-content: var(--center);
101 | background-color: var(--white-color);
102 | border-radius: calc(100px - 90px);
103 | padding-top: calc(100px - 85px);
104 | padding-bottom: calc(100px - 85px);
105 | flex-direction: column;
106 | align-items: var(--center);
107 | animation-name: box-anim;
108 | animation-duration: 0.6s;
109 | animation-delay: 0.5s;
110 | }
111 |
112 | .modal__container .modal__box h1 {
113 | font-size: calc(100px - 36px);
114 | color: var(--medium-red);
115 | }
116 |
117 | .modal__container .modal__box .modal__result p {
118 | font-size: calc(100px - 76px);
119 | }
120 |
121 | .modal__container .modal__box .modal__result p:first-child {
122 | margin-top: calc(100px - 55px);
123 | }
124 |
125 | .modal__container .modal__box .modal__result button {
126 | margin-top: calc(100px - 40px);
127 | }
128 |
129 | .modal__container .modal__box .modal__result button {
130 | margin-top: calc(100px - 40px);
131 | width: calc(100px + 40px);
132 | height: calc(20px + 24px);
133 | border-radius: calc(10px + 10px);
134 | background-color: var(--blue-color);
135 | display: flex;
136 | align-items: var(--center);
137 | justify-content: var(--center);
138 | color: var(--white-color);
139 | font-size: calc(10px + 8px);
140 | cursor: pointer;
141 | transition: 0.2s;
142 | }
143 |
144 | .modal__container .modal__box .modal__result button:hover {
145 | opacity: 0.9;
146 | }
147 |
148 | .add__timer {
149 | text-align: center;
150 | color: green;
151 | animation-name: timer-anim;
152 | animation-duration: 0.4s;
153 | display: none;
154 | }
155 |
156 | .red {
157 | color: red;
158 | }
159 |
160 | .green {
161 | color: green;
162 | }
163 |
164 | @keyframes fade-anim {
165 | from {
166 | opacity: 0;
167 | }
168 | to {
169 | opacity: 1;
170 | }
171 | }
172 |
173 | @keyframes box-anim {
174 | from {
175 | transform: translateY(-20px);
176 | opacity: 0;
177 | }
178 | to {
179 | transform: translateY(0);
180 | opacity: 1;
181 | }
182 | }
183 |
184 | @keyframes timer-anim {
185 | from {
186 | transform: translateY(-10px);
187 | opacity: 0;
188 | }
189 | to {
190 | transform: translateY(0);
191 | opacity: 1;
192 | }
193 | }
194 |
--------------------------------------------------------------------------------