JSFiddle - React, Tailwind, and code Playground

by moku23

HTML

<html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OFP Products</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="/static/css/style.css" rel="stylesheet" crossorigin="anonymous">
        <link href="/static/css/sprite_flags.css" rel="stylesheet" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style type="text/css">.fc-ab-root { display: none !important } body > div.fc-ab-root { display: none !important } .fbs-auth__container.fbs-auth__adblock { display: none !important } .overlay-34_Kj { display: none !important } .wrapper-3AzfF { display: none !important } .fEy1Z2XT { display: none !important } .nytc---modal-window---windowContainer.nytc---modal-window---isShown.nytc---shared---blackBG { display: none !important } .tp-modal { display: none !important } .tp-backdrop.tp-active { display: none !important } .c-nudge__container.c-gate__container { display: none !important } .c-nudge__container.c-regGate__container { display: none !important } .css-n7r8pg { display: none !important } .css-1bd8bfl { display: none !important } .overlay__59af11e2 { display: none !important } .tp_modal { display: none !important } .tp-backdrop.tp-active { display: none !important } div[class^='sp_message_container'] { display: none !important }...

CSS

body { 
  background: lightblue url("https://client.ofpfunding.com/assets/images/sfondo.jpg") no-repeat fixed center; 
}

#progressBarContainer {
    width: 200px;
    background-color: white;
    padding: 2px;
    border-radius: 5px;
    margin-top: 10px;
}

#progressBar {
    height: 5px;
    width: 100%;
    background-color: red;
    text-align: center;
    line-height: 5px;
    color: white;
    border-radius: 5px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Seleziona tutte le celle dei prezzi
    const priceCells = document.querySelectorAll('td.bgOpacita.text-center, td.text-center');

    priceCells.forEach(cell => {
        // Estrai il prezzo corrente dalla cella (assumendo che il prezzo sia sempre in formato "XXX USD")
        const currentPriceText = cell.textContent.trim(); // "185 USD"
        const matches = currentPriceText.match(/(\d+) USD/);

        if (matches) {
            const currentPrice = parseInt(matches[1], 10);
            // Calcola il nuovo prezzo con uno sconto del 30%
            const discountedPrice = currentPrice - (currentPrice * 0.30);
            // Arrotonda a due cifre decimali per il prezzo scontato
            const newPriceText = `${discountedPrice.toFixed(2)} USD`;

            // Crea lo span per il prezzo vecchio barrato
            const oldPrice = document.createElement('span');
            oldPrice.style.textDecoration = 'line-through';
            oldPrice.style.marginRight = '5px';
            oldPrice.textContent = `${currentPrice} USD`;

            // Crea lo span per "30% OFF" in verde e lo mette in un div per andare a capo
            const discountDiv = document.createElement('div');
            const discountText = document.createElement('span');
            discountText.style.color = '#39e600';
            discountText.textContent = '30% OFF';
            discountDiv.appendChild(discountText);

            // Crea un altro div per il nuovo prezzo per mantenerlo sulla stessa linea dello sconto
            const priceDiv = document.createElement('div');
            priceDiv.textContent = newPriceText; // Aggiungi il nuovo prezzo nel div

            // Pulisci la cella e inserisci il prezzo vecchio, il div dello sconto e il div del nuovo prezzo
            cell.textContent = ''; // Pulisci il contenuto della cella
            cell.appendChild(oldPrice); // Aggiungi il prezzo vecchio
           ...