Assignment for self-development: HTML form with a list of random strings and selection by them
I bring to the attention of Khabrovsk residents and Habr guests a task for self-development in the frontend-side of the development. The task is aimed at performers who are beginning to deal with frontend programming and are set up to become familiar with the basic programming mechanisms in a browser. Required technologies: HTML, CSS, JavaScript (Vanilla).
The task is specially designed to understand as much as possible the basic technologies with the minimum connection of any additional tools. Essentially, only a browser and code editor are required; no preliminary manipulations, without the need for processing on the backend side. Who cares to get acquainted with the production - Welcome to the cat!
Make up a form consisting of a list of lines and a filter panel. Form Example:
Features of the form from the example:
• the form is a block of fixed width in the center of the window ;
• the filtration panel has a fixed height ; the margins of the panel are arranged horizontally in one or two lines;
• the list of lines is stretched to the entire remaining window height , when the number of lines is greater than the height of the allotted list, a scroll bar appears in the list itself (the appearance of a global scroll bar in the browser window is avoided).
The list lines and their contents are generated when the page is opened (random number greater than 200). The markup and contents of each line should be collected at random from the properties previously listed in the constant collections in the source code, the collections correspond to the advanced selection filters numbered 1, 2, 3, 4 (described in more detail below, the values of the elements and their number in the collection are set by the executor). A random selection of collection items for assembling strings is based on the generation of random numbers (random).
Provide a unique identifier and two tags on each line of the list:
1. The value of the identifier is written in the identifier attribute and displayed at the beginning of the contents of the string (can be wrapped in a separate tag)
2. the first tag is to select random, from those provided by the filter, for example, label, span, div, p or the like, with a random, visually distinguishable class (for example, by background color, font, or the like, pre-define the classes in css and list them in the collection of constants for the corresponding filter), in the contents display the name of the tag and its class; random substitution of several different classes at once, in different numbers, not less than 1, is welcomed;
3. the second tag is input with a random type (type attribute), random value (duplicate value in title), random presence / absence of a block mark, random presence / absence of a read-only mark.
On the filtering panel, provide for switching the mode between selection by identifier and advanced selection . After selecting values on the filtering form, only suitable entries should remain in the list:
in the selection mode by identifier - a line whose identifier matches;
in the advanced selection mode - lines, each of which immediately corresponds to all selected options: the first tag, the class of the first tag, the type of the input tag, the value of the input tag, the sign of the input tag being blocked, the read-only access tag is signifying.
When the filtering fields are changed again, the list should display entries from the original list that are suitable for the newly selected filter configuration (the filtering of the initial list should occur again, the original records should not be lost).
In the selection mode by identifier , the filter panel should have a selection field by row identifier (input field).
In the advanced selection mode, the following filters should be on the filter panel:
1. by the first tag (selection from the collection);
2. by the class of the first tag (selection from the collection);
3. by type of input tag (selection from the collection);
4. by the value of the input tag (selection from the collection);
5. by blocking the input tag (choice of yes / no values);
6. by availability only for reading the input tag (choice of yes / no values).
* It is encouraged that the filter react to changes immediately , without the need for a separate click on the search button.
* It is advisable to do everything carefully, deal with css-properties and provide such that the layout of individual lines of the list does not go due to differences in the tags contained in them.
** Implement the selection of all the necessary elements with one selector - immediately select the desired contents of the rows, and do not check each row for the presence of options selected in the filters.
*** Try to provide for the selection of several values for filters by the first tag, by the class of the first tag, by the type of input tag, by the value of the input tag. The filter by the first tag, the type of the input tag or the value of the input tag should select strings with any of the values selected in it (in each filter individually; the general requirement of the advanced mode for matching strings to all filters at once is preserved).
I hope the reader will find the described task will benefit in self-development or seem suitable for someone to recommend.
I wish you all success in your professional career!
The task is specially designed to understand as much as possible the basic technologies with the minimum connection of any additional tools. Essentially, only a browser and code editor are required; no preliminary manipulations, without the need for processing on the backend side. Who cares to get acquainted with the production - Welcome to the cat!
Recommendations for appearance
Make up a form consisting of a list of lines and a filter panel. Form Example:
Features of the form from the example:
• the form is a block of fixed width in the center of the window ;
• the filtration panel has a fixed height ; the margins of the panel are arranged horizontally in one or two lines;
• the list of lines is stretched to the entire remaining window height , when the number of lines is greater than the height of the allotted list, a scroll bar appears in the list itself (the appearance of a global scroll bar in the browser window is avoided).
Functional requirements
The list lines and their contents are generated when the page is opened (random number greater than 200). The markup and contents of each line should be collected at random from the properties previously listed in the constant collections in the source code, the collections correspond to the advanced selection filters numbered 1, 2, 3, 4 (described in more detail below, the values of the elements and their number in the collection are set by the executor). A random selection of collection items for assembling strings is based on the generation of random numbers (random).
Provide a unique identifier and two tags on each line of the list:
1. The value of the identifier is written in the identifier attribute and displayed at the beginning of the contents of the string (can be wrapped in a separate tag)
2. the first tag is to select random, from those provided by the filter, for example, label, span, div, p or the like, with a random, visually distinguishable class (for example, by background color, font, or the like, pre-define the classes in css and list them in the collection of constants for the corresponding filter), in the contents display the name of the tag and its class; random substitution of several different classes at once, in different numbers, not less than 1, is welcomed;
3. the second tag is input with a random type (type attribute), random value (duplicate value in title), random presence / absence of a block mark, random presence / absence of a read-only mark.
On the filtering panel, provide for switching the mode between selection by identifier and advanced selection . After selecting values on the filtering form, only suitable entries should remain in the list:
in the selection mode by identifier - a line whose identifier matches;
in the advanced selection mode - lines, each of which immediately corresponds to all selected options: the first tag, the class of the first tag, the type of the input tag, the value of the input tag, the sign of the input tag being blocked, the read-only access tag is signifying.
When the filtering fields are changed again, the list should display entries from the original list that are suitable for the newly selected filter configuration (the filtering of the initial list should occur again, the original records should not be lost).
In the selection mode by identifier , the filter panel should have a selection field by row identifier (input field).
In the advanced selection mode, the following filters should be on the filter panel:
1. by the first tag (selection from the collection);
2. by the class of the first tag (selection from the collection);
3. by type of input tag (selection from the collection);
4. by the value of the input tag (selection from the collection);
5. by blocking the input tag (choice of yes / no values);
6. by availability only for reading the input tag (choice of yes / no values).
Additionally
* It is encouraged that the filter react to changes immediately , without the need for a separate click on the search button.
* It is advisable to do everything carefully, deal with css-properties and provide such that the layout of individual lines of the list does not go due to differences in the tags contained in them.
** Implement the selection of all the necessary elements with one selector - immediately select the desired contents of the rows, and do not check each row for the presence of options selected in the filters.
*** Try to provide for the selection of several values for filters by the first tag, by the class of the first tag, by the type of input tag, by the value of the input tag. The filter by the first tag, the type of the input tag or the value of the input tag should select strings with any of the values selected in it (in each filter individually; the general requirement of the advanced mode for matching strings to all filters at once is preserved).
I hope the reader will find the described task will benefit in self-development or seem suitable for someone to recommend.
I wish you all success in your professional career!
All Articles