363 lines
8.4 KiB
HTML
363 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title> Max la menace
|
|
</title>
|
|
<style>
|
|
#interface {
|
|
/* flex: auto; */
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
height: 25%;
|
|
|
|
|
|
}
|
|
|
|
.btn {
|
|
/* flex: auto; */
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
}
|
|
|
|
.btn>button {
|
|
flex-grow: 1;
|
|
width: 45px;
|
|
}
|
|
|
|
#chiffres {
|
|
width: 135px;
|
|
}
|
|
|
|
#symboles {
|
|
flex-direction: column;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<button id="truc"> gauche à droite </button>
|
|
<button id="couleur"> le changement c'est maintenant </button><br>
|
|
<button id="jolie"> 4 5 6 / </button>
|
|
|
|
<div id="interface">
|
|
<div id="chiffres" class="btn">
|
|
<button>7</button>
|
|
<button>8</button>
|
|
<button>9</button>
|
|
<button>4</button>
|
|
<button>5</button>
|
|
<button>6</button>
|
|
<button>1</button>
|
|
<button>2</button>
|
|
<button>3</button>
|
|
<button>0</button>
|
|
<button>,</button>
|
|
</div>
|
|
<div id="symboles" class="btn">
|
|
<button class="smb" id="-">-</button>
|
|
<button class="smb" id="+">+</button>
|
|
<button class="smb" id="/">/</button>
|
|
<button class="smb" id="x">x</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input type="text" id="oui"> <br>
|
|
<input type="text" id="nom">
|
|
<input type="text" id="memoir1">
|
|
<input type="text" id="memoir2">
|
|
|
|
<input type="reset" id="reset" value="effacer">
|
|
<input type="submit" id="valider" value="valider">
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
document.body.style.backgroundColor = "cadetblue";
|
|
|
|
|
|
|
|
document.getElementById("reset").addEventListener("click", reset_8)
|
|
function reset_8(ev) {
|
|
|
|
|
|
document.getElementById("nom").value = ""
|
|
|
|
document.getElementById("oui").value = ""
|
|
|
|
document.getElementById("memoir1").value = ""
|
|
|
|
document.getElementById("memoir2").value = ""
|
|
|
|
//console.log(prout.value)
|
|
// console.log(document.getElementById("oui").value)
|
|
}
|
|
|
|
|
|
document.getElementById("truc").addEventListener("click", truc_f)
|
|
function truc_f(ev) {
|
|
|
|
let interface_element = document.getElementById("interface")
|
|
console.log(interface_element.style.flexDirection)
|
|
|
|
if (interface_element.style.flexDirection !== "row-reverse") {
|
|
interface_element.style.flexDirection = "row-reverse"
|
|
} else {
|
|
interface_element.style.flexDirection = "row"
|
|
}
|
|
}
|
|
document.getElementById("couleur").addEventListener("click", cool)
|
|
function cool(ev) {
|
|
let chiffres_element = document.getElementById("chiffres")
|
|
let tous = chiffres_element.querySelectorAll("button")
|
|
|
|
// tous.forEach((btn) => {
|
|
// for (let i = 0; i < tous.length; i++) {
|
|
// let btn = tous[i]
|
|
// console.log(btn)
|
|
|
|
|
|
var n = 0
|
|
|
|
while (n < tous.length) {
|
|
let btn = tous[n]
|
|
|
|
// console.log(tous)
|
|
|
|
|
|
|
|
if (btn.textContent === ",") {
|
|
return
|
|
}
|
|
// console.log(btn)
|
|
|
|
if (btn.style.backgroundColor !== "red") {
|
|
btn.style.backgroundColor = "red"
|
|
} else {
|
|
btn.style.backgroundColor = ""
|
|
|
|
}
|
|
n++;
|
|
}
|
|
}
|
|
|
|
document.getElementById("jolie").addEventListener("click", bien)
|
|
function bien(ev) {
|
|
let chiffres_element = document.getElementById("interface")
|
|
let peu = chiffres_element.querySelectorAll("button")
|
|
|
|
// tous.forEach((btn) => {
|
|
// for (let i = 0; i < tous.length; i++) {
|
|
// let btn = tous[i]
|
|
// console.log(btn)
|
|
|
|
|
|
var n = 0
|
|
|
|
while (n < peu.length) {
|
|
let btn = peu[n]
|
|
|
|
// console.log(tous)
|
|
|
|
|
|
|
|
if (btn.textContent === "4" || btn.textContent === "5" || btn.textContent === "6" || btn.textContent === "/") {
|
|
|
|
if (btn.style.backgroundColor === "blue") {
|
|
btn.style.backgroundColor = ""
|
|
}
|
|
else {
|
|
btn.style.backgroundColor = "blue"
|
|
|
|
}
|
|
}
|
|
|
|
|
|
console.log(btn)
|
|
n++;
|
|
continue
|
|
|
|
}
|
|
|
|
|
|
n++;
|
|
}
|
|
|
|
document.querySelectorAll("#interface button").forEach((el) => { el.addEventListener("click", tot) })
|
|
function tot(ev) {
|
|
// console.log(ev.target.textContent)
|
|
let val = ev.target.textContent
|
|
document.getElementById("oui").value += val
|
|
console.log(ev.target)
|
|
|
|
if (ev.target.classList.contains("smb")) {
|
|
if (val === "x") {
|
|
val = "*"
|
|
|
|
|
|
}
|
|
document.getElementById("memoir2").value = val
|
|
}
|
|
|
|
|
|
|
|
}
|
|
document.getElementById("valider").addEventListener("click", valider_f);
|
|
// console.log(document.getElementById("nom"))
|
|
// console.log(document)
|
|
function valider_f(ev) {
|
|
var element_oui = document.getElementById("oui")
|
|
//console.log(ev)
|
|
let val = element_oui.value
|
|
console.log(val)
|
|
|
|
if (val === "") {
|
|
console.log("met un truc !")
|
|
return
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let make_number = (l) => {
|
|
let prems = ""
|
|
for (const e of l) {
|
|
prems += e
|
|
}
|
|
|
|
return parseFloat(prems)
|
|
}
|
|
|
|
let memoire_premier_chiffre = []
|
|
let chiffre_num = []
|
|
let symb = []
|
|
|
|
|
|
// analise caractere pour en faire 2 listes list chiffre_num & sym
|
|
for (let i = 0; i < val.length; i++) {
|
|
let c = val[i]
|
|
// console.log(c)
|
|
// console.log(memoire_premier_chiffre)
|
|
|
|
if (c === "-" || c === "+" || c === "x" || c === "/") {
|
|
if (i === 0) {
|
|
if (c === "x" || c === "/") {
|
|
continue
|
|
}
|
|
memoire_premier_chiffre.push(c)
|
|
continue
|
|
}
|
|
chiffre_num.push(make_number(memoire_premier_chiffre))
|
|
// console.log(chiffre_num)
|
|
|
|
symb.push(c)
|
|
|
|
memoire_premier_chiffre = []
|
|
|
|
continue
|
|
}
|
|
if (c === ",") {
|
|
c = "."
|
|
}
|
|
|
|
memoire_premier_chiffre.push(c)
|
|
}
|
|
|
|
|
|
// 2+3/4-7*9 2/3-4*7+9
|
|
|
|
chiffre_num.push(make_number(memoire_premier_chiffre))
|
|
|
|
// console.log(chiffre_num)
|
|
// console.log(symb)
|
|
|
|
let n1 = chiffre_num[0]
|
|
for (let i = 0; i < symb.length; i++) {
|
|
let s = symb[i]
|
|
let n2 = chiffre_num[i+1]
|
|
|
|
if (s === "x" || s === "/") {
|
|
console.log("prio", s, n1, n2)
|
|
if (s === "x" ) {
|
|
n1 = n1 * n2
|
|
} else {
|
|
n1 = n1 / n2
|
|
}
|
|
} else {
|
|
console.log("no prio", s, n1, n2)
|
|
|
|
|
|
|
|
let nn1 = n2
|
|
// if (s2 === "x" || s2 === "/") {
|
|
for (let index = i+1; index < symb.length; index++) {
|
|
let nn2 = chiffre_num[index+1]
|
|
let s2 = symb[index]
|
|
if (s2 === "x" || s2 === "/") {
|
|
|
|
if (s2 === "x" ) {
|
|
nn1 = nn1 * nn2
|
|
} else {
|
|
nn1 = nn1 / nn2
|
|
}
|
|
|
|
n2=nn1
|
|
} else {
|
|
break
|
|
}
|
|
|
|
i = index
|
|
console.log("XXX",n2)
|
|
}
|
|
// }
|
|
if (s === "+" ) {
|
|
n1 = n1 + n2
|
|
} else {
|
|
n1 = n1 - n2
|
|
}
|
|
}
|
|
|
|
console.log("resultat", n1)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
<!-- Lexou doit me parler de "GIT" --> |