Estou usando os conheciemtos da aula pra fazer um input em html pra ler os nomes e cpfs. Mas percebi que não consigo fazer funcionar com as linhas de import das classes Cliente e ContaCorrente.
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Conta Corrente</title>
</head>
<body>
<main>
<div class="box">
<header>
<h1>Conta Corrente</h1>
</header>
<div class="input">
<div class="nome">
<label for="nome">Nome</label>
<input type="name" id="nome" required>
</div>
<div class="cpf">
<label for="cpf">CPF</label>
<input type="cpf" id="cpf" required>
</div>
</div>
<div class="resultado" id="resultado"></div>
<button class="botao" id="criar">Criar Conta</button>
</div>
</main>
<script src="script.js"></script>
<script src="index.js"></script>
</body>
</html>
script.js
import {Cliente} from "./Cliente.js"
import {ContaCorrente} from "./ContaCorrente.js"
const criar = document.getElementById('criar');
function criarConta (){
const nome = document.getElementById('nome').value;
const cpf = document.getElementById('cpf').value;
if(nome !== '' && cpf !== '') {
const cliente1 = new Cliente (nome, cpf);
const conta1 = new ContaCorrente(2021, cliente1);
}else{
alert('Preencha todos os Campos');
}
}
criar.addEventListener('click', criarConta);
Quando eu tiro as linhas de importação o programa funciona, mas tem um porém, toda a lógica de criação e movimentação das contas estão nessas classes. Não queria colocar essas classes em um único arquivo pq, quero deixar organizado e de facil leitura. O que vocês me aconcelham a fazer ?