diff options
Diffstat (limited to 'rannak/mangud/arimees')
-rw-r--r-- | rannak/mangud/arimees/muusika/index.html | 20 | ||||
-rw-r--r-- | rannak/mangud/arimees/muusika/script.js | 41 | ||||
-rw-r--r-- | rannak/mangud/arimees/muusika/style.css | 24 |
3 files changed, 72 insertions, 13 deletions
diff --git a/rannak/mangud/arimees/muusika/index.html b/rannak/mangud/arimees/muusika/index.html index 6a1e1ce..ef453ec 100644 --- a/rannak/mangud/arimees/muusika/index.html +++ b/rannak/mangud/arimees/muusika/index.html @@ -19,6 +19,7 @@ <p> Vajuta lingile ja vaata muusikavideosid youtubes ning seejärel järjesta vastavalt oma eelistustele. + <br> Põhjenda oma esikohta tekstiväljal. </p> @@ -97,10 +98,14 @@ </a> </div> + + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/EestlaneOlen.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> @@ -127,10 +132,13 @@ </a> </div> + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/TerePerestroika.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> @@ -157,10 +165,13 @@ </a> </div> + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/OhkKonnibTanaval.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> @@ -187,10 +198,13 @@ </a> </div> + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/MagedeHaal.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> @@ -217,10 +231,13 @@ </a> </div> + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/TulgeKoik.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> @@ -247,10 +264,13 @@ </a> </div> + <textarea name="pohjendus" placeholder="Põhjendus..." rows="2"></textarea> + <!-- <audio controls> <source src="laulud/AppiMaVajanArmastust.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> + --> </div> </li> diff --git a/rannak/mangud/arimees/muusika/script.js b/rannak/mangud/arimees/muusika/script.js index 0bcaae0..85d0292 100644 --- a/rannak/mangud/arimees/muusika/script.js +++ b/rannak/mangud/arimees/muusika/script.js @@ -4,8 +4,12 @@ document.addEventListener('DOMContentLoaded', () => { }); -const selectors = document.querySelectorAll('select'); +allPohjendatud = false; +allSelected = false; + +// EventListenres +const selectors = document.querySelectorAll('select'); for(el of selectors){ el.addEventListener('change', () => { @@ -16,13 +20,46 @@ for(el of selectors){ } if (selected.length == 6) + allSelected = true; + else + allSelected = false; + + if (allPohjendatud && allSelected) + moveOnEnable(); + }); +} + + + +const pohjendused = document.querySelectorAll('textarea'); +for(el of pohjendused){ + el.addEventListener('input', () => { + + let pohjendatud = new Array(); + for (el of pohjendused){ + if (!pohjendatud.includes(el) && el.value != '') + pohjendatud.push(el); + } + + if (pohjendatud.length == 6) + allPohjendatud = true; + else + allPohjendatud = false; + + if (allPohjendatud && allSelected) moveOnEnable(); }); } -// If All Else Done + + + + + + +// If All Done function moveOnEnable(){ const btn = document.querySelector(".moveOn"); diff --git a/rannak/mangud/arimees/muusika/style.css b/rannak/mangud/arimees/muusika/style.css index 3b7e248..cbc77a9 100644 --- a/rannak/mangud/arimees/muusika/style.css +++ b/rannak/mangud/arimees/muusika/style.css @@ -101,6 +101,12 @@ li:nth-child(even){background-color: #eee8;} li:hover{transform: scale(1.03);} +textarea{ + width: 80%; + margin: 0 .7rem; +} + + .laul{ display: flex; align-items: center; @@ -108,13 +114,6 @@ li:hover{transform: scale(1.03);} min-width: 100%; } -.laulInner { - display: flex; - justify-content: space-between; - -} - - .info { padding-left: 1rem; @@ -123,19 +122,22 @@ li:hover{transform: scale(1.03);} width: 50%; } -.audioWrap{ - width: 50%; -} - .info a { text-decoration: underline; font-weight: bold; color: #000; } + + + .info h2{font-size: 1.2rem;} select{margin-right: 1rem;} + + + + select { -webkit-appearance: menulist-button; height: 3rem; |