Discussion :

[clickandgo]

Bonjour à tous

Actuellement entrain de réaliser une calculatrice en ligne (je sais, c'est pas très original ... ), je me trouve confronté à la difficulté suivante :

Je voudrais qu'après sélection d'une option, le clavier passe de classique à étendu (scientifique) et vice-versa, pour cela j'ai mis en place un select ...

L'on ne peut utiliser display:none dans le cas présent, la structure de la grid et du html changent suivant le mode classique / scientifique, le clavier scientifique (partie gauche) devant entièrement disparaitre et la carcasse devant se rétrécir lorsque en mode classique...

Ma question est : comment faire en sorte que le changement de configuration du clavier (mode classique ou scientifique) se fasse de manière souple ?

Actuellement j'ai utilisé un template-grid-area (voir code) et toutes les divs sont en dur dans le html... Cela veut-il dire qu'il faut modifier le style css et le html directement par injection dans le code de façon à ce que la disposition et existence des divs soit gérée dynamiquement ?.

Je sais que l'on peut facilement changer / injecter le template-grid-area depuis le code mais qu'en est-il du html ? (innerHTML) Y a t'il moyen de faire référence à une page html directement plutôt que de l'injecter par le code (ce qui n'est pas très commode lorsque beaucoup de div sont à créer à la volée...)

L'idéal serait de pouvoir apeller css et html en tant que fichiers et que leur contenu lui soit ensuite injecté par le code ... Est-ce faisable comme on le fait avec des includes en php ?

Si vous avez une autre solution, je suis preneur...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
body {
    font-family: verdana;
    padding:0;
    margin: 0; 
    /* display:flex;
    justify-content: center;
    align-content: center; */
    background-color: rgb(252, 241, 229);
}
 
nav{
    display:flex;
    align-items: center;
    color:white;
    height:40px;
    width:auto;
    background-color: rgb(255, 140, 0);
}
 
nav h1{
    padding: 5px;
}
 
.touche {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;   
    border: 2px solid rgb(215, 215, 215);
    border-radius: 5px;
    box-shadow: 2px 2px 1px 1px gray;
    cursor: pointer;
    font-weight: normal;
}
 
.correction{
    background-color: cadetblue;
    color:white;
}
.operation{
    background-color:rgb(210, 210, 210);
    color:rgb(43, 100, 120);    
}
.precedent{
    color: gray;    
}
 
.sortie{
    font-weight: bold;
    font-size: 30px;
}
 
.touche:active {
    transform: translateY(2px)
    translateX(2px);
    border: 2px solid brown;
}
 
.calculatrice{
    display: grid;
    grid-template-columns: repeat(7,70px);   
    grid-template-rows: minmax(120px,auto) auto 35px 35px 35px 35px 35px;
    grid-template-areas:
        "affichage affichage affichage affichage affichage affichage affichage"
        "btn-modes btn-modes btn-modes btn-modes btn-modes btn-modes btn-modes"
        "rad-deg rad-deg factor parenthG parenthD pcent correction"
        "inverse sinus ln num7 num8 num9 division"
        "pi cos log num4 num5 num6 multiplication"
        "e tan racine num1 num2 num3 soustraction"
        "ans exponentielle exposant num0 virgule égal addition";   
 
    gap: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    width: fit-content;
    border: 4px solid rgb(230, 230, 230);
    border-radius: 15px;
    box-shadow: 2px 2px 1px 1px lightgray;
    padding: 20px;
    background-color: rgb(254, 254, 254);    
}
 
.btn-modes{
    display:inline-flex;
    grid-area:btn-modes;    
}
.btn-mode{
    color:gray;
    border-radius: 3px;
    border:1px solid lightgray;
    font-size: 0.8rem;
    padding:4px 7px;
    cursor:pointer;
}
.btn-mode-activated{
    background-color: blue;
    color:white;
}
 
.affichage {
    display: flex;
    justify-content: right;
    align-items: flex-end;
    background-color: rgb(252, 253, 244);
    grid-area: affichage;
    justify-content: space-around;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: -1px -2px 2px 2px lightgray;
    margin-bottom: 10px;
    padding-right: 10px;
    letter-spacing: 1px;
    word-wrap: break-word;
    word-break: break-all;
}
 
.chiffre {
    background-color: rgb(243, 243, 243);
}
 
#num9 {
    grid-area: num9;
}
 
#num8 {
    grid-area: num8;
}
 
#num7 {
    grid-area: num7;
}
 
#num6 {
    grid-area: num6;
}
 
#num5 {
    grid-area: num5;
}
 
#num4 {
    grid-area: num4;
}
 
#num3 {
    grid-area: num3;
}
 
#num2 {
    grid-area: num2;
}
 
#num1 {
    grid-area: num1;
}
 
#num0 {
    grid-area: num0;
}
 
#addition {
    grid-area: addition;
}
 
#soustraction {
    grid-area: soustraction;
}
 
#division {
    grid-area: division;
}
 
#multiplication {
    grid-area: multiplication;
}
 
#égal {
    grid-area: égal;
    background-color: cornflowerblue;
    color: white;
}
 
#virgule {
    grid-area: virgule;
}
 
#rad-deg {
    grid-area: rad-deg;
}
 
#parenthG {
    grid-area: parenthG;
}
 
#parenthD {
    grid-area: parenthD;
}
 
#correction {
    grid-area: correction;
}
 
#factor {
    grid-area: factor;
}
 
#pcent {
    grid-area: pcent;
}

[mathieu]

je pense que vous pouvez faire cela en css en faisant quelque chose comme cela et en modifiant juste la classe css de l'élément le plus haut dans la hiérarchie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.calculatrice.mode_scientifique
{
    grid-template-areas:
        "affichage affichage affichage affichage affichage affichage affichage"
        "btn-modes btn-modes btn-modes btn-modes btn-modes btn-modes btn-modes"
        "rad-deg rad-deg factor parenthG parenthD pcent correction"
        "inverse sinus ln num7 num8 num9 division"
        "pi cos log num4 num5 num6 multiplication"
        "e tan racine num1 num2 num3 soustraction"
        "ans exponentielle exposant num0 virgule égal addition";      
}
 
.calculatrice.mode_classique
{
    grid-template-areas:
        "affichage affichage affichage affichage"
        "btn-modes btn-modes btn-modes btn-modes"
        "parenthG parenthD pcent correction"
        "num7 num8 num9 division"
        "num4 num5 num6 multiplication"
        "num1 num2 num3 soustraction"
        "num0 virgule égal addition";      
}

[clickandgo]

Bonjour,

J'avais déjà pensé à cette solution, malheureusement les touches scientifiques ne sont plus dans la grid mais s'affichent aléatoirement dans la carcasse de la calculatrice ( en les mettant en display:none... elles continuent à occuper un espace non récupérable et influençant la disposition de la grid... )

Je pense donc qu'il faut annuler les divs non désirées, c'est pour cela que je me demandais si l'on pouvait plutôt "lire" d'une portion de page html déjà créée.

Dans le pire des cas, si aucune autre solution, je ferai une injection (innerHTML) du html sur la div principale mis en variable, mais niveau maintenabilité c'est pas génial...

[NoSmoking]

Bonjour,
si tu définis des largeurs pour tes colonnes, grid-template-columns: repeat(7,70px), il te faut les redéfinir si tu changes le nombre de colonnes et si tu veux un bon rendu.

Si tu sors des éléments du « plan de grid », il te faut également mettre les éléments que tu ne veux plus voir apparaître en display none sinon ils vont réintégrer le flux du document et apparaîtront quelque part dans ta page.

On n'a pas le code HTML de ta calculatrice mais peut-être pourrais-tu également regrouper tes touches pour une meilleur organisation/gestion.

[clickandgo]

Merci pour vos réponses

En fait, pour l'instant je pense qu'une méthode serait de mettre en variable l'organisation/ plan de la grid et de tout simplement appeler telle ou telle variable selon le pattern choisi du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const calc_scientifique =`"num 1 num2 num 3"...`
const calc_classique =`"touche + touche -  touche /"...`

Ou de créer autant de fichiers css ne contenant que les dispositions et de les appeler depuis le code, le plus important pour moi étant que cela soit fait de façon fluide et sans recharger la page...

[DevWebMobile]

Pour ma part je structurerais le code avec un pattern "State Machine".

Pour chacun de tes deux states, l'affichage et les events clavier auront un comportement différent.

[NoSmoking]

On n'a pas le code HTML...

Toujours pas même une esquisse de structure

...mais peut-être pourrais-tu également regrouper tes touches pour une meilleur organisation/gestion.

Je maintiens avec ce que l'on peut lire ci-dessus qu'il n'y a pas lieu de compliquer les choses.

Pour te montrer l'idée et la « puissance » des layout Grid, entre autre, je mets un lien vers un exemple simple qui pourrait s'appliquer à ton besoin facilement :

↪ Grid Layout Affichage/masquage

[clickandgo]

Merci NoSmoking

Bien ton exemple mais peux tu détailler quelle méthode tu as utilisé ?

Alors, je n'ai aucune difficulté à mettre en place différents layouts/grid en css, le problème qui se pose c'est que si l'on injecte pas le html par le code, les éléments html en surplus apparaissent dans la page quand même et en dehors de la grid évidement...

L'effet recherché est celui de pouvoir switcher entre plusieurs claviers, donc de cacher / afficher certaines touches sans recharger la page ... A mon avis ce n'est réalisable sur une seule page qu'en injectant le html depuis le code ... Mais je peux me tromper...

Pendant que j'y pense : Sauriez-vous où l'on peut trouver des tutos pour créer un interpréteur en notation Polonaise inversée qui expliquerait comment faire les stacks/piles et à quel moment ? J'ai commencé à étudier la question mais je ne sais pas comment l'appliquer à une calculatrice... Je ne veux surtout pas utiliser eval()...

Merci d'avance

[mathieu]

Bien ton exemple mais peux tu détailler quelle méthode tu as utilisé ?

regardez le code de la page, il y a juste une ligne de code javascript qui modifie la classe css du conteneur.

[clickandgo]

Bon, vu la solution proposée qui marche très bien et qui est exactement ce que je voulais faire je vais m'en inspirer...

Aparament mon problème venait du fait que je n'avais pas englobé les touches du clavier scientifique dans un container à part de façon à pouvoir switcher...

Merci à tous