{"id":27268823,"url":"https://github.com/shevchenkool/basic_dom_and_events","last_synced_at":"2026-01-23T03:52:55.140Z","repository":{"id":216647122,"uuid":"741894461","full_name":"ShevchenkoOl/basic_DOM_and_events","owner":"ShevchenkoOl","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-29T11:46:38.000Z","size":28,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-29T12:42:14.217Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShevchenkoOl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-11T10:32:32.000Z","updated_at":"2024-01-11T10:37:34.000Z","dependencies_parsed_at":"2024-01-11T16:34:59.677Z","dependency_job_id":"d75fb6b2-6e8e-4ca8-931f-3e0190fcb985","html_url":"https://github.com/ShevchenkoOl/basic_DOM_and_events","commit_stats":null,"previous_names":["shevchenkool/basic_dom_and_events"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fbasic_DOM_and_events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fbasic_DOM_and_events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fbasic_DOM_and_events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fbasic_DOM_and_events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShevchenkoOl","download_url":"https://codeload.github.com/ShevchenkoOl/basic_DOM_and_events/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248384203,"owners_count":21094686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-11T11:33:15.730Z","updated_at":"2026-01-23T03:52:55.065Z","avatar_url":"https://github.com/ShevchenkoOl.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Basic Methods for Handling Events and DOM in JavaScript\nThis repository contains code examples and explanations for 10 fundamental methods when working with event handlers and the DOM in JavaScript.\n\n\n* ### task-01\nIn HTML, there is a list of categories, __ul#categories__. Write a script that:\n  1. Will count and display in the console the number of categories in __ul#categories__, that is, __li.item__ elements;\n  2. For each __li.item__ element in the __ul#categories__ list, will find and display in the console the element header text ```\u003ch2\u003e``` tag and the number of elements in the category (all nested ```\u003cli\u003e```).\nAs a result, the following messages will be displayed in the console:\n```\nNumber of categories: 3\n\nCategory: Animals\nElements: 4\n\nCategory: Products\nElements: 3\n\nCategory: Technologies\nElements: 5\n```\n* ### task-02\nIn HTML, there is an empty __ul#ingredients__ list. ```\u003cul id=\"ingredients\"\u003e\u003c/ul\u003e``` In JavaScript, there is an array of strings:\n```\nconst ingredients = [\n  \"Potatoes\",\n  \"Mushrooms\",\n  \"Garlic\",\n  \"Tomatos\",\n  \"Herbs\",\n  \"Condiments\",\n];\n```\nWrite a script that, for each element in the ingredients array:\n1. Will create a separate ```\u003cli\u003e``` element. Be sure to use the __document.createElement()__ method;\n2. Will add the ingredient name as its text content;\n3. Will add the item class to the element;\n4. Then will insert all ```\u003cli\u003e``` to the __ul#ingredients__ list in a single operation.\n* ### task 03\nWrite a script to create a gallery of images from an array of data. There is a list, __ul.gallery__, in HTML:\n```\n\u003cul class=\"gallery\"\u003e\u003c/ul\u003e\n```\nUse an array of objects images to create ```\u003cimg\u003e``` elements nested in ```\u003cli\u003e```. Use template strings and the __insertAdjacentHTML()__ method to create markup.\n1. All gallery items must be added to DOM in one insert operation;\n2. Add at least some gallery design with flexboxes or grids using CSS classes.\n```\nconst images = [\n  {\n    url: \"https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?dpr=2\u0026h=750\u0026w=1260\",\n    alt: \"White and Black Long Fur Cat\",\n  },\n  {\n    url: \"https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?dpr=2\u0026h=750\u0026w=1260\",\n    alt: \"Orange and White Koi Fish Near Yellow Koi Fish\",\n  },\n  {\n    url: \"https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?dpr=2\u0026h=750\u0026w=1260\",\n    alt: \"Group of Horses Running\",\n  },\n];\n```\n* ### task-04\nThe counter consists of a span and buttons, which, when clicked, should increase and decrease its value by one.\n```\n\u003cdiv id=\"counter\"\u003e\n  \u003cbutton type=\"button\" data-action=\"decrement\"\u003e-1\u003c/button\u003e\n  \u003cspan id=\"value\"\u003e0\u003c/span\u003e\n  \u003cbutton type=\"button\" data-action=\"increment\"\u003e+1\u003c/button\u003e\n\u003c/div\u003e\n```\n1. Create a variable, ```counterValue```, that will store the current counter value and initialize it with ```0```;\n2. Add listeners for clicks on the buttons; inside them, increase or decrease the value of the counter;\n3. Update the interface with the new value of the variable ```counterValue```.\n* ### task-05\nWrite a script that, when typing in the __input#name-input__ input (input event), substitutes its current value into ___span#name-output___. If the input is empty, the span should display the __\"Anonymous\"__ string:\n```\n\u003cinput type=\"text\" id=\"name-input\" placeholder=\"Please enter your name\" /\u003e\n\u003ch1\u003eHello, \u003cspan id=\"name-output\"\u003eAnonymous\u003c/span\u003e!\u003c/h1\u003e\n```\n* ### task-06\nWrite a script that, when focus on input is lost (```blur``` event), checks its contents for the correct number of entered characters:\n```\n\u003cinput\n  type=\"text\"\n  id=\"validation-input\"\n  data-length=\"6\"\n  placeholder=\"Please enter 6 symbols\"\n/\u003e\n```\n1. The number of characters in the input is specified in its __data-length__ attribute;\n2. If the number of characters entered is correct, the input's ___border__ turns green, or red with a wrong number.\nTo add styles, use the ```valid``` and ```invalid``` CSS classes, which you can find in the task source files:\n```\n#validation-input {\n  border: 3px solid #bdbdbd;\n}\n\n#validation-input.valid {\n  border-color: #4caf50;\n}\n\n#validation-input.invalid {\n  border-color: #f44336;\n}\n```\n* ### task-07\nWrite a script that responds to changes in the value of __input#font-size-control__ (input event) and changes the inline style of __pan#text__ by updating the __font-size__ property. As a result, the text size will change responding to scrollbar dragging:\n```\n\u003cinput id=\"font-size-control\" type=\"range\" min=\"16\" max=\"96\" /\u003e\n\u003cbr /\u003e\n\u003cspan id=\"text\"\u003eAbracadabra!\u003c/span\u003e\n```\n* ### task-08\nWrite a script to manage the login form:\n```\n\u003cform class=\"login-form\"\u003e\n  \u003clabel\u003e\n    Email\n    \u003cinput type=\"email\" name=\"email\" /\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    Password\n    \u003cinput type=\"password\" name=\"password\" /\u003e\n  \u003c/label\u003e\n  \u003cbutton type=\"submit\"\u003eLogin\u003c/button\u003e\n\u003c/form\u003e\n```\n1. Form submission (__form.login-form__) must be processed on the __submit__ event;\n2. The page must not reload when the form is submitted;\n3. If the form has empty fields, display __alert__ saying that all fields must be filled in;\n4. As soon as the user has filled in all the fields and submitted the form, collect the field values into an object, where the field name will be the property name and the field value will be the property value. Use the __elements__ property to access form elements;\n5. Display the object with the entered data in the console and clear the values of the form fields using the reset method.\n* ### task-09\nWrite a script that changes the background colors of the ```\u003cbody\u003e``` element via inline style when clicking on __button.change-color__ and outputs the color value to __span.color__.\n```\n\u003cdiv class=\"widget\"\u003e\n  \u003cp\u003eBackground color: \u003cspan class=\"color\"\u003e-\u003c/span\u003e\u003c/p\u003e\n  \u003cbutton type=\"button\" class=\"change-color\"\u003eChange color\u003c/button\u003e\n\u003c/div\u003e\n```\nUse the __getRandomHexColor__ function to generate a random color:\n```\nfunction getRandomHexColor() {\n  return `#${Math.floor(Math.random() * 16777215)\n    .toString(16)\n    .padStart(6, 0)}`;\n}\n```\n* ### task-10\nWrite a script to create and clear a collection of elements. The user enters the number of elements into __input__ and clicks the __New__ button, after which a collection is rendered. When you click on the __Clear__ button, the collection is cleared.\n```\n\u003cdiv id=\"controls\"\u003e\n  \u003cinput type=\"number\" min=\"1\" max=\"100\" step=\"1\" /\u003e\n  \u003cbutton type=\"button\" data-create\u003eCreate\u003c/button\u003e\n  \u003cbutton type=\"button\" data-destroy\u003eDestroy\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"boxes\"\u003e\u003c/div\u003e\n```\nCreate a __createBoxes(amount)__ function that takes one parameter, a number. The function creates as many ```\u003cdiv\u003e``` as specified in __amount__ and adds them to __div#boxes__:\n1. The dimensions of the very first ```\u003cdiv\u003e``` are 30px by 30px;\n2. Each element after the first one should be 10px wider and higher than the previous one;\n3. All elements must have a random HEX background color. Use the ready-made __getRandomHexColor__ function to get a color:\n```\nfunction getRandomHexColor() {\n  return `#${Math.floor(Math.random() * 16777215)\n    .toString(16)\n    .padStart(6, 0)}`;\n}\n```\nCreate a __destroyBoxes()__ function that clears the contents of __div#boxes__, thereby removing all created elements.\n\n## Usage\nTo use this repository, follow these steps:\n1. Clone the repository to your local computer;\n2. Go to the repository directory;\n3. Run each task following the instructions described in the corresponding task file.\n\n## Author\nThis repository was created and maintained by [Oleksii Shevchenko](https://shevchenkool.github.io/portfolio/). Questions, suggestions, and feedback can be directed to [email](uzlabini@gmail.com) or [linkedin profile](linkedin.com/in/oleksii-shevchenko-535ab61b8).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Fbasic_dom_and_events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshevchenkool%2Fbasic_dom_and_events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Fbasic_dom_and_events/lists"}