Блог

 const initItServicesClick = () => {
  const selectElement = (element) => document.querySelector(element);
  const ItBtns = document.querySelectorAll('.home-btn');

  const title = document.getElementById('it-services-title');
  const text = document.getElementById('it-services-description');

  // Content to be changed:
  const webDevTitle = 'Website Development';
  const webDevText = 'Dive into our deep web development expertise to build any web solution your company feels the need to receive: from single-page websites to online stores and including everything in between.';

  const mobileAppTitle = 'Mobile Application';
  const mobileAppText = 'Get the best experience for your users utilizing the expertise of MangoLab mobile software developers. We build Android, iOS, and PWA solutions to meet all the modern requirements and utilize best practices in terms of functionality, security, scalability and other parameters.';

  const prodDesignTitle = 'Product Design';
  const prodDesignText = 'MangoLab delivers value to customers by focusing on their needs and understanding their behavior. We believe that the most effective way to introduce technology into an organization is by delivering a user-friendly interface and delivering outstanding user experience. Naturally, those are the services we focus on.';

  const analyticTitle = 'Analytics amp; SEO';
  const analyticText = 'Develop sustainable strategies to bring more traffic, boost sales and increase sign ups thanks to our team of experts that will optimize each part of your product.';

  const apiDevTitle = 'API Development';
  const apiDevText = 'At MangoLab, we deliver web API development services, enabling smooth integration with your existing apps. According to your specific requirements, we will help you to streamline business processes, while leveraging reliable and secure development approaches.';



  ItBtns.forEach(btn => {
      btn.addEventListener('click', (event) => {
          event.preventDefault();

          if (btn.innerText === 'WEB DEVELOPMENT') {
            title.innerText = webDevTitle;
            text.innerText = webDevText;
          } else if (btn.innerText === 'MOBILE APPLICATION') {
            title.innerText = mobileAppTitle;
            text.innerText = mobileAppText;
          } else if (btn.innerText === 'PRODUCT DESIGN') {
            title.innerText = prodDesignTitle;
            text.innerText = prodDesignText;
          } else if (btn.innerText === 'ANALYTICS amp; SEO') {
            title.innerText = analyticTitle;
            text.innerText = analyticText;
          } else if (btn.innerText === 'API DEVELOPMENT') {
            title.innerText = apiDevTitle;
            text.innerText = apiDevText;
          }
        }
      })
  })


}

export {
  initItServicesClick
};  

 <div class="left-side">
  <%= link_to "#", class: "home-btn home-btn-black active" do %>
    <span class="btn-title">WEB DEVELOPMENT</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">MOBILE APPLICATION</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">PRODUCT DESIGN</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">ANALYTICS amp; SEO</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">API DEVELOPMENT</span>
  <% end %>
</div>


<div class="right-side" id="it-services-text">
  <div class="it-services-head">
    <h3 id="it-services-title">Website Development</h3>
    <div id="it-services-mangobar"></div>
  </div>
  <p id="it-services-description">Dive into our deep web development expertise to build any web solution your company   feels the need to receive: from single-page websites to online stores and including everything in between.</p>
  <div class="it-services-btn">
    <%= link_to services_path, class: "home-small-btn" do %>
      <span>LEARN MORE</span>
    <% end %>
  </div>
</div>  

 const initItServicesClickV2 = () => {
  const selectElement = (element) => document.querySelector(element);
  const ItBtnsV2 = document.querySelectorAll('.home-btn-v2');


  ItBtnsV2.forEach(btn => {
    btn.addEventListener('click', (event) => {
      event.preventDefault();
      const textHeight = btn.nextElementSibling.offsetHeight;

      if (btn.classList != 'home-btn-black-v2') {
        selectElement('.home-btn-v2.home-btn-black-v2.active-v2').classList.remove('home-btn-black-v2', 'active-v2');
        btn.classList.add('home-btn-black-v2', 'active-v2');
      }
        
      if (!btn.parentElement.classList.contains('show-description')) {
        selectElement('.section.show-description').style.height = '44px';
        selectElement('.section.show-description').classList.remove('show-description');
        btn.parentElement.classList.add('show-description');
        
        if (btn.innerText === 'WEB DEVELOPMENT') {
          btn.parentElement.style.height = `${88   textHeight}px`;
        } else if (btn.innerText === 'MOBILE APPLICATION') {
          btn.parentElement.style.height = `${88   textHeight}px`;
        } else if (btn.innerText === 'PRODUCT DESIGN') {
          btn.parentElement.style.height = `${88   textHeight}px`;
        } else if (btn.innerText === 'ANALYTICS amp; SEO') {
          btn.parentElement.style.height = `${88   textHeight}px`;
        } else if (btn.innerText === 'API DEVELOPMENT') {
          btn.parentElement.style.height = `${88   textHeight}px`;
        }

      }

    })
  })


}

export { initItServicesClickV2 };  

  <div class="left-side">
  <%= link_to "#", class: "home-btn home-btn-black active" do %>
    <span class="btn-title">WEB DEVELOPMENT</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">MOBILE APPLICATION</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">PRODUCT DESIGN</span>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">ANALYTICS amp; SEO</span>>
  <% end %>
  <%= link_to "#", class: "home-btn" do %>
    <span class="btn-title">API DEVELOPMENT</span>
  <% end %>
</div>

 <div class="right-side" id="it-services-text">
  <div class="it-services-head">
    <h3 id="it-services-title">Website Development</h3>
    <div id="it-services-mangobar"></div>
  </div>
  <p id="it-services-description">Dive into our deep web development expertise to build any web solution your company feels the need to receive: from single-page websites to online stores and including everything in between.</p>
  <div class="it-services-btn">
    <%= link_to services_path, class: "home-small-btn" do %>
      <span>LEARN MORE</span>
    <% end %>
  </div>
</div>