How to prevent a grid-item from changing size when adding text?

Asked

Viewed 30 times

1

I am developing a small tool that takes a user text and generates an encrypted version (Caesar cipher). I managed to build the layout of the GUI the way I would like using the model grid-container. However, every time the encrypted text is generated, the grid-item of this text changes size.

Here’s the code to replicate my problem:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cifra de César</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>

    <div class="grid-container">
        <div class="item1">   
            <textarea id="user-text" name="w3review" style="resize: none;">

        </textarea>
        </div>
        <div class="item2"> 
            <div class="result">

            </div>
        </div>
        <div class="item3">    
            <label class="label key" for="fname">Chave:</label>
            <input type="text" id="key" name="key"><br><br></div>
        <div class="item4"> 
            <button class="button button1" onclick="encrypt()">Criptografar</button> 
        </div>
    </div>
    
</body>
</html>

script js.

function caesar(message, key, mode){
    let SYMBOLS='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 !?.'
    let translated
    let translatedIndex

    for (symbol of message){
        if (SYMBOLS.includes(symbol)){
            let symbolIndex=SYMBOLS.indexOf(symbol)
            if (mode=="encrypt"){
                translatedIndex=symbolIndex+key
            }
            else if (mode=="decrypt"){
                translatedIndex=symbolIndex-key
            }
            if (translatedIndex>=SYMBOLS.length){
                translatedIndex = translatedIndex-SYMBOLS.length
            }
            else if (translatedIndex<0){
                translatedIndex = translatedIndex-SYMBOLS.length
            }
            translated=translated+ SYMBOLS[translatedIndex]}
        else {
            translated=translated+symbol
        }
    }

    return document.querySelector('.result').innerHTML =translated
}

function encrypt() {
    return caesar(message=document.getElementById("user-text").value,
    key=Number(document.getElementById("key").value), mode="encrypt")
}

css style.

body {
    background: #070908;
    /* color: #E7F3FD; */
}

.grid-container {
    display: grid;
    grid-template-areas: 
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-text input-text enc-text enc-text'
    'input-key enc-button enc-text enc-text';
    /* grid-template-columns: auto auto; */
    width: 900px;
    height: 600px;
    padding: 50px 75px 75px 200px;

}

.item1 {
    background-color: rgba(255, 255, 255, 0.8);
    grid-area: input-text;
  }

.item2 {
    background-color: rgba(255, 255, 255, 0.8);
    grid-area: enc-text;
    text-align: justify;
}

.result {
    background-color: white;
    width: 100%;
    height: 100%;
    border: 10px solid rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    padding: 20px 10px 10px 15px;
}

.item3 {
    background-color: rgba(255, 255, 255, 0.8);
    grid-area: input-key;
    padding: 20px 0;
    text-align: center;

}

#key {
    width: 20px;
}

.item4 {
    background-color: rgba(255, 255, 255, 0.8);
    grid-area: enc-button;
    padding: 20px 0;

}

.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

.button1 {
    background-color: #4CAF50;
} /* Green */

textarea {
    width: 100%;
    height: 100%;
    border: 10px solid rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    padding: 20px 10px 10px 15px;

  }

How do I make for the grid-item keep a fixed size independent of the amount of text it receives?

css

  • In my previous research, I found this question: https://answall.com/questions/431504/grid-variando-tamanho-conforme-o-texto . However, the author of the reply only posted the code, without explaining. So I didn’t understand

  • No need to use div necessarily. Please publish the reply.

1 answer

1


An immediate possibility is to replace the <div class="result"> by a <textarea>.

function caesar(message, key, mode) {
  let translated = "";
  for (s of message) {
    translated += mode == "encrypt" ? String.fromCharCode(s.charCodeAt(0) + key) :
      mode == "decrypt" ? String.fromCharCode(s.charCodeAt(0) - key) :
      s;
  }
  //Troquei o inner html por innerText para evitar injeção acidental de código.
  document.querySelector('.result').innerText = translated;
}

function encrypt() {
  return caesar(message = document.getElementById("user-text").value,
    key = Number(document.getElementById("key").value), mode = "encrypt")
}
body {
  background: #070908;
  /* color: #E7F3FD; */
}

.grid-container {
  display: grid;
  grid-template-areas: 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-text input-text enc-text enc-text' 'input-key enc-button enc-text enc-text';
  /* grid-template-columns: auto auto; */
  width: 900px;
  height: 600px;
  padding: 50px 75px 75px 200px;
}

.item1 {
  background-color: rgba(255, 255, 255, 0.8);
  grid-area: input-text;
}

.item2 {
  background-color: rgba(255, 255, 255, 0.8);
  grid-area: enc-text;
  text-align: justify;
}

.result {
  background-color: white;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  padding: 20px 10px 10px 15px;
}

.item3 {
  background-color: rgba(255, 255, 255, 0.8);
  grid-area: input-key;
  padding: 20px 0;
  text-align: center;
}

#key {
  width: 20px;
}

.item4 {
  background-color: rgba(255, 255, 255, 0.8);
  grid-area: enc-button;
  padding: 20px 0;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {
  background-color: #4CAF50;
}


/* Green */

textarea {
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  padding: 20px 10px 10px 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cifra de César</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>

  <div class="grid-container">
    <div class="item1">
      <textarea id="user-text" name="w3review" style="resize: none;"></textarea>
    </div>
    <div class="item2">
      <!-- Aqui substitui o div por um textarea-->
      <textarea class="result" readonly></textarea>
    </div>
    <div class="item3">
      <label class="label key" for="fname">Chave:</label>
      <input type="text" id="key" name="key"><br><br></div>
    <div class="item4">
      <button class="button button1" onclick="encrypt()">Criptografar</button>
    </div>
  </div>

</body>

</html>

I also modified the function caesar(), manipulating the code UTF-16 of each character in menssage adding or decreasing key in accordance with the mode.

  • Perfect. And thanks for the improvement in function Esar tbm. By the way you know pq in miha version of the function the program was printing undefined together with the expected output?

  • 1

    @Lucas. You start it translated with undefined on the line let translated. Trade for let translated = "" your code no longer prints the undefined at the start of departure.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.