Hola veo q esta duda se repite mucho en el foro, pero no veo la solución, me aparece el siguiente error en la pagina al cargarla:
"index.html:1 Access to script at 'file:///C:/Users/Admin/Desktop/Manipulaci%C3%B3n%20DOM/1821-manipulando-dom-con-js-proyecto_inicial/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted."
"index.html:42 GET file:///C:/Users/Admin/Desktop/Manipulaci%C3%B3n%20DOM/1821-manipulando-dom-con-js-proyecto_inicial/script.js net::ERR_FAILED"
La respuesta q veo de las otras personas del foro es esta:
Lo mas seguro es porque estás intentando abrir el archivo index.html desde tu explorador de archivos, y como se están utilizando módulos, estos solamente funcionan a traves de un servidor web local, te recomiendo que abras tu archivo directamente en VSC y dentro de VSC le des boton derecho al archivo de index y dar click en la opción de abrir con Live Server y se solucionará.
Pero el detalle es q no estoy trabajando con VISUAL STUDIO CODE. Estoy trabajando con SUBLIME TEXT 3 abra alguna solución para las personas q trabajamos con Sublime text 3 ???????? por favor si algunos sabe les agradeceria. de paso comparto mi codigo, aunque se q mi codigo no es por q lo probe con el codigo del profesor y me da el mismo error.
import checkComplete from "./components/checkComplete.js";
import deleteIcon from "./components/deleteIcon.js";
const btn = document.querySelector('[data-form-btn]');
const createTask = (evento) => {
evento.preventDefault();
const input = document.querySelector('[data-form-input]');
const value = input.value;
const list = document.querySelector("[data-list]");
const task = document.createElement("li");
task.classList.add('card');
input.value = '';
//backticks
const taskContent = document.createElement("div")
const titleTask = document.createElement("span");
titleTask.classList.add("task");
titleTask.innerText= value;
taskContent.appendChild(checkComplete());
taskContent.appendChild(titleTask);
//task.innerHTML = content;
task.appendChild(taskContent);
task.appendChild(deleteIcon());
list.appendChild(task);
};
//Arrow functions o funciones anonimas
btn.addEventListener('click', createTask);const checkComplete = () => {
const i = document.createElement("i");
i.classList.add("far","fa-check-square","icon" );
i.addEventListener("click",completeTask);
return i;
};
//Inmediaty invoked function expression IIFE
const completeTask = (event) => {
const element = event.target;
element.classList.toggle('fas');
element.classList.toggle('completeIcon');
element.classList.toggle('far');
};
export default checkComplete;const deleteIcon = () => {
const i = document.createElement("i");
i.classList.add("fas", "fa-trash-alt", "trashIcon", "icon");
i.addEventListener("click", deleteTask);
return i;
};
const deleteTask = (event) => {
const parent = event.target.parentElement;
parent.remove();
};
export default deleteIcon;<!DOCTYPE html>
<html lang="en">
<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" />
<title>TODO App</title>
<link rel="icon" type="image/png" href="./assets/rocket.svg" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Dosis&family=Open+Sans&family=Parisienne&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div class="mainCard">
<div class="title"><img src="./assets/rocket.svg" /></div>
<div>
<form action="">
<input
type="text"
name="task"
placeholder="Nombre de la tarea"
class="inputForm"
autocomplete="off" data-form-input
/>
<button type="submit" class="btnCreate" data-form-btn>
Agregar <i class="fas fa-plus-circle"></i>
</button>
</form>
</div>
<ul class="cardsList" data-list>
</ul>
</div>
</main>
<script type="module" src="script.js"></script>
</body>
</html>