Viewing File: /home/ubuntu/ridge-crop-landing-ui-revamp/economic-calendar.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MT5 Trading Economic Calendar | The Ridgecorp</title>
    <meta name="author" content="The Ridgecrop">
    <meta name="description" content="Enhance your MT5 trading strategy with The Ridgecorp's economic calendar - featuring real-time alerts for high-impact financial events.   ">
    <meta name="keywords" content="">
    <link rel="canonical" href="https://revamp.theridgecorp.com/economic-calendar.html">
    <meta name="google-site-verification" content="-adgtVHJDe7s3ZpxafBu1Wrh7gvXzpUUCafGAm2j2V8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta property="og:title" content="MT5 Trading Economic Calendar | The Ridgecorp" />
    <meta property="og:description" content="Enhance your MT5 trading strategy with The Ridgecorp's economic calendar - featuring real-time alerts for high-impact financial events.    " />
    <meta property="og:image" content="assets/img/og-image.jpg" />

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/img/favicons/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicons/site.webmanifest">
    <link rel="mask-icon" href="assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#36d1dc">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- Animation CSS -->
    <link rel="stylesheet" href="assets/css/animate.css">

    <!-- Tabler Icon CSS -->
    <link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">

    <!-- Fontawesome Icon CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

    <!-- select CSS -->
    <link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">

    <!-- Owlcarousel CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

    <!-- Mobile CSS-->
    <link rel="stylesheet" href="assets/plugins/intltelinput/css/intlTelInput.css">
    <link rel="stylesheet" href="assets/plugins/intltelinput/css/demo.css">

    <!-- Feather CSS -->
    <link rel="stylesheet" href="assets/css/feather.css">

    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <div class="main-wrapper">
        <!-- Header -->
        <div id="header"></div>
        <!-- /Header -->

        <!-- Breadcrumb -->
        <div class="breadcrumb-bar text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-12">
                        <h2 class="breadcrumb-title mb-2">Economic Calendar</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-center mb-0">
                                <li class="breadcrumb-item">Home</li>
                                <li class="breadcrumb-item">Trading Conditions</li>
                                <li class="breadcrumb-item active" aria-current="page">Economic Calendar</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="breadcrumb-bg">
                    <img src="assets/img/bg/breadcrumb-bg-01.png" class="breadcrumb-bg-1" alt="Img">
                    <img src="assets/img/bg/breadcrumb-bg-02.png" class="breadcrumb-bg-2" alt="Img">
                </div>
            </div>
        </div>
        <!-- /Breadcrumb -->

        <!-- Page Wrapper -->
        <div class="section">
            <div class="content p-0">
                <div class="container">
                    <!-- TradingView Widget BEGIN -->
                    <div class="tradingview-widget-container">
                        <div class="tradingview-widget-container__widget"></div>
                        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/"
                                rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on
                                    TradingView</span></a></div>
                        <script type="text/javascript"
                            src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
                                [{
                                    "colorTheme": "light",
                                    "isTransparent": false,
                                    "width": "400",
                                    "height": "550",
                                    "locale": "en",
                                    "importanceFilter": "-1,0,1",
                                    "countryFilter": "ar,au,br,ca,cn,fr,de,in,id,it,jp,kr,mx,ru,sa,za,tr,gb,us,eu"
                                }]
                            </script>
                    </div>
                    <!-- TradingView Widget END -->
                </div>
            </div>
        </div>
        <section class="section business-section bg-black">
            <div class="container">
                <div class="row align-items-center bg-01 justify-content-center">
                    <div class="col-md-10 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="section-header mb-md-0 mb-4">
                            <h2 class="text-white display-4 text-center">Create Your <span
                                    class="text-linear-primary">Live
                                    Account</span> Today!</h2>
                            <p class="text-center">Join us now and experience lightning-fast trades with a true STP
                                broker.
                            </p>
                            <div class="d-flex justify-content-center">
                                <a href="" class="btn btn-linear-primary"><i class="ti ti-user-filled me-2"></i>Open an
                                    Account</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="section">
            <div class="container">
                <div class="contacts">
                   <div id="main-form"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div id="footer"></div>
    <!-- /Footer -->

    <!-- Jquery JS -->
    <script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script src="assets/js/jquery-3.7.1.min.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap.bundle.min.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="assets/js/common.js"></script>

    <!-- Wow JS -->
    <script src="assets/js/wow.min.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- Owlcarousel Js -->
    <script src="assets/plugins/owlcarousel/owl.carousel.min.js"
        type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- select JS -->
    <script src="assets/plugins/select2/js/select2.min.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- counterup JS -->
    <script src="assets/js/cursor.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- Mobile Input -->
    <script src="assets/plugins/intltelinput/js/intlTelInput.js"
        type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>
    <script src="assets/plugins/ityped/index.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- Validation-->
    <script src="assets/js/validation.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <!-- Script JS -->
    <script src="assets/js/script.js" type="ca9bfd9fa0bbcb80cf7e49fb-text/javascript"></script>

    <script src="../../cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"
        data-cf-settings="ca9bfd9fa0bbcb80cf7e49fb-|49" defer></script>
    <script>
        const API_KEY = '1VRsr8fdiPuzxEYHEP48AXpC4xpB70KS'; // Replace with your actual FMP API Key

        // Set default dates (today and 7 days ahead)
        const today = new Date().toISOString().split('T')[0];
        const nextWeek = new Date();
        nextWeek.setDate(nextWeek.getDate() + 7);
        const nextDate = nextWeek.toISOString().split('T')[0];

        document.getElementById('startDate').value = today;
        document.getElementById('endDate').value = nextDate;

        async function loadData() {
            const start = document.getElementById('startDate').value;
            const end = document.getElementById('endDate').value;
            const url = `https://financialmodelingprep.com/api/v3/economic_calendar?from=${start}&to=${end}&apikey=${API_KEY}`;

            const tbody = document.querySelector('#calendar tbody');
            tbody.innerHTML = '<tr><td colspan="7">Loading...</td></tr>';

            try {
                const res = await fetch(url);
                if (!res.ok) throw new Error('Network response was not ok');
                const data = await res.json();

                if (!Array.isArray(data) || data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="7">No events found for selected range.</td></tr>';
                    return;
                }

                tbody.innerHTML = '';
                data.forEach(event => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
          <td>${event.date || '-'}</td>
          <td>${event.country || '-'}</td>
          <td>${event.event || '-'}</td>
          <td>${event.actual ?? '-'}</td>
          <td>${event.estimate ?? '-'}</td>
          <td>${event.previous ?? '-'}</td>
          <td class="${getImpactClass(event.impact)}">${event.impact || '-'}</td>
        `;
                    tbody.appendChild(tr);
                });
            } catch (err) {
                console.error('Error loading data:', err);
                tbody.innerHTML = '<tr><td colspan="7">Failed to load data.</td></tr>';
            }
        }

        function getImpactClass(impact) {
            if (!impact) return '';
            const imp = impact.toLowerCase();
            if (imp.includes('low')) return 'impact-low';
            if (imp.includes('medium')) return 'impact-medium';
            if (imp.includes('high')) return 'impact-high';
            return '';
        }

        // Initial load
        loadData();
    </script>
</body>

</html>
Back to Directory File Manager