DEV Community

Discussion on: How to make a website like CodePen

View post
Collapse
 
drgaud profile image
DrGaud •

Great work dude,

I did have a few problems when I was going through the tutorial. After a few tweaks; turns out ContentWindow is different across the vendors (shocking i know). So this adjustment made it work fine,

function compile(){
    let htmlContent = document.getElementById('html')
    let cssContent = document.getElementById('css')
    let jsContent = document.getElementById('js')
    let output = document.getElementById('output')
    output = output.contentWindow || output.contentDocument.document || output.contentDocument

    document.body.onkeyup= function(){
        let doc = output.document;

        doc.open();
        doc.write(
            `
             <style>${cssContent.value}</style>
             <body>${htmlContent.value}</body>
             <script>${jsContent.value}</script>   
            `
        )
        doc.close()

    }

}
Enter fullscreen mode Exit fullscreen mode

Thanks again for a really good demo project. I have always wondered how they made those kinda interactive playground sites. I thought it would be complicated, but it turns out, its really straightforward. Genius,

Collapse
 
stackfindover profile image
Stackfindover •

great job :)