Projets
Site avec un piano fonctionnelle , un générateur de…
Site qui renvoie aléatoirement vers un piano fonctionnel, un générateur de citation, ou un compte à rebours.
Ce projet est un site composé de 4 pages codées en html :
La page principale
- Présentation
Voici la page principale de notre site, c’est elle qui renverra l’utilisateur vers 3 autres pages au hasard grâce à un script javascript que vous retrouver plus tard dans cette article. La redirection vers les sites est effectué par une interaction sur un bouton cliquable situé au centre de la page. De plus autre bouton placé en bas à droite de la page permet de changer la couleur du dégradé de fond.
- Le code HTML
<html lang="fr">
<head>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/ico" href="favicon.ico" />
<title>Bienvenue</title>
<meta charset="utf-8"/>
<script src="https://package.nsi.xyz/api/"></script>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</head>
<body>
<div id="container" class="orange1">
<h2> CLIQUEZ SUR CE BOUTON POUR ACCÉDER À UN DE NOS SITES</h2>
<button id="style_boutton"; type="button"; ><h2>CLIQUEZ MOI</h2></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange"></button>
</body>- Le code CSS
html{
margin: 0;
height: 100%;
}
body {
font-family: Verdana;
}
#container {
width: 32rem;
height: 21rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 20px;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2{
color: #d3d3d3;
text-align: center;
}
#style_boutton {
border-radius: 20px;
font-family: Verdana;
animation: boutton_animation 3s infinite;
background-color: transparent;
color: #C0C0C0;
height: 6rem;
width: 15rem;
border-width: 4px;
margin: 0;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
#style_boutton:hover {
animation: boutton_animation 2s ease infinite;
animation-fill-mode: forwards;
cursor: pointer;
height:40%;
width:60%;
font-size: 100%;
}
@keyframes boutton_animation {
0% {border-color: red;}
25%{border-color:yellow;}
35%{border-color:orange;}
50%{border-color:green;}
75%{border-color:blue;}
100% {border-color: purple;}
}
html {
background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black {
background: linear-gradient(to bottom right, #006BA6, #D81159);
}
.blue {
background: linear-gradient(to bottom right, #C81D25, #23395B);
}
.orange{
background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black1 {
background: linear-gradient(to top left , #006BA6, #D81159);
}
.blue1 {
background: linear-gradient(to top left , #C81D25, #23395B);
}
.orange1 {
background: linear-gradient(to top left , #1B998B, #0D1317);
}
#target {
height: 50px;
width: 50px;
color: #fff;
border-radius: 50%;
display: inline-block;
text-shadow: #000 1px 1px 1px;
cursor: pointer;
border: none;
position:absolute;
bottom:0;
right:0;
transition: 0.5s;
}
#target:hover{
height: 58px;
width: 58px;
}- Les scripts javascript
- Le script changeur de thème
Ce script sera exécuté lorsque l’utilisateur appuiera sur le bouton en bas à droite de l’écran. Il changera alors la class de l’arrière-plan. Les classes (dans le css) « black », « blue », et « orange » sont utilisé pour l’arrère plan de l’html alors que « black1 », « blue1 », et « orange1 » sont utilisé pour l’arrière plan du container au ilieu de l’écran.
<script>
var colors = [
'orange',
'blue',
'black'
];
var colors1 = [
'orange1',
'blue1',
'black1'
];
var currentColor = 0;
var currentColor1 = 0;
var target = jQuery('#target');
var target1 = jQuery('html');
var target2 = jQuery('#container');
target.click(function (evt) {
currentColor += 1;
currentColor1 += 1;
currentColor %= colors.length;
currentColor1 %= colors1.length;
target1.prop('class', colors[currentColor]);
target.prop('class', colors[currentColor]);
target2.prop('class', colors1[currentColor1]);
});
</script>
Télécharger
Le scripte qui renvoi vers d'autre sites
Lorsque le bouton au milieu de l'écran est utilisé, le script sera utilisé, et l'utilisateur sera renvoyé vers une de nos pages aléatoirement.
<script>
var links = new Array();
links[0] = "http://kebab.nsi42.net/new/compte_a_rebours.html";
links[1] = "http://kebab.nsi42.net/new/citation.html";
links[2] = "http://kebab.nsi42.net/new/piano.html";
function openLink() {
var i = Math.floor(Math.random() * links.length);
parent.location = links[i];
return false;
}
</script>Le piano
- Présentation
Voici notre page piano dans laquelle est présent un « extrait » de piano que l’utilisateur pourra utiliser grâce aux touches de son clavier. Lorsque l’utilisateur appuiera sur l’une des touches du clavier, la note correspondante à la touche s’affichera au dessus du piano.
- Le code HTML
<html lang="fr">
<head>
<title>Piano</title>
<link rel="stylesheet" type="text/css" href="piano111.css">
<meta charset="utf-8">
<script src="https://package.nsi.xyz/api/"></script>
</head>
<header>
<h1>Piano</h1>
<h2>Afin d'utiliser ce magnifique piano il faut utiliser les touches de ton clavier. Regarde le tableau de correspondance des touches. Et vas y petit Mozart.</h2>
</header>
<body>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
<section id="wrap">
<section id="main">
<div class="nowplaying"></div>
<div class="keys">
<div data-key="81" class="key" data-note="Do"><p>Q</p></div>
<div data-key="90" class="key sharp" data-note="Do#"><p>Z</p></div>
<div data-key="83" class="key" data-note="Ré"><p>S</p></div>
<div data-key="69" class="key sharp" data-note="Ré#"><p>E</p></div>
<div data-key="68" class="key" data-note="Mi"><p>D</p></div>
<div data-key="70" class="key" data-note="Fa"><p>F</p></div>
<div data-key="84" class="key sharp" data-note="Fa#"><p>T</p></div>
<div data-key="71" class="key" data-note="Sol"><p>G</p></div>
<div data-key="89" class="key sharp" data-note="Sol#"><p>Y</p></div>
<div data-key="72" class="key" data-note="La"><p>H</p></div>
<div data-key="85" class="key sharp" data-note="La#"><p>U</p></div>
<div data-key="74" class="key" data-note="Si"><p>J</p></div>
<div data-key="75" class="key" data-note="Do"><p>K</p></div>
<div data-key="79" class="key sharp" data-note="Do#"><p>O</p></div>
<div data-key="76" class="key" data-note="Ré"><p>L</p></div>
<div data-key="80" class="key sharp" data-note="Ré#"><p>P</p></div>
<div data-key="77" class="key" data-note="Mi"><p>M</p></div>
</div>
<audio data-key="81" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio>
<audio data-key="90" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio>
<audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio>
<audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio>
<audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio>
<audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio>
<audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio>
<audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio>
<audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio>
<audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio>
<audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio>
<audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio>
<audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio>
<audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio>
<audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio>
<audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio>
<audio data-key="77" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio>
</section>
</section>
<table class="tableau-style">
<thead>
<tr>
<th>Do</th>
<th>Ré</th>
<th>Mi</th>
<th>Fa</th>
<th>Sol</th>
<th>La</th>
<th>Si</th>
<th>Do</th>
<th>Ré</th>
<th>Mi</th>
<th>Do#</th>
<th>Ré#</th>
<th>Fa#</th>
<th>Sol#</th>
<th>La#</th>
<th>Do#</th>
<th>Ré#</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>Z</td>
<td>E</td>
<td>T</td>
<td>Y</td>
<td>U</td>
<td>O</td>
<td>P</td>
</tr>
</tbody>
</table>- Le code CSS
html{
background: linear-gradient(#006494, #FF1053);
margin: 0;
height: 100%;
}
body {
font-family: 'Noto Serif', serif;
text-align: center;
}
header {
position: relative;
margin: 30px 0;
}
header:after {
content: '';
width: 460px;
height: 15px;
display: inline-block;
text-align: center;
background-size: 70%;
}
h1 {
color: #fff;
font-size: 50px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
}
h2 {
color: #fff;
font-size: 24px;
font-style: italic;
font-weight: 400;
margin: 0 250px 30px;
}
.nowplaying {
font-size: 120px;
line-height: 1;
color: #eee;
text-shadow: 0 0 5rem #028ae9;
transition: all .07s ease;
min-height: 120px;
}
.keys {
display: block;
width: 100%;
height: 350px;
max-width: 880px;
position: relative;
margin: 40px auto 0;
cursor: none;
}
.key {
position: relative;
border: 4px solid black;
border-radius: .5rem;
transition: all .07s ease;
display: block;
box-sizing: border-box;
z-index: 2;
}
.key:not(.sharp) {
float: left;
width: 10%;
height: 100%;
background: rgba(255, 255, 255, .8);
}
.key.sharp {
position: absolute;
width: 6%;
height: 60%;
background: #000;
color: #eee;
top: 0;
z-index: 3;
}
.key[data-key="90"] {
left: 7%;
}
.key[data-key="69"] {
left: 17%;
}
.key[data-key="84"] {
left: 37%;
}
.key[data-key="89"] {
left: 47%;
}
.key[data-key="85"] {
left: 57%;
}
.key[data-key="79"] {
left: 77%;
}
.key[data-key="80"] {
left: 87%;
}
.playing {
transform: scale(.95);
border-color: #028ae9;
box-shadow: 0 0 1rem #028ae9;
}
.hints {
display: block;
width: 100%;
opacity: 0;
position: absolute;
bottom: 7px;
font-size: 20px;
}
.tableau-style {
cursor: none;
border-collapse: collapse;
min-width: 400px;
font-style: italic;
width: auto;
box-shadow: 0 5px 50px rgba(0,0,0,0.15);
margin: 100px auto;
border: 2px solid black;
}
thead tr {
background-color: black;
color: #fff;
text-align: center;
}
tbody tr {
background-color: white;
color: black;
text-align: center;
}
th, td {
padding: 15px 20px;
}
tbody tr, td, th {
border: 1px solid ;
}
tbody tr:nth-child(even){
background-color: #f3f3f3;
}- Le scripts javascript du piano
Dans ce script javascript est présent une ligne très importante :
if (e.repeat) return;
qui empèche la répétition de la note de musique qui ferait planter le piano lorsque l’utilisateur maintiendrai la touche enfoncée.
<script>
const keys = document.querySelectorAll(".key"),
note = document.querySelector(".nowplaying"),
hints = document.querySelectorAll(".hints");
function playNote(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!key) return;
if (e.repeat) return;
const keyNote = key.getAttribute("data-note");
key.classList.add("playing");
note.innerHTML = keyNote;
audio.currentTime = 0;
audio.play();
}
function removeTransition(e) {
if (e.propertyName !== "transform") return;
this.classList.remove("playing");
}
function hintsOn(e, index) {
e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
}
hints.forEach(hintsOn);
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
window.addEventListener("keydown", playNote);
</script>Le compte à rebours
- Présentation
Voici la page compte à rebours de la fin présumé d’internet. Au centre de l’ecran se trouve le compte à rebours ayant pour fin 2023 sur un fond gif.
- Le code HTML
<html lang="fr">
<html>
<head>
<link rel="stylesheet" href="compte_a_rebours.css">
<link rel="icon" type="image/ico" href="favicon.ico" />
<title>END</title>
<meta charset="utf-8"/>
<script src="https://package.nsi.xyz/api/"></script>
</head>
<body>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
<div class="container">
<h1 id="headline">Compte a rebours de la Fin d'Internet:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">👾 </span>
<span class="emoji">💻</span>
<span class="emoji">💀</span>
</div>
</div>
</div>- Le code CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
align-items: center;
background-image:url(images/36010.gif);
display: flex;
font-family: -apple-system,
"Segoe UI",
"Helvetica Neue",
sans-serif;
}
.container {
color: white;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: bolder;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
.emoji {
padding: 0 .25rem;
}- Le scripts javascript du compte à rebours
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let annee = "Janvier 1, 2023 00:00:01",
countDown = new Date(annee).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "C'est la Fin !";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>- Le script javascript de la page qui s’ouvre
Ce script Javascript permet de d’ouvrir une page lorsque l’utilisateur écrira le mot « end » avec les touches de son clavier.
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
var index = 0;
var magic_word = "end";
if (e.key == magic_word[index]) {
index++;
if (index == magic_word.length) {
window.open("https://www.youtube.com/watch?v=EqaHgjv_Snc", "_blank");
index = 0;
}
} else {
index = 0;
}
}
</script>Le générateur de citations
- Présentation
Voici la page générateur de citations qui présentera à l’utilisateur lorsqu’il qu’il le voudra divers citation de personne fictif ou bien réel. Enregistré en variable dans les scripts javascript. De plus le fond de la page est une gradation de couleur en mouvement constant.
- Le code HTML
<html lang="fr">
<head>
<link rel="stylesheet" href="citation.css">
<link rel="icon" type="image/ico" href="favicon.ico" />
<title>Citation</title>
<meta charset="utf-8"/>
<script src="https://package.nsi.xyz/api/"></script>
<body>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</body>
<div class="container">
<div class="citation">
<div id="citationplace"></div>
</div>
<div class="auteur">
<div id="auteurplace"></div>
</div>
<button>Nouvelle Citation</button>
</div>
</body>
</html>- Le code CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.container{
width: 32rem;
height: 21rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .3);
border-radius: 20px;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.08);
overflow: hidden;
color:white;
}
.guil{
font-size: 10%;
}
.citation{
text-align: left;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
font-size:31px;
}
.auteur{
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
text-align: right;
font-size:28px;
}
html {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(to top left, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
width:100%;
height:100%;
}
button{
width:30%;
height:20%;
position:absolute;
bottom:0;
right:0;
transition: 0.3s;
cursor:pointer;
color: white;
text-transform: uppercase;
background-color: rgba(0, 0, 0, 0.08);
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
border-radius: 5px;
}
button:hover{
background-color: rgba(0, 0, 0, 0.2);
letter-spacing: 2px;
animation: titre 1s;
width:31%;
height:21%;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
- Les scripts javascript
- Le script changeur de citation
A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle citation qui est dans dans la variable « citations » sera affiché.
<script>
var auteur = [
"Maitre Oogway",
"Maitre Oogway",
"Martin Luther King",
"Confucius",
"Jean-Paul Sartre",
"Victor Hugo",
"Albert Einstein",
"Oscar Wilde",
"Albert Einstein",
"Emmanuel Kant",
"Douglas Adams",
"Maitre Yoda"
]
var citations = [
"❝Hier est derrière, demain est mystère, et aujourd'hui est un cadeau, c'est pour cela qu'on l'appelle le présent.❞",
"❝On rencontre souvent sa destinée par les chemins qu'on a pris pour l'éviter.❞",
"❝Celui qui accepte le mal sans lutter contre lui coopère avec lui.❞",
"❝Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.❞",
"❝Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.❞",
"❝On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.❞",
"❝La vie, c'est comme une bicyclette, il faut avancer pour ne pas perdre l'équilibre.❞",
"❝La beauté est dans les yeux de celui qui regarde.❞",
"❝Un problème sans solution est un problème mal posé.❞",
"❝La musique est la langue des émotions.❞",
"❝42 est la réponse à la grande question sur la vie, l'univers et le reste❞",
"❝Difficile à voir. toujours en mouvement est l'avenir.❞"
]
function nouveaux() {
var rand = Math.floor(Math.random() * (citations.length));
document.getElementById('citationplace').innerHTML = citations[rand];
document.getElementById('auteurplace').innerHTML = auteur[rand];
}
</script>- Le script javascript changeur d’image
A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle image tiré au hasard de Flickr sera affiché. Cette image est trouvé grâce au mot clé « autumn forest ».
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var keyword = "autumn forest";
$(document).ready(function (){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: keyword,
tagmode: "any",
format: "json"
},
function (data) {
var rnd = Math.floor(Math.random() * data.items.length);
var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
$('.container').css('background-image', "url('" + image_src + "')");
});
});
</script>Un problème rencontré
Lors de la programation de nos page nous avons constaté plus précisément dans la page du piano, que la personne ayant codé le javascript avait codé avec un choix de touche adapté au clavier QWERTY il a donc fallut modifié les touches du clavier en l’adaptant pour un clavier AZERTY. Cette action a était possible en changeant les DATA-KEY des touches.
Cet article a été écrit par des élèves du lycée Louis Pasteur.
Ils étudiaient alors la spécialité NSI, en classe de terminale.
Promotion 2020 – 2021
