Голосование в Taplink через Google формы

Код написан так, чтобы вам не пришлось его править практически вообще, заменить нужно только ссылку на вашу гугл Таблицу (код берет уже готовые данные, которые туда закидывает гугл форма). HTML-кода в итоге всего 1 строчка :D

Видеоинструкция: https://www.youtube.com/watch?v=ehPD8PgrW2E

Гугл формы сделать тут: https://docs.google.com/forms/u/1/

Обязательные настройки в форме:

1. Запретить давать ответы повторно
2. Передача ответов в гугл форму из вкладки "ответы"

В гугл форме необходимо скопировать все данные с примера https://docs.google.com/spreadsheets/d/1w3SZAgWZhlG4m4uib2N1bvC5NPXehd-ogX0RUfr9YpI/edit#gid=1098202011

В столбцах "голосов", "отлов для фетча", "начало отлова", "конец отлова", "счетчик" должно быть столько строк, сколько пунктов для голосования. В остальных достаточно одной строчки. В столбце "голосов" надо заменить текст моих вариантов на текст ваших вариантов

Во встройке гугл формы нужно поменять ширину на 100%, чтобы смотрелось красиво

Если вам нужно перестилизовать выходные данные или вам нужен исполнитель для всех этих штук, а самому лень, можете написать @Sipilin_j

Код:

<div class="survey"></div>

<style>
.survey {
  background: rgba(255,255,255,0.7);
  padding: 20px 15px;
  border-radius: 10px;
}
.diagramm {
width: 100px;
  height: 10px;
  position: relative;
  background: rgba(0,0,0,0.1);
  border-radius:3px;
  overflow: hidden;
}
.survey .counter {
font-weight: 900;
  font-family: sans-serif;
  font-style: italic;
  text-decoration: underline;
}
.diagramm span {
position: absolute;
  left: 0px;
  top:0px;
  height: 100%;
  width:0px;
 background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient--mov 15s ease infinite;
}

@keyframes gradient--mov {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

</style>

<script>
   document.addEventListener('DOMContentLoaded', () => {
fetch('https://docs.google.com/spreadsheets/d/1iIYPBwFLPpMn_K3DRvUecJ7XOQItuiz50Z32xVVvjaY/edit?resourcekey=null#gid=62901705').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
  var subStr = html.match('totalstart(.*)totalend');
  var number = subStr[1]; //всего пунктов опроса
 
for(var i = 0, dl = number; i < dl; i++) {
  var number = html.match('catchst'+[i]+'(.*)catchend'+[i]+'');  
  
var word = 'catchend'+[i]+'';
var index = number[1].indexOf(word);
var result = number[1].slice(0, index);
    var percents = html.match('percentstart(.*)percentend');
  var percent = percents[1] //всего голосов
  document.querySelector('.survey').insertAdjacentHTML('afterbegin','<p class="text variant-'+[i]+'">За первый вариант голосов: <span>'+result+'</span></p>')
  document.querySelector('.survey').insertAdjacentHTML('afterbegin','<div style="display:flex; align-items: center;"><div class="diagramm"><span style="width: '+Math.round((result/percent)*100)+'%;"></span></div><p class="counter" style="margin:0 0 0 10px;">'+Math.round((result/percent)*100)+'%</p></div>')
console.log('всего:' + percent)
}
 
 
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});
});

</script>