0

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>

4
  • Ese código no compila, no puedes definir variables o funciones dentro del bloque de una clase. No tengo claro lo que quieres hacer Commented el 13 jun. 2019 a las 13:47
  • creeme que yo tampoco y ahi esta el problema :( Commented el 13 jun. 2019 a las 14:18
  • pero Pregunto entonces no se puede integrar 2 JS en uno aparir de clases para que no se pisen? y cuando se necesite uno se llame a ese? Commented el 13 jun. 2019 a las 14:21
  • Intenta alejarte y mirar el problema con más perspectiva: Tienes código JS que hace algo en una página. Tienes código JS que hace algo en otra página. ¿Qué quieres obtener? ¿Podrías poner ambos códigos en la pregunta? Commented el 13 jun. 2019 a las 15:32

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.