JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
        <!-- 1) Efekti Butona basarak başlatın. Efekt "highlight" ve/veya "shrink" class'ları arasında değişmelidir. Bu değişim her bir interval döngüsünde olmalıdır. ("effect" id' li div'e o anki aktif olan class eklenecektir.) -->
        <div>
            <button @click="startEffect">{‌{effectChangeText}}</button>
            <div id="effect" :class="currentEffect"></div>
        </div>

        <!-- 2) Birkaç tane CSS Class'ı üreterek bu Class'ları Array Syntax'ı ile aşağıdaki <div>' e ekleyiniz -->
        <div :class="[customStyle1, customStyle2]">Henüz bir class'ım yok :(</div>

        <!-- 3) Örnek birkaç tane Class üreterek (Ya da ürettiklerinizi kullanarak) <input> içerisine Class adı girerek hemen alttaki <div> elementine bu yazılan Class'ı eklemeyi yapınız. -->
        <div>
            <input type="text" @input="applyClientClass" placeholder="Bir class adı girin">
            <div :class="currentClientClass"> Sitiliniz buraya uygulandı </div>
        </div>

        <!-- 4) Kullanıcının Class isimlerini girebileceği iki adet <input> elementimiz var. Bunları kullanarak hemen alttaki <div> elementinin Class'larini attached etmesini sağlayınız  -->
        <div>
            <input type="text" @input="applyTwoClassInput1">
            <input type="text" @input="applyTwoClassInput2">
            <div :class="currentTwoClassCombine">{‌{currentTwoClassCombine}}</div>
        </div>

        <!-- 5) 3.Uygulamayı tekrarlayın. Fakat bu sefer Class Adı yerine Denk gelecek Style Kodlarını ekleyiniz.  -->
        <div>
            <input type="text" @input="applyCurrentStyleCode">
            <div :style="currentStyleCode">{‌{currentStyleCode}}</div>
        </div>

        <!-- 6) setInterval ve Style Binding kullanarak Basit bir progress bar üretin. Progress bar' ın çalışmasını buton'a basarak başlatın. -->
        <div>
            <button...

JavaScript

var app = new Vue({
            el: "#app",
            data: {
                currentEffect: "",
                currentEffectInterval: null,
                effectChangeText: "Efekti Başlat!",
                customStyle1: "customStyle",
                customStyle2: "customStyle2",
                currentClientClass: "",
                currentTwoClassInput1: "",
                currentTwoClassInput2: "",
                currentTwoClassCombine: "",
                currentStyleCode: "",
                progressBarValue: 0,
                progressBarInterval: null,
                startProgressBtnText: "Progress İşlemini Başlat!"
            },
            methods: {
                changeCurrentEffectAuto: function () {
                    if (this.currentEffect === "highlight")
                        this.currentEffect = "shrink";
                    else if (this.currentEffect === "shrink")
                        this.currentEffect = "highlight";
                    else
                        this.currentEffect = "highlight";
                },
                startEffect: function () {
                    if (this.currentEffectInterval === null) {
                        this.currentEffectInterval = setInterval(() => {
                            this.changeCurrentEffectAuto();
                        }, 100);
                        this.effectChangeText = "Efekti Durdur!";
                    } else {
                        clearInterval(this.currentEffectInterval);
                        this.currentEffectInterval = null;
                        this.effectChangeText = "Efekti Başlat!";
                    }
                },
                applyClientClass: function (e) {
                    this.currentClientClass = e.target.value;
                },
                applyTwoClassInput1: function (e) {
                    this.currentTwoClassInput1 = e.target.value;
                },
                applyTwoClassInput2: function (e) {
        ...