Final Exam

Final exam for checking student knowledge and practical skills

Test 1:

Create responsive html markups for mobile, table, desktop use float methodology.

Acceptance criteria

• Use css media queries
• Use css variables
• Markups must be adaptive and responsive according to design

Test 2:

Create responsive html markups for mobile, table, desktop use flex methodology.

Acceptance criteria

• Use css media queries
• Use css variables
• Markups must be adaptive and responsive according to design

Test 3:

Create responsive html markups for mobile, table, desktop use grid methodology.

Acceptance criteria

• Use css media queries
• Use css variables
• Markups must be adaptive and responsive according to design

Test 4:

Create simple counter web app

Acceptance criteria:

• Counter should contain three button (next, prev, reset) and display.
• Display should show current value start from 0 to 100
• Start value is 0 step is 1
• When user click on button next you should add 1 point to current value
• When user click on button prev you should subtract 1 point from current value
• When user click reset button you should reset cuttent value to 0

Test 5:

Create simple timer web app

Acceptance criteria:

• Counter should contain three button (start, stop, reset) and display.
• Display should show timer time
• When user click on button start you should start timer from current value
• When user click on button stop you should stop timer
• When user click reset button you should reset timer

Test 6:

Create simple web app

Acceptance criteria:

• You should generate field 5x5.
• Every cell should contain a number of same colors and sizes.
• The order of the numbers must be random from 1 to 25 each time
• When user click on cell you should add number 5 to current value

Test 7:

Create simple timer web app

Acceptance criteria:

• You should generate field 5x5.
• Every cell should contain a number of different colors and sizes.
• The order of the numbers must be random from 1 to 25 each time
• When user click on cell you should hide current value in the cell

Test 8:

Create sea battle board

Acceptance criteria:

• You should generate sea battle board. It is possible to use any html-tags at will
• The board should be drawn accordingly. Rows should be numbered from 1 to 10,
• Columns - in Latin letters A, B, C, D, E, F, G, H..

Test 9:

Create a simple button whose change state when users clicks on them.

Acceptance criteria:

• You should create button with event onClick
• Sequence of statuses: ['start', 'in progress', 'pause', 'disconnect', 'finish']
• Every status should change color off tax label
• When the user achieve the last status you should return to the first status

Test 10:

Create a survey form with validation and submit button.

Acceptance criteria:

• As user I want to see survey form (first name, last name, email, description, and gender with two radio button ) button submit.
• When form is valid show message in block with id="demo"
• All text field must be letters without special characters
• when field is invalid add red border for input

first name: <first name>
last name: <last name>
email: <email> 
gender: <gender>
description: <description>

Test 11:

Create a simple navigation menu.

Acceptance criteria:

• You should create a navigation menu
• When you on the click menu item you should open sub navigation list

Test 12:

Create several gulp tasks.

Acceptance criteria:

• First task should create main.html, main.js and main.css in src folder
• Second task should add some content to every files
• Next Task should rename file and copy to dist folder

Test 13:

Create Simple HTML page use css BEM metodolody.

Acceptance criteria:

• css BEM metodolody
• Use css media queries
• Use css variables

Test 14:

Create responsive html markups for mobile, table, desktop use flex methodology.

Acceptance criteria:

• Use css media queries
• Use css variables
• Markups must be adaptive and responsive according to design

Test 15:

Create Simple HTML page use css SMACSS methodology.

Acceptance criteria:

• css SMACSS metodolody
• Use css media queries
• Use css variables

Test 16:

Create widgets slider.

Acceptance criteria:

• use javascript or jQuery or other js library
• Markups must be according to design

Test 17:

Create widgets Autocomplete.

Acceptance criteria:

• use javascript or jQuery or other js library
• Markups must be according to design

Test 18:

Create dropdown widgets.

Acceptance criteria:

• use javascript or jQuery or other js library
• Markups must be according to design

Test 19:

Create toggle panel accordion widgets.

Acceptance criteria:

• use javascript or jQuery or other js library
• Functionality must be according to video
• Markups must be according to design

Screen.Recording.2021-12-08.at.19.38.54.mov

Test 20:

Create tooltip widgets.

Acceptance criteria:

• use javascript or jQuery or other js library
• Functionality must be according to video
• Markups must be according to design

Screen.Recording.2021-12-08.at.19.42.47.mov

Test 21:

Create tabs widgets.

Acceptance criteria:

• use javascript or jQuery or other js library
• Functionality must be according to video
• Markups must be according to design

Screen.Recording.2021-12-08.at.19.43.42.mov

Test 22:

Create webpack configuration development environment

Acceptance criteria

• Create npm script for start build
• Install and configure babel-loader, file-loader, html-loader, image-webpack-loader, sass-loader, to-string-loader, ts-loader, url-loader
• Install and configure MiniCssExtractPlugin, HtmlWebpackPlugin, webpack.DefinePlugin for dev config
• File structure should be below

Directory Structure

├── app
│   ├── index.ts
│   └──  index.html 
├──.editorconfig
├──.gitignore
├──webpack.config.js
├──package.json
├──package-lock.json
└── 

Test 23:

Create webpack configuration production environment

Acceptance criteria

• Create npm script for start build

• Install and configure babel-loader, file-loader, html-loader, image-webpack-loader, sass-loader, to-string-loader, ts-loader, url-loader

• Install and configure TerserPlugin, HtmlWebpackPlugin, webpack.DefinePlugin for production config

• Add minimize option for production config

• File structure should be below

Directory Structure

├── app
│   ├── index.ts
│   └──  index.html
├──.editorconfig
├──.gitignore
├──webpack.config.js
├──package.json
├──package-lock.json
└── 

Test 24:

Create simple web page use AJAX technology

Acceptance criteria

• Use open API https://anapioficeandfire.com/api/characters/583 for getting data from a server
• Show list of options for some charecter
• Markups must be according to design

Test 25:

Create simple web page use AJAX technology

Acceptance criteria

• Use open API https://anapioficeandfire.com/api/characters/583 for getting data from a server
• Show list of charecters name
• Markups must be according to design

Test 26:

Create simple web react application boilerplate

Acceptance criteria

• Use create-react-app module, create boilerplate
• create npm scripts for stating application
• Main page should have only title with message "It is React boilerplate"
• Markups must be according to design

Test 27:

Create simple web react application

Acceptance criteria

• Use Bootstrap UI framework
• Use css media queries
• Use mobile-first methodology
• Use scss
• Markups must be according to design

Test 28:

Create Simple HTML page use css BEM metodolody.

Acceptance criteria:

• css BEM metodolody
• Use css media queries
• Use css variables

Test 29:

Create Simple HTML fomr according to validation rules.

Acceptance criteria:

• The form input element must have any input values
• The form input element must have valid email format values
• The form input element must have valid number format values
• when field is invalid add red border for input
• Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number