Using CodePen front-end designs in reactjs app

Question

If you download a codepen (using export), you get an index.html, style.css, and a script.js.

I'm having trouble figuring out how to work with the script.js file in React functional components. My initial thought was to use the <script src='#'> tag in index.html to import the styling script. This is causing issues because the script.js file references DOM elements, and the script is being called before the DOM loads.

See an example below ( https://codepen.io/danielkvist/pen/LYNVyPL ):

The html from the pen:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Slide Sign In/Sign Up form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
            <h2 class="form__title">Sign Up</h2>
            <input type="text" placeholder="User" class="input" />
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <button class="btn">Sign Up</button>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">Sign In</h2>
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <a href="#" class="link">Forgot your password?</a>
            <button class="btn">Sign In</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

And the script.js from the pen:

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");

signInBtn.addEventListener("click", () => {
    container.classList.remove("right-panel-active");
});

signUpBtn.addEventListener("click", () => {
    container.classList.add("right-panel-active");
});

fistForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());

I'd like to use a functional component like this:

import React from 'react'

const SlideSignInUp = () => {
    return(
        <>
        html from pen goes in here
        </>
    )
}

export default SlideSignInUp

Answer 1

You can just move whole .js code inside <head> section in html in <script> tag like:

<html>
<head>
<script>
// all scripts here for example
alert(1)
</script>
// rest of code

Using CodePen front-end designs in reactjs app

Question

1 answers

solution1
0 2021-04-21 06:43:06

Using CodePen front-end designs in reactjs app

Question

1 answers

solution1 0 2021-04-21 06:43:06

solution1
0 2021-04-21 06:43:06