<div class="c-poll">
<h2 class="c-poll__title">Frage des Tages</h2>
<p class="c-poll__content">
<h2 class="c-poll__question">
Löst ein neuer Autohof bei Bockenem die Probleme?
</h2>
<div class="c-poll__resultList">
<span class="c-poll__answer">Nein, ich denke, das ist zu wenig.</span>
<div class="c-poll__progressBar">
<div class="c-poll__bar" style="width: 34.3%"></div>
</div>
<span class="c-poll__metadata">34.3% (53 Stimmen)</span>
</div>
<div class="c-poll__resultList">
<span class="c-poll__answer">Ja, sollte schon einen großen Unterschied machen.</span>
<div class="c-poll__progressBar">
<div class="c-poll__bar" style="width: 65.6%"></div>
</div>
<span class="c-poll__metadata">65.6% (101 Stimmen)</span>
</div>
<span class="c-poll__footText">Diese Umfrage ist nicht repräsentativ.</span>
</div>
<div class="c-poll">
<h2 class="c-poll__title">Frage des Tages</h2>
<p class="c-poll__content">
<h2 class="c-poll__question">
{{ question }}
</h2>
{% for item in items %}
<div class="c-poll__resultList">
<span class="c-poll__answer">{{ item.answer }}</span>
<div class="c-poll__progressBar" >
<div class="c-poll__bar" style="width: {{ item.percentage }}%"></div>
</div>
<span class="c-poll__metadata">{{ item.percentage }}% ({{ item.votes }} {% if item.votes > 1 %}Stimmen{% else %}Stimme{% endif %})</span>
</div>
{% endfor %}
<span class="c-poll__footText">Diese Umfrage ist nicht repräsentativ.</span>
</div>
{
"question": "Löst ein neuer Autohof bei Bockenem die Probleme?",
"descriptionText": "Die Parkplätze an den sind fasdoftmals dicht. Die Brummies weichen auch in Wohn- und aus, um ihre Ruhezeiten einzuhalten Die Parkplätze an den Autobahnen sind oftmals dicht. Die Brummies weichen auch in Wohn- und Gewerbegebiete aus, um ihre Ruhezeiten einzuhalten",
"moreInfoLinkText": "mehr Infos >",
"moreInfoLink": "#",
"submitText": "SENDEN",
"additionalClasses": "",
"items": [
{
"answer": "Nein, ich denke, das ist zu wenig.",
"percentage": 34.3,
"votes": 53
},
{
"answer": "Ja, sollte schon einen großen Unterschied machen.",
"percentage": 65.6,
"votes": 101
}
],
"name": "radioAnswers"
}
class Poll {
constructor(element) {
this.element = element;
this.submitButton = document.getElementById('simplePollVote');
const form = this.element.getElementsByTagName('form')[0];
const radios = form.getElementsByClassName('o-form__input--radio');
for (let i = 0; i < radios.length; i += 1) {
radios[i].addEventListener('change', () => {
this.removeClass('c-button--disabled');
this.enableButton(this.submitButton);
});
}
}
removeClass(className) {
this.submitButton.classList.remove(className);
}
enableButton(button) {
this.button = button;
this.button.disabled = false;
}
}
export default Poll;
.c-poll {
background-color: $color-grey-lightest;
padding: 1rem;
&__resultList {
margin-bottom: 1rem;
margin-top: .5rem;
}
&__answer {
font-weight: $font-weight-bold;
line-height: .3;
}
&__progressBar {
border: 1px solid $color-black;
height: 1rem;
margin-bottom: .2rem;
margin-top: .3rem;
width: 100%;
}
&__bar {
background-color: $color-yellow;
height: 100%;
width: 0;
}
&__metadata {
font-size: $font-size-m;
}
&__footText {
font-size: $font-size-s;
}
&__title {
font-size: $font-size-xl;
font-weight: $font-weight-bold;
margin-left: -1rem;
padding-left: 1rem;
&::after {
border-bottom: 2px solid $color-yellow;
content: '';
display: block;
margin-bottom: rem-calc(10);
margin-left: -1rem;
margin-top: rem-calc(24);
width: rem-calc(168);
}
}
&__question {
color: $color-grey;
font-size: $font-size-xl;
font-weight: 600;
line-height: 1.4;
margin-bottom: 1.5rem;
}
&__list {
color: $color-grey;
font-weight: 500;
list-style-type: none;
margin-left: -2rem;
}
&__descriptionText {
font-size: $font-size-m;
}
&__submitButton {
margin-top: 1rem;
}
}
There are no notes for this item.