summaryrefslogtreecommitdiff
path: root/rannak/mangud/arimees/muusika
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/arimees/muusika')
-rw-r--r--rannak/mangud/arimees/muusika/index.html20
-rw-r--r--rannak/mangud/arimees/muusika/script.js41
-rw-r--r--rannak/mangud/arimees/muusika/style.css24
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;