Hola gente consulta tengo un problema que el profesor nos pidió que resolviéramos solo usando JS (aviso x si hay otros lenguajes en el cual seria mas fácil de resolver).
Les explico, actualmente estamos tratando de integrar todos los proyectos de clase, en solo un js y nos pidió que trabajáramos nuestros javascript particulares para poner toda la información en una sola clase, en otras palabras, seria haya un javascript maestro que busca los demás javas mas pequeños para poder organizar la data.
A lo que yo llamo "javaScript maestro" lo va hacer el profesor con nosotros mañana el tema esta en que no se como hacer que funcione TODO mi js en una sola funcion.
Las preguntas serian:
-como tengo que hacer la clase para que funcione correctamente?
-Tengo que cambiar algo de mi html(ya sean funciones o clases que están por dentro de mi Clase padre)?
-como hago para probar que todo esta correcto?
Dejo el código por acá así lo ven si necesitan el CSS me avisan
class Grupo42{
//Json como la base de datos
//esto hay que hacer que priermo se tier el dato y despues que entre en el marco
noticias = [];
var marco = document.getElementById("marco");
//Agregar las nuevas noticias
//funcion que te lleve al mismo sistema que el listadopuesta a mano
var lista = document.getElementById("listado");
function crearLista() {
var elem = {
titulo: "",
imagen: "",
parrafo: ""
};
var noticia_x = document.createElement("li");
var noticiaLink = document.createElement("a");
//crear las etiquetas del marco*/
var t2 = document.createElement("h2");
t2.textContent = document.getElementById("nota").value;
elem.titulo = document.getElementById("nota").value;
if (nota.value.length == 0){
alert("titulo por favor")
return 0;
}
var p = document.createElement("p");
p.textContent = document.getElementById("parrafo").value;
elem.parrafo = document.getElementById("parrafo").value;
if (parrafo.value.length == 0){
alert("parrafo por favor")
return 0;
}
var imagen_img = document.createElement("img");
imagen_img.src = "imagenes/" + document.getElementById("imagen").value.substring(12);
elem.imagen = document.getElementById("imagen").value;
if (imagen.value.length == 0){
alert("archivo por favor")
return 0;
}
noticiaLink.textContent = document.getElementById("nota").value;
noticiaLink.setAttribute("href", "#");
noticiaLink.setAttribute("class", "link_noticia");
lista.appendChild(noticia_x);
noticia_x.appendChild(noticiaLink);
noticiaLink.addEventListener("click", function(e){
limpiarMarco(); // limpia marco
marco.appendChild(t2);
marco.appendChild(p);
marco.appendChild(imagen_img);
});
noticias.push(elem);
limpiar(); // limpia los inputs
}
function limpiarMarco() {
var childs = Array.from(document.getElementById("marco").children);
if( childs.length>0){
for (var i=0; i<childs.length;i++) {
console.log(childs[i]);
marco.removeChild(childs[i]);
}}
}
function limpiar() {
document.getElementById("nota").value = "";
document.getElementById("parrafo").value = "";
document.getElementById("imagen").value = "";
};
//ya que la Id formulario no esta en ningun lado y la funcion tampoco se usa nunca
function agregaNoticia() {
var formulario = document.getElementById("formulario");
};
//hacer que este boton interactue con el listado
var s = function Sumar() {
console.log("sumar noticia");
crearLista();
};
var sumarID = document.getElementById("id4");
sumarID.addEventListener("click", s);
}
//Clase para tirar todo
var objeto= new Grupo42;
objeto.crearLista();
objeto.limpiarMarco();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Noticias Club Rotonda</title>
<link rel="stylesheet" href="EstilosCss.css">
<!--Fuentes -->
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap:b" rel="stylesheet">
</head>
<body>
<!--NAVIGATION-->
<nav class="navbar navbar=light bg-light">
<a href="/"class="navbar-brand">
Noticias Del Club Rotonda</a></nav>
<div class="container">
<div class="col-md-4">
<div class="card">
<h4 class="titulo_formulario">Crear Nota</h4>
<!-- aca se pone la data del folmulario
**placeholder es el texto que esta dentro de la caja que despues se va- eso no se saca -->
<div id="product-form" class="card-body">
<div class="form-group">
<input type="text" id="nota" class="form-control">
<label for="" class="textos_formulario">Titulo</label>
</div>
<div class="form-group">
<textarea id="parrafo" class="form-control" ></textarea>
<label for="" class="textos_formulario">Texto</label>
</div>
<div class="form-group">
<input type="file" id="imagen" placeholder="Imagen" class="form-control">
</div>
<button id="id4" value="Crear" class="boton_formulario">Listo</button>
</div>
</div>
</div>
<div class="EstiloLista" >
<ul id="listado">
<li><a href="#" data-numero="0" class="link_noticia">Noticia 1</a></li>
<li><a href="#" data-numero="0" class="link_noticia">Noticia 1</a></li>
<li><a href="#" data-numero="0" class="link_noticia">Noticia 1</a></li>
</ul>
</div>
</div>
<div id="marco">
</div>
<script src="Js_app.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
<script>
let campos = document.querySelectorAll(".form-control");
for(let campo of campos){
campo.onfocus = () => {
campo.classList.add("anim");
}
campo.onblur = () => {
if(campo.classList.contains("anim") && campo.value == ""){
campo.classList.remove("anim");
}
}
}
</script>
</body>
</html>