Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Compatibilité mobile] calculatrice

html css javascript

    27 novembre 2021 à 17:47:51

    voila le code de la calculatrice que j'ai codé avec html css et javascript et qui fonctionne seulement sur mon windows pas sur mon tele svp aider moi pour faire marcher ce code sur mon mobile j'ai galaxy J3 2016
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>Calculatrice</title>
            <link rel="stylesheet" href="style.css"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </head>
    
        <body>
          <div class="calc">
              <div id="ecran"></div>
              <div id="boutons">
              <div id="delete">C</div>
              <div id="supprimer">← </div>
              <div class="bouton">(</div>
              <div class="bouton">)</div>
              <div class="bouton">1</div>
              <div class="bouton">2</div>
              <div class="bouton">3</div>
              <div class="bouton">4</div>
              <div class="bouton">5</div>
              <div class="bouton">6</div>
              <div class="bouton">7</div>
              <div class="bouton">8</div>
              <div class="bouton">9</div>
              <div class="bouton">0</div>
              <div class="bouton">*</div>
              <div class="bouton">/</div>
              <div class="bouton">+</div>
              <div class="bouton">-</div>
              <div class="bouton">.</div>
              <div id="egal">=</div>
            </div>
          </div>
          
          <script src="app.js"></script>
        </body>
    </html>
    
    
    #ecran
    {
      width: 300px;
      background: rgb(255,255,255);
      height: 100px;
      display: table-cell;
      border-radius: 10px;
      font-size: 1.9em;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      max-width: 300px;
      word-wrap: break-word;
    }
    
    #boutons
    {
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 13px;
    }
    
    .bouton
    {
      color: black;
      padding: 10px;
      font-size: 1.9em;
      margin: 9px;
      cursor: pointer;
      background: white;
      border-radius: 10px;
      font-weight: bold;
      width: 25px;
      text-align: center;
    }
    
    #egal
    {
      color: white;
      padding: 10px;
      font-size: 1.9em;
      margin: 10px;
      cursor: pointer;
      background: green;
      border-radius: 10px;
      font-weight: bold;
      width: 25px;
      text-align: center;
    }
    
    .calc
    {
      width: 300px;
      margin: auto;
      padding: 7px;
      background: black;
      border-radius: 10px;
      box-shadow: 0 5px black;
    }
    
    .bouton:hover
    {
      box-shadow: 5px 5px 5px black;
      transform: translateY(2px);
    }
    
    
    #egal:hover
    {
      box-shadow: 5px 5px 5px black;
      transform: translateY(2px);
    }
    
    body
    {
      display: flex;
      justify-content: center;
      background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
    
    #delete
    {
      color: black;
      padding: 10px;
      font-size: 1.9em;
      margin: 10px;
      cursor: pointer;
      background: rgb(255,184,113);
      border-radius: 10px;
      text-align: center;
      width: 25px;
    }
    a
    {
    text-decoration: none;
    color: black;
    }
    #delete:hover,#supprimer:hover
    {
      box-shadow: 5px 5px 5px black;
      transform: translateY(2px);
    }
    
    #supprimer
    {
      color: black;
      padding: 10px;
      font-size: 1.9em;
      margin: 10px;
      cursor: pointer;
      background: rgb(255,184,113);
      border-radius: 10px;
      width: 25px;
    }
    let elt=document.getElementById('ecran');
    let elt2=document.getElementById('egal');
    let elt3=document.getElementById('supprimer');
    var i=0;
    for(i=0;i<17;i++)
    {
        document.getElementsByClassName('bouton')[i].addEventListener('click',function(e){
            e = e || window.event;
            var target=e.target || e.srcElement;
            elt.innerText+=target.innerText || target.textContent;
            });
    }
    
    document.getElementById('delete').addEventListener('click',function (){
        elt.textContent="";
    });
    
    
    elt2.addEventListener('click',function(){
        const calcul=eval(elt.textContent);
        elt.textContent=calcul;
    });
    
    
    elt3.addEventListener('click',function(){
        var long=elt.textContent.length;
        var newchaine=elt.textContent.slice(0,(long-1));
        elt.textContent=newchaine;
    });



    -
    Edité par Mohamed Knoud 29 novembre 2021 à 21:11:55

    • Partager sur Facebook
    • Partager sur Twitter
      27 novembre 2021 à 18:59:43

      Si le code marche sur un appareil mais pas un autre regarder la documentation des fonctions que vous avez utilisé pour voir la compatibilité
      • Partager sur Facebook
      • Partager sur Twitter
        28 novembre 2021 à 15:04:11

        Un truc m'a fait tiquer :

        const calcul=eval(elt.textContent);

        Normalement, on n'utilise plus eval()

        Il est fort possible que la politique de sécurité du navigateur de ton galaxie interdise l'utilisation de eval qui constitue un gros trou de sécurité.

        Eval sur MDN (et alternatives)

        • Partager sur Facebook
        • Partager sur Twitter
          29 novembre 2021 à 10:08:18

          Bonjour,

          Mauvais titre

          Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

          Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

          De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

          Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

          Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

          (titre originel : calculatrice html css javascript)

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

          [Compatibilité mobile] calculatrice

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown