How To Make One-Click Responsive Preview for Your Website

<script>
document.addEventListener("DOMContentLoaded", function() {
    const body = document.body;
    const buttons = document.querySelectorAll(".btn");
    
function setActive(activeButton) {
     // Remove active class from all buttons
    buttons.forEach(btn => {
    btn.classList.remove("active");
    });
    // Add active class to clicked button
    activeButton.classList.add("active");
}
            
document.getElementById("btn-desktop").addEventListener("click", function() {
    body.className = ''; // Remove all view classes
   setActive(this);
});
            
document.getElementById("btn-tablet").addEventListener("click", function() {
    body.className = 'tablet-view'; // Set only tablet-view class
    setActive(this);
});
            
document.getElementById("btn-mobile").addEventListener("click", function() {
    body.className = 'mobile-view'; // Set only mobile-view class
    setActive(this);
    });
});
</script>

<div class="iframe-wrapper">
    <iframe id="sitePreview" class="preview-frame" src="https://kitpapa.net/recipepro/"></iframe>
</div>