Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Checkbox Highlighter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.6"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <style>
        /* Add some basic styling */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
​
        ul {
            list-style: none;
            padding: 0;
        }
​
        li {
            margin: 5px 0;
        }
​
        label {
            display: block;
        }
​
        .highlight {
            background-color: yellow;
        }
​
        .age-input {
            width: 30px
        }
    </style>
</head>
<body>
<div id="app">
    <h1>Мне <input type="text" class="age-input"> лет и я никогда не:</h1>
    <ul>
        <li v-for="(item, index) in itemList" :key="index" :class="{ 'highlight': item.checked }">
            <label>
                <input type="checkbox" v-model="item.checked"> {{ item.text }}
            </label>
        </li>
    </ul>
    <div>Твой результат: {{ selectedCount }}/{{ totalItems }}</div>
    <br>
    <button @click="exportAsImage">Сохранить картинкой</button>
    <br>
</div>
​
<script>
    const items = `выезжал за пределы своего города
пил алкоголь
ставил винду сам
был в ресторанах, кафе, фастфудах
целовался
курил
донатил
работал
пытался модно выглядеть и одеваться
разговаривал с кем-то по душам вживую
был в клубах
ебался
был в армии
дрался
брил свое тело хоть где-то кроме лица и шеи
поступал куда либо, кроме школы
грубил в лицо людям
публиковал свои фото в интернете
видел голую женщину вживую перед собой
матерился прилюдно
влюблялся в зд тнусов
дрочил жопу
подкатывал к девушкам
слушал музыку по подписке
слышал комплиментов от девушек o себе
готовил себе сам, кроме доширака, бутерородов и жаренной картошки
было друзей
гулял ночью
пил кофе
ходил в походы
катался на лыжах, роликах, велике, етс никогда не холил в _ без мамы
пробовал наркотики
бывал на крупных городских мероприятиях, кроме школьной линейки
регистрировался на сайтах знакомств
ходил в туалет куда-то кроме того что у меня дома и одного раза в городской поликлинике
пользовался банковскими картами
регистрировался на многих популярных саитах, вроде инстаграмма и телеграмма
покупал себе одежду сам
гулял по улице с кем-то еще кроме мамы
получал от учителей замечании о своем поведении
ел какой либо дорогой изысканной пищи
никогда не тратил на себя за раз больше 200 рублей
жил отдельно
слушал поп-музыку
намеренно имел топового ПК
фотографировался с кем-то намеренно
играл по сети с кем-то кроме двачеров
заводил разговоры с незнакомцами на улице
плавал
смотрел каких либо блогеров кроме Абу
ходил к врачу намеренно
дрочил на хуиту, вроде трапов, трупов, тентаклей и геев
перечил маме
пил энергетики
водил авто
обнимался с кем-то кроме мамы
танцевал намеренно
надевал женскую одежду
пытался постоять за себя в конфликтных ситуациях
вел дружескую беседу
играл в футбол
пил кока-колу
проводил новый год без мамы
занимался серьезным ремонтом
звонил кому-то коме как родственникам
был на пляже
мыл себе голову сам
имел серьезных травм
разговаривал с двачерами в жизни
чистил свой ноутбук от пыли
видел многих мест в своем городе
ходил на рыбалку
был в летних лагерях
пользовался службами доставки еды, в том числе с мамой
никогда не ходил в бани сауны
ехал в поезде
общался с вебкой и войсчатом
дрочил более двух раз в день
спал голым
пробовал мед
играл в скайрим и резидент эвил
заваривал чай
чистил картошку
катался на аттракционах
ел в школьной столовой
покупал пасскод на дваче
голосовал на выборах
просил денег у Головы
делал себе татуировок
делал сальто
кричал во все горло
был в метро
покупал игры в стиме
дрочил на анал
пользовался Wi-Fi
ел бургеров
ел грибы`
    const app = Vue.createApp({
        data() {
            return {
                itemList: items.split("\n").map(text => {
                    return {text: text, checked: false}
                }),
            };
        },
        computed: {
            selectedCount() {
                return this.itemList.filter(item => item.checked).length;
            },
            totalItems() {
                return this.itemList.length;
            },
        },
        methods: {
            exportAsImage() {
                html2canvas(document.querySelector('body')).then(function (canvas) {
                    let today = new Date().toISOString().slice(0, 10)
                    saveAs(canvas.toDataURL(), `Я никогда не ${today}.png`);
                })
            },
        }
    });
​
    function saveAs(uri, filename) {
​
        var link = document.createElement('a');
​
        if (typeof link.download === 'string') {
​
            link.href = uri;
            link.download = filename;
​
            //Firefox requires the link to be in the body
            document.body.appendChild(link);
​
            //simulate click
            link.click();
​
            //remove the link when done
            document.body.removeChild(link);
​
        } else {
            window.open(uri);
        }
    }
​
    app.mount('#app');
</script>
</body>
</html>
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers