Skip to content

Commit 44651b4

Browse files
SlaVR7SlaVR7
committed
chore: change readme and rename constants
1 parent 44b5496 commit 44651b4

9 files changed

+79
-68
lines changed

‎README.md

+39-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,41 @@
1-
RSS-CSS-Selectors
1+
# CSS-Selectors
22

3-
In this task, we will create a trainer for learning CSS selectors.
4-
The trainer consists of multiple game levels.
5-
Each level includes a layout example and HTML code that corresponds to the current level.
6-
Some elements of the layout are highlighted using animation.
3+
In this task, I have created a trainer for learning CSS selectors.
4+
The trainer consists of multiple game levels.
5+
Each level includes a layout example and HTML code that corresponds to the current level.
6+
Some elements of the layout are highlighted using animation.
77
The user's task is to write a CSS selector that targets all the highlighted elements in the layout.
8+
9+
## Technology Stack:
10+
11+
- HTML
12+
- SCSS
13+
- TypeScript
14+
- Webpack
15+
- ESLint
16+
17+
## Deployment
18+
19+
You can see the deployment of the project at [https://slavr7.github.io/RSS-CSS-Selectors/](https://slavr7.github.io/RSS-CSS-Selectors/)
20+
21+
## Installation and Usage
22+
23+
To run this project locally, follow these steps:
24+
25+
1. Clone this repository.
26+
2. Run 'npm install'.
27+
3. Run 'npm run serve'.
28+
29+
## Screenshot
30+
31+
![Screenshot 1](src/img/screenshot_1.png)
32+
33+
## Available Scripts
34+
35+
- **'npm run test':** This script runs the Jest testing framework, which is used for testing your code.
36+
- **'npm run build':** This script triggers the Webpack bundler to build your project in production mode. It sets the Node environment to production.
37+
- **'npm run build:dev':** This script instructs Webpack to build your project in development mode, optimizing it for development and debugging.
38+
- **'npm run watch':** This script runs Webpack in watch mode, which continuously monitors your project files for changes and rebuilds it automatically when changes are detected.
39+
- **'npm start':** This script starts a development server using Webpack's built-in development server, allowing you to preview and test your project locally.
40+
- **'npm run lint':** This script runs ESLint, a code analysis tool, on the code located in the src directory of your project. It automatically fixes code style and syntax issues using the --fix option, ensuring that your code conforms to defined coding standards and maintains consistency.
41+

‎index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ <h3>HTML</h3>
8282
<div class="css-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15</div>
8383
<div class="tagsField">
8484
<div id='str1'></div>
85-
<div class="html-strings" id='str2'></div>
86-
<div class="html-strings" id='str3'></div>
87-
<div class="html-strings" id='str4'></div>
88-
<div class="html-strings" id='str5'></div>
85+
<div class="html-strings" id='string2'></div>
86+
<div class="html-strings" id='string3'></div>
87+
<div class="html-strings" id='string4'></div>
88+
<div class="html-strings" id='string5'></div>
8989
<div id='str6'></div>
9090
</div>
9191
<div id="fakeLayout"></div>

‎package.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
"test": "jest",
88
"build": "webpack --mode=production --node-env=production",
99
"build:dev": "webpack --mode=development",
10-
"build:prod": "webpack --mode=production --node-env=production",
1110
"watch": "webpack --watch",
12-
"serve": "webpack serve",
13-
"lint": "npx lint src",
14-
"deploy": "npm run build && npx gh-pages -d dist -e RSS-CSS-Selectors"
11+
"start": "webpack serve",
12+
"lint": "eslint --fix src",
13+
"deploy": "npm run build && npx gh-pages -d dist"
1514
},
1615
"author": "",
1716
"license": "ISC",

‎src/img/screenshot_1.png

177 KB
Loading

‎src/index.spec.ts

-9
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import { createFakeLayout } from './ts/fakeLayout';
22

33
describe('createFakeLayout', () => {
44
it('should set fake layout from level object to container innerHTML', () => {
5-
6-
// Подготовка
7-
85
const level1 = {
96
fakeLayout: '<div class="cube"></div><div class="pyramid target"></div><div class="cube"></div>',
107
}
@@ -22,27 +19,21 @@ describe('createFakeLayout', () => {
2219
const levelIndex = '1';
2320
localStorage.setItem('level', levelIndex);
2421

25-
// Мокаем методы и свойства, которые использует функция createFakeLayout
2622
const container = document.createElement('div');
2723
container.setAttribute('id', 'fakeLayout');
2824

29-
// Выполнение
3025
createFakeLayout(container);
3126

32-
// Проверка
3327
expect(container.innerHTML).toEqual(levelsObjects[+levelIndex - 1].fakeLayout);
3428
});
3529

3630
it('should not set fake layout if level index is undefined', () => {
37-
// Подготовка
3831
localStorage.clear();
3932
const container = document.createElement('div');
4033
container.setAttribute('id', 'fakeLayout');
4134

42-
// Выполнение
4335
createFakeLayout(container);
4436

45-
// Проверка
4637
expect(container.innerHTML).toEqual('');
4738
});
4839
});

‎src/ts/changeLevel.ts

-3
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@ import { showCheckmark } from './gameProgress';
88
import { checkForHelp } from './getHelp';
99
import { highlightCurrentLevel } from './highlightCurrentLevel';
1010
import { createFakeLayout } from './fakeLayout';
11-
import { highlightElements } from './highlightElements';
12-
1311

1412
export const nextLevel: NodeListOf<HTMLDivElement> = document.querySelectorAll('.right-arrow');
1513
export const previousLevel: NodeListOf<HTMLDivElement> = document.querySelectorAll('.left-arrow');
1614
export const inputArea: HTMLInputElement | null = document.querySelector('#css-input');
1715
export const levelElementsAdaptive: NodeListOf<HTMLLIElement> = document.querySelectorAll('.level-item-adaptive');
1816
export const levelElements: NodeListOf<HTMLLIElement> = document.querySelectorAll('.level-item');
1917

20-
2118
export function changeLevel(levelIndex: number, event?: Event, dontMovePopup?: boolean, closePopup?: boolean): void {
2219
if (localStorage.getItem('level') === '1' && (event?.target === previousLevel[0] || event?.target === previousLevel[1])) return;
2320
if (localStorage.getItem('level') === '10' && (event?.target === nextLevel[0] || event?.target === nextLevel[1])) return;

‎src/ts/createTags.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import {Levels} from "./level-objects";
22
import { Figures } from './figures';
33

44
export function createTags(level:Levels<Figures>):void {
5-
const str1: HTMLDivElement | null = document.querySelector('#str1');
6-
const str2: HTMLDivElement | null = document.querySelector('#str2');
7-
const str3: HTMLDivElement | null = document.querySelector('#str3');
8-
const str4: HTMLDivElement | null = document.querySelector('#str4');
9-
const str5: HTMLDivElement | null = document.querySelector('#str5');
10-
const str6: HTMLDivElement | null = document.querySelector('#str6');
11-
if (str1) str1.innerText = level.html.string1;
12-
if (str2) str2.innerText = level.html.string2;
13-
if (str3) str3.innerText = level.html.string3;
14-
if (str4) str4.innerText = level.html.string4;
15-
if (str5) str5.innerText = level.html.string5;
16-
if (str6) str6.innerText = level.html.string6;
5+
const string1: HTMLDivElement | null = document.querySelector('#string1');
6+
const string2: HTMLDivElement | null = document.querySelector('#string2');
7+
const string3: HTMLDivElement | null = document.querySelector('#string3');
8+
const string4: HTMLDivElement | null = document.querySelector('#string4');
9+
const string5: HTMLDivElement | null = document.querySelector('#string5');
10+
const string6: HTMLDivElement | null = document.querySelector('#string6');
11+
if (string1) string1.innerText = level.html.string1;
12+
if (string2) string2.innerText = level.html.string2;
13+
if (string3) string3.innerText = level.html.string3;
14+
if (string4) string4.innerText = level.html.string4;
15+
if (string5) string5.innerText = level.html.string5;
16+
if (string6) string6.innerText = level.html.string6;
1717
if (level.title === 'Level 4') {
18-
str5?.classList.remove('html-strings');
19-
} else str5?.classList.add('html-strings');
18+
string5?.classList.remove('html-strings');
19+
} else string5?.classList.add('html-strings');
2020
}

‎src/ts/highlightElements.ts

+17-19
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
import { level } from '../index';
2-
31
export function highlightElements(): void {
4-
const elem1: HTMLDivElement | null = document.querySelector('.tableFig1');
5-
const elem2: HTMLDivElement | null = document.querySelector('.tableFig2');
6-
const elem3: HTMLDivElement | null = document.querySelector('.tableFig3');
7-
const elem4: HTMLDivElement | null = document.querySelector('.tableFig4');
2+
const figure1: HTMLDivElement | null = document.querySelector('.tableFig1');
3+
const figure2: HTMLDivElement | null = document.querySelector('.tableFig2');
4+
const figure3: HTMLDivElement | null = document.querySelector('.tableFig3');
5+
const figure4: HTMLDivElement | null = document.querySelector('.tableFig4');
86

9-
const str1: HTMLDivElement | null = document.querySelector('#str2');
10-
const str2: HTMLDivElement | null = document.querySelector('#str3');
11-
const str3: HTMLDivElement | null = document.querySelector('#str4');
12-
const str4: HTMLDivElement | null = document.querySelector('#str5');
7+
const string1: HTMLDivElement | null = document.querySelector('#string2');
8+
const string2: HTMLDivElement | null = document.querySelector('#string3');
9+
const string3: HTMLDivElement | null = document.querySelector('#string4');
10+
const string4: HTMLDivElement | null = document.querySelector('#string5');
1311

14-
if (elem1 && elem2 && elem3 && elem4 && str1 && str2 && str3 && str4) {
15-
const elements: HTMLDivElement[] = [elem1, elem2, elem3, elem4];
16-
const tags: HTMLDivElement[] = [str1, str2, str3, str4];
12+
if (figure1 && figure2 && figure3 && figure4 && string1 && string2 && string3 && string4) {
13+
const elements: HTMLDivElement[] = [figure1, figure2, figure3, figure4];
14+
const tags: HTMLDivElement[] = [string1, string2, string3, string4];
1715

1816
elements.forEach((item, index) => {
1917
item.addEventListener('mouseenter', () => {
2018
elements[index].classList.add('scale');
2119
if (elements[index].classList.contains('animationSettings')) {
2220
elements[index].classList.remove('animationSettings');
23-
elements[index].classList.add('animat');
21+
elements[index].classList.add('animation');
2422
}
2523

2624
if (item.style.backgroundImage !== '') tags[index].classList.add('red');
@@ -33,8 +31,8 @@ export function highlightElements(): void {
3331
elements.forEach((item, index) => {
3432
item.addEventListener('mouseleave', () => {
3533
elements[index].classList.remove('scale');
36-
if (elements[index].classList.contains('animat')) {
37-
elements[index].classList.remove('animat');
34+
if (elements[index].classList.contains('animation')) {
35+
elements[index].classList.remove('animation');
3836
elements[index].classList.add('animationSettings');
3937
}
4038

@@ -51,7 +49,7 @@ export function highlightElements(): void {
5149
elements[index].classList.add('scale');
5250
if (elements[index].classList.contains('animationSettings')) {
5351
elements[index].classList.remove('animationSettings');
54-
elements[index].classList.add('animat');
52+
elements[index].classList.add('animation');
5553
}
5654

5755
const tooltip = document.createElement('div');
@@ -63,8 +61,8 @@ export function highlightElements(): void {
6361
tags.forEach((item, index) => {
6462
item.addEventListener('mouseleave', () => {
6563
elements[index].classList.remove('scale');
66-
if (elements[index].classList.contains('animat')) {
67-
elements[index].classList.remove('animat');
64+
if (elements[index].classList.contains('animation')) {
65+
elements[index].classList.remove('animation');
6866
elements[index].classList.add('animationSettings');
6967
}
7068
const tooltip: HTMLElement | null = document.querySelector('.tooltip');

‎webpack.config.js

+2-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// Generated using webpack-cli https://github.com/webpack/webpack-cli
2-
31
const path = require('path');
42
const HtmlWebpackPlugin = require('html-webpack-plugin');
53

@@ -23,9 +21,6 @@ const config = {
2321
new HtmlWebpackPlugin({
2422
template: 'index.html',
2523
}),
26-
27-
// Add your plugins here
28-
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
2924
],
3025
module: {
3126
rules: [
@@ -46,9 +41,6 @@ const config = {
4641
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
4742
type: 'asset',
4843
},
49-
50-
// Add your rules for custom modules here
51-
// Learn more about loaders from https://webpack.js.org/loaders/
5244
],
5345
},
5446
resolve: {
@@ -59,8 +51,8 @@ const config = {
5951
module.exports = () => {
6052
if (isProduction) {
6153
config.mode = 'production';
62-
63-
54+
55+
6456
} else {
6557
config.mode = 'development';
6658
}

0 commit comments

Comments
 (0)