LP Components

    <section class="calculator">
      <h2>Estimate Your Earnings</h2>

      <div class="calculator-container">
        <div class="calculator-info">
          <div class="slider-container">
            <h3>
              Invested price
            </h3>
            <h2 id="value"></h2>
            <input class="range-slider" type="range" min="100" max="100000" step="50" value="100" id="range" />
          </div>

          <div class="investing-options">
            <label class="option selected">
              <input type="radio" name="investment" value="oil" hidden checked />
              <img src="./images/calculator-option-1.webp" alt="oil" loading="lazy" />
              <div class="option-info">
                <h5>
                  AMZN
                </h5>
                <h6>
                  Amazon Inc
                </h6>
              </div>
            </label>

            <label class="option">
              <input type="radio" name="investment" value="gold" hidden />
              <img src="./images/calculator-option-2.webp" alt="gold" loading="lazy" />
              <div class="option-info">
                <h5>
                  TSLA
                </h5>
                <h6>
                  Tesla Inc
                </h6>
              </div>
            </label>

            <label class="option">
              <input type="radio" name="investment" value="silver" hidden />
              <img src="./images/calculator-option-3.webp" alt="silver" loading="lazy" />
              <div class="option-info">
                <h5>
                  GOOGL
                </h5>
                <h6>
                  Alphabet Inc
                </h6>
              </div>
            </label>

            <label class="option">
              <input type="radio" name="investment" value="mercadolivre" hidden />
              <img src="./images/calculator-option-4.webp" alt="mercado-livre" loading="lazy" />
              <div class="option-info">
                <h5>
                  AAPL
                </h5>
                <h6>
                  Apple Inc
                </h6>
              </div>
            </label>

            <label class="option">
              <input type="radio" name="investment" value="petrobras" hidden />
              <img src="./images/calculator-option-5.webp" alt="petrobras" loading="lazy" />
              <div class="option-info">
                <h5>
                  MARA
                </h5>
                <h6>
                  Marathon
                </h6>
              </div>
            </label>
          </div>
        </div>

        <div class="final-result">
          <h4>
            Your total profit could be
          </h4>
          <h3>$ <span id="calc-result"></span></h3>
          <button class="lp-action">
            Invest now
          </button>
        </div>
      </div>

      <p class="calc-disclaimer">
        This tool is for educational purposes only and does not predict or guarantee
        investment results. Market performance may vary and involves risks.
      </p>
    </section>
    
    //js
    <script type="text/javascript">
      //Calculator logic
      const range = document.getElementById("range");
      const investingValue = document.getElementById("value");

      investingValue.textContent = `$${Number(range.value).toLocaleString()}`;

      range.addEventListener("input", () => {
        investingValue.textContent = `$${Number(range.value).toLocaleString()}`;
      });

      const updateProgress = () => {
        const percent = ((range.value - range.min) / (range.max - range.min)) * 100;
        range.style.setProperty("--progress", `${percent}%`);
      };

      updateProgress();
      range.addEventListener("input", updateProgress);

      const result = document.getElementById("calc-result");
      const optionInputs = document.querySelectorAll(".option input");

      // keys must match the input "value" attributes
      const baseReturns = {
        oil: 140,
        gold: 125,
        silver: 130,
        mercadolivre: 180,
        petrobras: 160,
      };

      // get initially checked option
      let selectedInvestment = document.querySelector(
        'input[name="investment"]:checked',
      ).value;

      // option selection
      optionInputs.forEach((input) => {
        input.addEventListener("change", () => {
          document
            .querySelectorAll(".option")
            .forEach((option) => option.classList.remove("selected"));

          input.closest(".option").classList.add("selected");
          selectedInvestment = input.value;

          calculate();
        });
      });

      // slider change
      range.addEventListener("input", calculate);

      function calculate() {
        const investment = Number(range.value);
        const baseReturn = baseReturns[selectedInvestment];

        const totalReturn = (investment / 100) * baseReturn;

        result.textContent = `${Math.round(totalReturn).toLocaleString()}`;
      }

      calculate();

      //Overlay logic
      const actions = document.querySelectorAll(".lp-action");
      const overlay = document.getElementById("overlay-1");
      const form = document.getElementById("desktopForm");

      // store original parent & next sibling (to keep position)
      const originalParent = form.parentNode;
      const originalNextSibling = form.nextSibling;

      actions.forEach((action) => {
        action.addEventListener("click", () => {
          overlay.appendChild(form);
          overlay.classList.add("active");
        });
      });

      overlay.addEventListener("click", (e) => {
        if (e.target === overlay || e.target.closest("#close-popUpForm")) {
          overlay.classList.remove("active");

          // return form back to its original place
          if (originalNextSibling) {
            originalParent.insertBefore(form, originalNextSibling);
          } else {
            originalParent.appendChild(form);
          }
        }
      });
    </script>