1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
| 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 elements(link)
{
var titreElt = document.createElement("a"); // création variable "titreElt" de la balise "a".
titreElt.href = link.url; // récupération de l'"url" présente dans le tableau
titreElt.style.color = "#428bca"; // ajout de la couleur
titreElt.appendChild(document.createTextNode(link.titre));
var lienUrl = document.createElement("span"); // création variable "lienUrl" par rapport aux paramètres "span" dans le fichier CSS
lienUrl.appendChild(document.createTextNode(link.url));
var insertTitre = document.createElement("h2"); // création variable "insertTitre" correspondant au sous-titre "h2" contenant le "titre" et son "URL" présent dans le tableau
insertTitre.appendChild(titreElt); // "titre" présent dans le tableau
insertTitre.appendChild(lienUrl); // "URL" présent dans le tableau
var insertTitreUrl = document.createElement("span") // création variable "insertTitreUrl" pour l'auteur présent dans le tableau par rapport aux paramètres "span" dans le fichier CSS
insertTitreUrl.appendChild(document.createTextNode("Ajouté par " + link.auteur));
var insertDiv = document.createElement("div"); // création variable "insertDiv" pour la balise "DIV" pour chaque élément
insertDiv.classList.add("lien"); // ajout de cette balise en tenant compte des paramètres présents dans le fichier CSS "lien"
insertDiv.appendChild(insertTitre); // insertion du titre "h2" avec son URL
insertDiv.appendChild(insertTitreUrl); // insertion de l'auteur
return insertDiv;
}
listeLiens.forEach(function (lien) // fonction qui permet d'ajouter tous les éléments présents dans le tableau par rapport à la fonction "elements"
{
document.getElementById("contenu").appendChild(elements(lien));
})
//Bouton d'affichage du formulaire
var affichageFormBouton = document.getElementById("ajoutForm");
//Element Formulaire
var formElt = document.getElementById("ajoutLien");
//Elements du message de confirmation
var messageAjout = document.getElementById("messageAjout");
var messageTitre = document.getElementById("titre");
//Affichage du formulaire d'ajout
affichageFormBouton.addEventListener('click', function()
{
affichageFormBouton.style.display = "none";
formElt.style.display = "block";
});
formElt = creerForm();
document.body.insertBefore(formElt, contenu);
// Animations et validation du formulaire
formElt.addEventListener('submit', function(event)
{
formElt.style.display = "none";
affichageFormBouton.style.display = "inline-block";
ajoutNouveauLien();
formElt.reset();
event.preventDefault();
});
// Animations et validation du formulaire
formElt.addEventListener('submit', function(event)
{
formElt.style.display = "none";
affichageFormBouton.style.display = "inline-block";
ajoutNouveauLien();
formElt.reset();
event.preventDefault();
});
function creerForm()
{
formElt = document.createElement("form");
formElt.id = "ajoutLien";
formElt.appendChild(inputMaker({"type":"text",
"name":"auteur",
"placeholder": "Entrez votre nom",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"text",
"name":"titre",
"placeholder": "Entrez le titre du lien",
"size": "30",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"text",
"name":"url",
"placeholder": "Entrez l'URL du lien",
"size" : "30",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"submit",
"name":"bouton",
"value": "Ajouter"}));
return formElt;
}
function inputMaker(attributes)
{
var element = document.createElement("input");
for (var key in attributes){
element.setAttribute(key, attributes[key])
}
return element;
}
function ajoutNouveauLien()
{
var url = formElt.elements.url.value;
if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0))
{
// On la préfixe par "http://"
url = "http://" + url;
}
var lien ={
auteur : formElt.elements.auteur.value,
titre : formElt.elements.titre.value,
url : url,
}
contenu.insertBefore(elements(lien),contenu.childNodes[1]);
//gestion des affichages
messageTitre.textContent = lien.titre;
messageAjout.style.display = "block";
setTimeout(function(){messageAjout.style.display = "none";}, 2000);
} |
Affichage éléments crées dynamiquement
Répondre avec citation
Partager