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
| /*
Activité 1
*/
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
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"
}
];
// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
var titreLien = document.createElement("a");
titreLien.href = lien.url;
titreLien.style.color = "#428bca";
titreLien.style.textDecoration = "none";
titreLien.style.marginRight = "5px";
titreLien.appendChild(document.createTextNode(lien.titre));
var urlLien = document.createElement("span");
urlLien.appendChild(document.createTextNode(lien.url));
// Cette ligne contient le titre et l'URL du lien
var ligneTitre = document.createElement("h4");
ligneTitre.style.margin = "0px";
ligneTitre.appendChild(titreLien);
ligneTitre.appendChild(urlLien);
// Cette ligne contient l'auteur
var ligneDetails = document.createElement("span");
ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
var divLien = document.createElement("div");
divLien.classList.add("lien");
divLien.appendChild(ligneTitre);
divLien.appendChild(ligneDetails);
return divLien;
}
var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
var elementLien = creerElementLien(lien);
contenu.appendChild(elementLien);
});
//Changement du titre Activité 1 en Activité 2
document.querySelector("h1").textContent = "Activité 2";
// Bikini est le nom de mon chien, je voulais le placer ;)
function Bikini (id) {
return document.getElementById(id);
}
//Création d'un btn "ajouter un lien"
Bikini("contenu").insertAdjacentHTML("afterBegin", '<button id="btnElt">Ajouter un lien</button>');
var btnElt = Bikini("btnElt");
btnElt.style.borderRadius = "10px";
btnElt.style.marginBottom = "15px";
//Lance le formulaire
btnElt.addEventListener("click", function()
{
//Création de l'objet "form"
var form = document.createElement("form");
//Création des champs de saisie
// titre
var chpTitre = document.createElement("input");
chpTitre.id = "chpTitre";
chpTitre.required = true; //Saisie obligatoire
chpTitre.setAttribute("type", "text");
chpTitre.setAttribute("size", "40");
chpTitre.setAttribute("placeholder", "Entrez le titre du lien"); //Place une indication sur ce qu'il faut inscrire dans le champ
// Url
var chpUrl = document.createElement("input");
chpUrl.id = "chpUrl";
chpUrl.required = true; //Saisie obligatoire
chpUrl.setAttribute("type", "text");
chpUrl.setAttribute("placeholder", "Entrez l'url du lien");
chpUrl.setAttribute("size", "40");
chpUrl.style.marginLeft = "10px";
// Auteur
var chpAuteur = document.createElement("input");
chpAuteur.id = "chpAuteur";
chpAuteur.required = true; //Saisie obligatoire
chpAuteur.setAttribute("type", "text");
chpAuteur.setAttribute("placeholder", "Entrez votre nom");
chpAuteur.setAttribute("size", "30");
chpAuteur.style.marginLeft = "10px";
//btn "ajouter"
var btnAjout = document.createElement("input");
btnAjout.setAttribute("type", "submit");
btnAjout.value = "Ajouter";
btnAjout.style.borderRadius = "10px";
btnAjout.style.marginLeft = "20px";
//Assemblage des champs
form.appendChild(chpAuteur);
form.appendChild(chpTitre);
form.appendChild(chpUrl);
form.appendChild(btnAjout);
//Remplacement du btn "ajouter un lien" par le "form"
Bikini("contenu").replaceChild(form, btnElt);
//Relevé des saisies des champs du formulaire
form.addEventListener("submit", function(e) {
e.preventDefault;
//Vérif url + saisie du chp
var urlNewLink = chpUrl.value;
var regexUrl = /^(http|https)\:\/{2}/i;
if (!regexUrl.test(urlNewLink)) {
urlNewLink = "http://" + urlNewLink;
}
//Création du nouveau lien
var newLink = {
titre: chpTitre.value,
url: urlNewLink,
auteur: chpAuteur.value
};
//Ajout du nouveau lien à la liste
var newLinkElt = creerElementLien(newLink);
//Placement en haut de la liste
Bikini("contenu").insertBefore(newLinkElt, document.querySelector(".lien"));
//Création du message confirmant l'ajout
var message = document.createElement("p");
message.textContent = "Le lien " + newLink.titre + " a bien été ajouté.";
message.style.backgroundColor = "#7fffd4";
//Message placé en haut, au-dessus du btn
Bikini("contenu").insertBefore(message, btnElt);
//Supression du message après 2 secondes
setTimeout(function() {
Bikini("contenu").removeChild(message);
}, 2000);
btnAjout.appendChild(message);
});
}); |
