diff --git a/01-show-one-element/QUESTIONS.md b/01-show-one-element/QUESTIONS.md index 658796e..5d4147d 100644 --- a/01-show-one-element/QUESTIONS.md +++ b/01-show-one-element/QUESTIONS.md @@ -6,16 +6,16 @@ > If you click the link to reveal more text and then refresh the page, does the text remain revealed, or is it hidden again? Why? -Your reply here... +Kad uzspiežu uz pogu "More" tālāk parādas tekts, bet kad atjauninu lapu, tas teksts atkal pazūd, parādas atkal poga "More". --- > Remove `window.addEventListener("load", function(){` (and the closing `})`) from **global.js**. Does the link still reveal the text? What is the purpose of this code that you've removed? -Your reply here... +Lai skripts varētu strādāt, lapai ir pilnīgi jāielādējas, tāds un ir mērķis šajai koda daļai. --- > Describe the the `addEventListener` method. (Remember that there is a specific, technical, methodical way to describe methods. Your reply should match that format.) -Your reply here... +Šī metode mērķa objektam reģistrē notikuma apdarinātāju, kuram tiek izsaukts notikums. diff --git a/01-show-one-element/global.js b/01-show-one-element/global.js index a70fa8c..eb04793 100644 --- a/01-show-one-element/global.js +++ b/01-show-one-element/global.js @@ -1,17 +1,10 @@ window.addEventListener("load", function(){ - // Here is some pseudo-code to help you get started: +var moreText = document.getElementById("more_text_content"); +var moreLink = document.getElementById("more_text_link") - // 1. Get the DOM element which will be clicked. - - // 2. Add a listener for the 'click' event onto that element. - - // 3. The block for the listener should get the DOM - // element containing the text to reveal. - - // 4. Modify that DOM element's style to change it's 'display' - // from a hidden value to a shown value. - - // 5. Also modify the DOM to hide the "More info..." link. - +moreLink.addEventListener('click', function(){ + moreText.style.display = 'initial'; + moreLink.style.display = 'none'; + }); }); \ No newline at end of file diff --git a/02-hide-many-elements/QUESTIONS.md b/02-hide-many-elements/QUESTIONS.md index 2878485..d1f70b1 100644 --- a/02-hide-many-elements/QUESTIONS.md +++ b/02-hide-many-elements/QUESTIONS.md @@ -6,10 +6,10 @@ > How did you go about selecting the DOM elements to hide? Describe the "contract" for that function. -Your reply here... +Jus jāizmanto .getElementsByClassName(). Laukā () jūs norādāt, kuru klasi vēlaties kolekcionēt. Tas atgriezīs kolekciju, un jums ir jāpārskata kolekcija, lai paslēptu visus tajā esošos elementus. --- > Describe how you were able to hide each element. Were you able to do it as one operation, or did you use a loop of some kind? Describe the "contracts" that were utilized to accomplish your goal. -Your reply here... \ No newline at end of file +Lai pārvietotos pa savāktajiem elementiem, tika izmantota cilpa. Bija jānorāda cikla lielums un kas jādara katram klases atribūtam. diff --git a/02-hide-many-elements/global.js b/02-hide-many-elements/global.js new file mode 100644 index 0000000..a180211 --- /dev/null +++ b/02-hide-many-elements/global.js @@ -0,0 +1,9 @@ +window.onload = function() { + var hide_it = document.getElementById("button"); + hide_it.addEventListener("click", function(){ + var things_to_hide = document.getElementsByClassName("hide_me"); + for (var i = 0; i < things_to_hide.length; i++) { + things_to_hide[i].style.display = "none"; + } + }); +}; \ No newline at end of file diff --git a/03-show-many-elements/index.html b/03-show-many-elements/index.html new file mode 100644 index 0000000..110f9c5 --- /dev/null +++ b/03-show-many-elements/index.html @@ -0,0 +1,23 @@ + + + + DOM Atomic 03 + + + + +
+ I have the class "show_me", and will stick around even after you click the button at the bottom. +
+ +
+ I have the class "hide_me"; I should disappear when you click the button at the bottom. +
+ +
+ I'm also part of the "hide_me" class, and should also disappear. +
+ + + + \ No newline at end of file diff --git a/03-show-many-elements/main.js b/03-show-many-elements/main.js new file mode 100644 index 0000000..880dc7f --- /dev/null +++ b/03-show-many-elements/main.js @@ -0,0 +1,10 @@ +window.addEventListener('load', function(){ + const Show = document.getElementsByClassName('show_me'); + const Button = document.getElementById("button"); + + Button.addEventListener('click', function(){ + Array.from(Show).forEach((e) => { + e.style.display = "initial"; + }) + }); +}); \ No newline at end of file diff --git a/04-toggle-many-elements/global.js b/04-toggle-many-elements/global.js index 1df9d74..07439b7 100644 --- a/04-toggle-many-elements/global.js +++ b/04-toggle-many-elements/global.js @@ -1 +1,15 @@ -// Your JavaScript goes here. \ No newline at end of file +// Your JavaScript goes here. +window.addEventListener('load', function(){ + const content_toggle = document.getElementsByClassName("toggle_me"); + const button_toggle = document.getElementById("button"); + + button_toggle.addEventListener('click', function(){ + Array.from(content_toggle).forEach((elements) => { + if(elements.style.display == 'flex') { + elements.style.display = 'none' + }else{ + elements.style.display = 'flex' + } + }); + }); +}); \ No newline at end of file diff --git a/05-toggle-elements-of-dom-path/global.js b/05-toggle-elements-of-dom-path/global.js index 1df9d74..f0264c4 100644 --- a/05-toggle-elements-of-dom-path/global.js +++ b/05-toggle-elements-of-dom-path/global.js @@ -1 +1,14 @@ -// Your JavaScript goes here. \ No newline at end of file +window.addEventListener('load', function(){ + const toggleable_content = document.querySelectorAll('.second_five li'); + const toggle_button = document.getElementById("toggle_button"); + + toggle_button.addEventListener('click', function(){ + toggleable_content.forEach((elements) => { + if(elements.style.display == 'list-item') { + elements.style.display = 'none' + } else { + elements.style.display = 'list-item' + } + }); + }); +}); \ No newline at end of file diff --git a/06-detecting-typed-input/global.js b/06-detecting-typed-input/global.js index 1df9d74..eecfe63 100644 --- a/06-detecting-typed-input/global.js +++ b/06-detecting-typed-input/global.js @@ -1 +1,8 @@ -// Your JavaScript goes here. \ No newline at end of file +window.addEventListener('load', function(){ + const name_field = document.getElementById("full_name"); + + name_field.addEventListener("keyup", function() { + const greeting_div = document.getElementById("greeting"); + greeting_div.innerHTML = ("Hello there, " + name_field.value + "!"); + }); +}); \ No newline at end of file diff --git a/07-automatic-tabbing-fields/global.js b/07-automatic-tabbing-fields/global.js index 1df9d74..a3de357 100644 --- a/07-automatic-tabbing-fields/global.js +++ b/07-automatic-tabbing-fields/global.js @@ -1 +1,26 @@ -// Your JavaScript goes here. \ No newline at end of file +window.addEventListener('load', function(){ + const first = document.getElementById('first'); + const second = document.getElementById('second'); + const third = document.getElementById('third'); + + first.addEventListener('keyup', function(){ + typed = first.value.length; + max = parseInt(first.getAttribute("maxlength")); + + if (typed === max){ + second.focus(); + } + }); + + second.addEventListener('keyup', function(){ + typed = second.value.length; + max = parseInt(second.getAttribute("maxlength")); + + if (typed === max){ + third.focus(); + } + }); + if (typed_characters === max_characters) { + end_numbers.focus(); + } +}); \ No newline at end of file