HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1904x715

10.6 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html>
<head>
    <title>My Trading Journal</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial;
            background: #111;
            color: white;
            text-align: center;
        }

        input, select, button {
            padding: 8px;
            margin: 5px;
        }

        table {
            margin: auto;
            margin-top: 20px;
            border-collapse: collapse;
            width: 80%;
        }

        th, td {
            border: 1px solid #444;
            padding: 8px;
        }

        th {
            background: #222;
        }

        .profit { color: lime; }
        .loss { color: red; }
    </style>
</head>
<body>

<h1>📈 My Trading Journal</h1>

<h3>Add Trade</h3>

<input type="text" id="pair" placeholder="Pair (EURUSD)">
<select id="direction">
    <option value="Buy">Buy</option>
    <option value="Sell">Sell</option>
</select>
<input type="number" id="profit" placeholder="Profit / Loss">
<button onclick="addTrade()">Add Trade</button>

<h2>Total Profit: $<span id="total">0</span></h2>

<canvas id="equityChart" width="800" height="300"></canvas>

<h3>Trade History</h3>

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Pair</th>
            <th>Direction</th>
            <th>Profit/Loss</th>
        </tr>
    </thead>
    <tbody id="tradeTable"></tbody>
</table>

<script>
let trades = [];
let totalProfit = 0;

const ctx = document.getElementById('equityChart').getContext('2d');

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'Equity Curve',
            data: [],
            borderColor: 'cyan',
            fill: false
        }]
    }
});

function addTrade() {
    const pair = document.getElementById("pair").value;
    const direction = document.getElementById("direction").value;
    const profit = parseFloat(document.getElementById("profit").value);

    if (!pair || isNaN(profit)) {
        alert("Enter valid trade data");
        return;
    }

    trades.push(profit);
    totalProfit += profit;

    document.getElementById("total").innerText = totalProfit.toFixed(2);

    updateTable(pair, direction, profit);
    updateChart();

    document.getElementById("pair").value = "";
    document.getElementById("profit").value = "";
}

function updateTable(pair, direction, profit) {
    const table = document.getElementById("tradeTable");
    const row = table.insertRow();

    row.insertCell(0).innerText = trades.length;
    row.insertCell(1).innerText = pair;
    row.insertCell(2).innerText = direction;

    const profitCell = row.insertCell(3);
    profitCell.innerText = profit.toFixed(2);

    if (profit >= 0) {
        profitCell.classList.add("profit");
    } else {
        profitCell.classList.add("loss");
    }
}

function updateChart() {
    chart.data.labels.push(trades.length);
    chart.data.datasets[0].data.push(totalProfit);
    chart.update();
}
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

74KB

Transfer Size

207KB

Content Size

806.0ms

Dom Content Loaded

904.0ms

First Paint

884.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests