html
html
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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Page06.js"></script>
<link rel="stylesheet" type="text/css" href="Page06.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 class="title">Which helps the developers</h2>
<p class="main">I am a developper since a long time. Down, you will find some point that I find important.<br />
Click on a point to have the explanation.</p>
<button class="accordion">Writing code simple, readable and understandable</button>
<div class="panel">
<p class="explaination"><strong>The more legible a code is, the easier it will be understood by everyone.</strong><br />
Some languages have powerful syntaxes but this kind of syntax makes the code difficult to read for everyone.<br />
Try not to write too long lines, to give variable names that easily identify the content.
</p>
</div>
<button class="accordion">Document everything and comment in the code</button>
<div class="panel">
<p class="explaination"><strong>It is important to explain what the code do.</strong><br />
You (and the others) will appreciate it when you will come back in the code.
Sometime the operations which the code do are more or less complex. It is very usefull to comment it before, to explain simply what it do.
Don't forget to adapt the comment when you modify the operations.</p>
Enter to Rename, Shift+Enter to Preview
css
css
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
.title {
background-color: #92a8d1;
color: #DF013A;
padding: 5px 15px;
border: 1em ridge green;
text-align: center;
font-size: 20px;
}
.main {
background-color: #92a8d1;
color: #0000FF;
padding: 5px 15px;
border: none;
text-align: left;
font-size: 15px;
transition: 0.4s;
}
.accordion {
background-color: #F5D0A9;
color: #0000FF;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
Enter to Rename, Shift+Enter to Preview
js
js
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
var acc = document.getElementsByClassName("accordion");
var i;
window.onload = function() {
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
// RAZ accordion
var x = document.getElementsByClassName("accordion");
for (i = 0; i < x.length; i++) {
x[i].classList.remove("active");
}
// RAZ panel
var x = document.getElementsByClassName("panel");
for (i = 0; i < x.length; i++) {
x[i].style.maxHeight = null;
}
// Show active panel
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run