Activité 2 - Gérez l’ajout de nouveaux - aidez moi svp par CédricGodard - page 1

bonjour communauté openclassroom je suis bloqué sur l exercice de l activité 2 - Gérez l’ajout de nouveaux liens

deux problèmes ce posent:

1) impossible de mettre l ajout de mes liens en première position au dessus des 3 tableau deja creer (ils se positionne en dessous des 3)

2) quand j ajoute mes liens la première fois tout se passe bien excepter la position mais si je rajoute une deuxième fois 3 nouveau lien il se dédouble et si je le fais une troisième fois alors la ça triple.

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 1</title>
</head>

<body>
    <h1>Activité 1</h1>
    <p id="button">
        <button>ajouter un lien</button>
    </p>
    <form>
        <p id="case" class="cache">
            <input type="text" name="auteur" id="auteur" required>
            <input type="text" name="titre" id="titre" required>
            <input type="text" name="url" id="url" required>
            <input type="submit" value="ajouter" id="ajout">
        </p>
    </form>
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>
    
    <script src="../js/liensweb.js"></script>
</body>

</html>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}

span {
    font-weight: normal;
    font-size: 80%;
}

.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}

JAVASCRIPT

var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web

function ajout(liste){

    var divElt=document.createElement("div");
    var pElt=document.createElement("p");
    var aElt=document.createElement("a");
    var p2Elt=document.createElement("p");

    pElt.textContent=liste.titre;
    aElt.href=liste.url;
    aElt.textContent=liste.url;
    p2Elt.textContent=" ajouté par: " +liste.auteur;

    divElt.style.backgroundColor="white";
    divElt.style.height="30%";
    divElt.style.width="90%";
    divElt.style.border="1px solid white";
    divElt.style.marginBottom="10px";
    divElt.style.borderRadius="5px 5px 5px 5px";

    pElt.style.color="#428bca";
    pElt.style.fontWeight="bold";
    pElt.style.fontSize="20px";
    
    aElt.style.color="black";
    aElt.style.marginLeft="20px";
    aElt.style.fontWeight="normal";
    aElt.style.fontSize="14px";

    p2Elt.style.fontWeight="bold";

    divElt.appendChild(pElt);
    pElt.appendChild(aElt);
    divElt.appendChild(p2Elt);
    
    return divElt
};



listeLiens.forEach(function(liste){
    var elementListe=ajout(liste);
document.getElementById("contenu").appendChild(elementListe);
})
var pFormElt=document.getElementById("case");
pFormElt.style.display="none";

var auteurElt=document.getElementById("auteur");
auteurElt.style.marginRight="10px";
auteurElt.style.paddingRight="150px";

var titreElt=document.getElementById("titre");
titreElt.style.marginRight="10px";
titreElt.style.paddingRight="250px";

var urlElt=document.getElementById("url");
urlElt.style.marginRight="10px";
urlElt.style.paddingRight="250px";

var formElt=document.querySelector("form")

var buttonElt=document.querySelector("button");
button.addEventListener("click",function(){
    var pButtonElt=document.getElementById("button");
    pButtonElt.style.display="none";
    pFormElt.style.display="block";

    formElt.addEventListener("submit",function(e){
        var url=formElt.elements.url.value;
        if (url.indexOf("http://"===-1)){
            url= "http://" + url;
        }
        var titre=formElt.elements.titre.value;
        var auteur=formElt.elements.auteur.value;

        var nouveauLiens=Object.create(listeLiens);
        nouveauLiens.titre= titre;
        nouveauLiens.url= url;
        nouveauLiens.auteur = auteur;
        
        var ajoutLiens=ajout(nouveauLiens);
        document.getElementById("contenu").appendChild(ajoutLiens)

        //body.insertBefore(ajoutLiens,contenu);

        formElt.style.display="none";

        var p2FormElt=document.createElement("p");
        p2FormElt.textContent='Le lien "' + titre + '" a bien été ajouter ';
        p2FormElt.style.width="40%";
        p2FormElt.style.backgroundColor="#D6ECF6";
        p2FormElt.style.color="#428BCA";
        p2FormElt.style.padding="20px 0";
        p2FormElt.style.fontSize="20px";
        document.querySelector("form").appendChild(p2FormElt);
       
        setTimeout(function(){
            p2FormElt.style.display="none";
            pButtonElt.style.display="block";
        },2000);
        

        e.preventDefault();
    });
});

je vou souhaite un bonne journée

Activité 2 - Gérez l’ajout de nouveaux

aidez moi svp

Supprimer

Modérer

Signaler le message aux modérateurs