Kashub's Code Barn - "zxv"

<style type="text/css">
#aRange {
        background: #E5E5E5;
        border: 0;
        border-radius: 8px;
        height: 7px;
        width: 356px;
        outline: none;
        transition: background 450ms ease-in;
        -webkit-appearance: none;
    }
</style>
 
<form style="max-width: 480px;">
    <div class="slidecontainer inner_container">
        <label for="aRange">
            <h4 class="label small_label">Ile obecnie płacisz za prąd?</h4>
        </label>
        <div class="value_container">
            <input type="range" min="100" max="1000" step="10" value="50" class="slider" id="aRange"
                style="max-width: 260px">
            <div id="sliderValue">100 zł</div>
        </div>
    </div>
 
    <div class="inner_container">
        <h3 class="label large_label">Jak to wygląda obecnie?</h3>
        <div class="value_container">
            <h4 class="label small_label">Rocznie wydajesz:</h4>
            <div id="yearCost" class="green_value">1200 zł</div>
        </div>
        <div class="value_container">
            <h4 class="label small_label">W ciągu roku zużywasz tyle energii:</h4>
            <div id="yearExpend" class="green_value">2 MW</div>
        </div>
    </div>
 
    <div class="inner_container">
        <h3 class="label large_label">Jakiej instalacji potrzebujesz?</h3>
        <div class="value_container">
            <h4 class="label small_label">Zalecana moc:</h4>
            <div id="instalationPower" class="green_value">2.44 kWp</div>
        </div>
        <div class="value_container">
            <h4 class="label small_label">Koszt instalacji:</h4>
            <div id="instalationCost" class="green_value">11468 zł</div>
        </div>
        <div class="value_container">
            <h4 class="label small_label">Po odliczeniu dotacji i ulg:</h4>
            <div id="summaryInstalationCost" class="green_value">6944 zł</div>
        </div>
    </div>
 
    <div class="inner_container">
        <h2 class="label large_label">OSZCZĘDNOŚĆ</h2>
        <div class="value_container">
            <h4 class="label small_label yellow_container">Zwrot instalacji w latach</h4>
            <div id="returnTime" class="green_container">3.3</div>
        </div>
        <div class="value_container">
            <h4 class="label small_label yellow_container">Twój zysk w ciągu 25 lat</h4>
            <div id="save" class="green_container">57858 zł</div>
        </div>
    </div>
</form>
 
<script type="text/javascript">
    const sliderElem = document.getElementById("aRange");
    const sliderValueElem = document.getElementById("sliderValue");
    const yearCostElem = document.getElementById("yearCost");
    const yearExpendElem = document.getElementById("yearExpend");
    const instalationPowerElem = document.getElementById("instalationPower");
    const instalationCostElem = document.getElementById("instalationCost");
    const summaryInstalationCostElem = document.getElementById("summaryInstalationCost");
    const returnTimeElem = document.getElementById("returnTime");
    const saveElem = document.getElementById("save");
 
 
    // Update
 
    sliderElem.oninput = function () {
        const sliderValue = this.value;
        const yearCost = sliderValue * 12;
        const yearExpend = yearCost / 600;
        const instalationPower = ((yearCost / 591.1) * 1.2).toFixed(2);
        const instalationCost = (instalationPower * 4700).toFixed(0)
        const summaryInstalationCost = (instalationCost - 3000 - ((instalationCost - 3000) * 0.18)).toFixed(0); //summaryInstalationCost
        const returnTime = (((instalationPower * 4750) - 5000 - (0.18 * ((instalationPower * 4750) - 5000))) / (instalationPower * 598.1 * 1.12)).toFixed(1); //returnTime
        const save = (instalationPower * 25 * 948.495).toFixed(0); //save
        const value = (this.value - this.min) / (this.max - this.min) * 100;
 
        sliderElem.innerHTML = `${sliderValue} zł`;
        yearCostElem.innerHTML = `${yearCost} zł`;
        yearExpendElem.innerHTML = `${yearExpend} MW`;
        instalationPowerElem.innerHTML = `${instalationCost} kWp`;
        instalationCostElem.innerHTML = `${instalationCost} zł`;
        summaryInstalationCostElem.innerHTML = `${summaryInstalationCost} zł`;
        returnTimeElem.innerHTML = returnTime;
        save.innerHTML = `${save} zł`;
 
        this.style.background = 'linear-gradient(to right, #3d8f01 0%, #3d8f01 ' + value + '%, #E5E5E5 ' + value + '%, #E5E5E5 100%)';
    };
 
</script>

| Foteliki samochodowe | | Opony specjalne | | Programista Trójmiasto | | Darmowe Blogi | | Skracacz adresów | | Gnieżdżewo | | Smutne Opisy | | Opisy GG | | Pionowe opisy |