399 lines
9.5 KiB
HTML
399 lines
9.5 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)
|
|
|
|
for (let i = 0; i < symb.length; i++) {
|
|
let s = symb[i]
|
|
if (s === "x" || s === "/") {
|
|
|
|
}
|
|
}
|
|
|
|
|
|
let symbb_2 = []
|
|
let chiffre_num_2 = []
|
|
let previous = chiffre_num[0]
|
|
for (let i = 0; i < symb.length; i++) {
|
|
const s = symb[i]
|
|
const n = chiffre_num[i + 1]
|
|
|
|
if (s === "x") {
|
|
console.log(previous, s, n)
|
|
previous = previous * n
|
|
} else if (s === "/") {
|
|
console.log(previous, s, n)
|
|
previous = previous / n
|
|
} else {
|
|
if (i === symb.length) {
|
|
console.log("n", n)
|
|
chiffre_num_2.push(n)
|
|
break
|
|
} else {
|
|
console.log("val prev2", previous)
|
|
chiffre_num_2.push(previous)
|
|
}
|
|
|
|
if (i === 0) {
|
|
console.log("toto2", previous)
|
|
chiffre_num_2.push(previous)
|
|
} else {
|
|
console.log(symb[i + 1] === "-", symb[i + 1] === "+", symb[i + 1])
|
|
if (symb[i + 1] === "-" || symb[i + 1] === "+")
|
|
console.log("valeur si +&-", n)
|
|
chiffre_num_2.push(n)
|
|
}
|
|
previous = n
|
|
symbb_2.push(s)
|
|
continue
|
|
}
|
|
console.log("val previous", previous)
|
|
chiffre_num_2.push(previous)
|
|
|
|
// console.log(previous)
|
|
}
|
|
console.log(chiffre_num_2)
|
|
console.log(symbb_2)
|
|
|
|
|
|
previous = chiffre_num_2[0]
|
|
for (let i = 0; i < symbb_2.length; i++) {
|
|
const s = symbb_2[i]
|
|
const n = chiffre_num_2[i + 1]
|
|
|
|
|
|
for (let i = 0; i < symbb_2.length; i++) {
|
|
const s = symbb_2[i]
|
|
// const n = chiffre_num_2[i + 1]
|
|
|
|
// if (s === "+") {
|
|
// console.log(previous, s, n)
|
|
// previous = previous + n
|
|
// } else if (s === "-") {
|
|
// console.log(previous, s, n)
|
|
// previous = previous - n
|
|
// }
|
|
}
|
|
// console.log(previous)
|
|
|
|
// info : les mult &div sont fonctionnels, les prios aussi. Mais la liste ne
|
|
// prend pas en compte la derniere valeur de la liste !
|
|
|
|
|
|
// let val_int = parseFloat(val)
|
|
// console.log(val_int)
|
|
|
|
// element_oui.value = ""
|
|
|
|
|
|
|
|
// document.getElementById("memoir1").value = val_int
|
|
return
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
<!-- Lexou doit me parler de "GIT" --> |