bamarty/Projet_Prog_Web
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Second version cypto_seul

Browse source
This commit is contained in:
Baptiste Marty 2020-12-15 17:26:06 +01:00
parent 118152bfc9
commit 268f89b053
6 changed files with 103 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
CSS/crypto_seul.css
View file

@ -67,12 +67,28 @@ body {
}
#codeBlock{
opacity:0;
animation: fade 2s forwards 1s;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin-top:5vh;
width:80vw;
height:20vh;
}
#codeTxt{
#codeTxtL1{
display:flex;
justify-content: center;
align-items: center;
}
#codeTxtL2{
display:flex;
justify-content: center;
align-items: center;
}
@keyframes fade {
@ -85,18 +101,19 @@ body {
justify-content: space-around;
margin-top:5vh;
opacity:0;
animation: fade 2s forwards 2s;
}
.button {
outline: none;
border:0.2vw solid #b9b9b9;
border-radius: 4vw;
width:20vw;
width:15vw;
padding: 1vw 1.2vw 1vw 1.2vw;
color: black;
font-family: 'Special Elite', cursive;
font-size: 1.5vw;
background-image: linear-gradient(to top, black -50%, #BF0909 80%);
background-image: linear-gradient(to top, black -50%, #057B26 80%);
cursor : pointer;
display: flex;
justify-content: center;
@ -109,7 +126,7 @@ body {
}
.button:active {
background-image: linear-gradient(to top, #BF0909 20%, black 150%);
background-image: linear-gradient(to top, #057B26 20%, black 150%);
}
footer{

1
CSS/etrange_decouverte.css
View file

@ -211,6 +211,7 @@ body {
display:flex;
flex-direction: column;
opacity:0;
z-index:-1;
}

3
HTML/crypto_seul.html
View file

@ -20,7 +20,8 @@
<article id="text">
<p id="p1">A vous de deviner le mot de passe !</p>
<div id="codeBlock">
<div id="codeTxt"></div>
<div id="codeTxtL1"></div>
<div id="codeTxtL2"></div>
</div>
</article>
<div id="buttons">

2
HTML/menu.html
View file

@ -17,7 +17,7 @@
<main>
<section>
<article id="logoBlock">
<img id="logo" src="../Images/Logo.png" alt="Logo"/>
<img id="logo" src="../Images/BigLogo.png" alt="Logo"/>
</article>
<article>
<span>

BIN
Images/BigLogo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

87
JAVASCRIPT/crypto_seul.js
View file

@ -1,24 +1,93 @@
// select elements
let codeTxt = document.getElementById("codeTxt")
let codeTxtL1 = document.getElementById("codeTxtL1")
let codeTxtL2 = document.getElementById("codeTxtL2")
let button = document.getElementById("buttons")
let mdp = "Le Mot de Passe"
let mdp = "Le petit chaperon rouge"
let mdpletters = mdp.replace(/ /g,'');
let letters = []
console.log(mdpletters);
// functions
function fillCases(div){
var letterCase = document.createElement("input");
letterCase.style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
div.appendChild(letterCase)
letters.push(letterCase)
}
function fillBlanks(div){
var spaceCase = document.createElement("div")
spaceCase.style.cssText = "width:3vw; height:5vh; margin:0vw 0.5vw 0vw 0.5vw; ";
div.appendChild(spaceCase)
}
function styleMdp() {
for (let i=0;i<mdp.length;i++){
if (mdp[i] === ' '){
var spaceCase = document.createElement("div")
spaceCase.style.cssText = "width:3vw;height:5vh;margin:0vw 0.5vw 0vw 0.5vw;";
codeTxt.appendChild(spaceCase)
if (i > 8){
if (mdp[i] === ' '){
fillBlanks(codeTxtL2)
} else {
fillCases(codeTxtL2)
}
} else {
var letterCase = document.createElement("input");
letterCase.style.cssText = "background-color:white;margin:0vw 0.5vw 0vw 0.5vw;width:3vw;height:5vh"
codeTxt.appendChild(letterCase)
if (mdp[i] === ' '){
fillBlanks(codeTxtL1)
} else {
fillCases(codeTxtL1)
}
}
}
}
function colorLetters(index){
for (let i=0;i<letters.length;i++){
if (mdpletters[i] === mdpletters[index]){
letters[i].style.cssText = "background-color:#014bac; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
}
}
}
function decolorLetters(){
for (let i=0;i<letters.length;i++){
letters[i].style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
}
}
function changeSameLetters(event,index){
for (let i=0;i<letters.length;i++){
if (mdpletters[i] === mdpletters[index]){
letters[i].value = event.target.value
}
}
}
function verif(){
for (let i=0;i<letters.length;i++){
if (mdpletters[i] === letters[i].value){
letters[i].style.cssText = "background-color:#057B26; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
} else {
letters[i].style.cssText = "background-color:#BF0909; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
}
}
}
styleMdp()
// listeners
for (let i=0;i<letters.length;i++){
letters[i].addEventListener("focus",function(){
colorLetters(i)
})
letters[i].addEventListener("blur",decolorLetters)
letters[i].addEventListener("change",function(event){
changeSameLetters(event,i)
})
}
button.addEventListener("click",verif)