Random ASCII String Generator

index.html

<h1>Random String Generator</h1>
<div class="container">
  <div class="random-string">
    <label for="rnd">Random string: </label>
    <textarea id="rnd" type="textarea"> </textarea>
    <button onclick="generateRandomString()">Generate</button>
  </div>
</div>
<div class="container">
  <div class="settings">
    <h2>Settings</h2>
    <div class="form-group">
      <label for="len">Length: <span id="len-val">16</span></label>
      <input id="len" type="range" step="1" max="128" min="16" value="16" onchange="setLen()" class="slider" />
    </div>
    <div class="form-group">
      <label for="asciiMin">ASCII range:</label>
      <input id="asciiMin" type="number" min="33" max="254" placeholder="Minimum ASCII value">
      <input id="asciiMax" type="number" min="34" max="255" placeholder="Maximum ASCII value">
    </div>
    <button onclick="randomLen(); randomize()">Random</button>
  </div>
</div>

random-ascii-string-generator.markdown

Random ASCII String Generator

A Pen by abenteuerzeit on CodePen.

License.

script.js

let len = document.getElementById("len").value;
let asciiMin = 33;
let asciiMax = 126;

const generateRandomString = () => {
  let x = "";
  let str = document.getElementById("rnd");
  let asciiMinInput = document.getElementById("asciiMin").value;
  let asciiMaxInput = document.getElementById("asciiMax").value;

  if (asciiMinInput) {
    asciiMin = parseInt(asciiMinInput);
  }
  if (asciiMaxInput) {
    asciiMax = parseInt(asciiMaxInput);
  }

  for (let i = 0; i < len; i++) {
    x += String.fromCharCode(
      Math.floor(Math.random() * (asciiMax - asciiMin) + asciiMin)
    );
  }

  str.value = x;
};

const setLen = () => {
  let l = document.getElementById("len").value;
  len = l;
  updateLabel(len);
};

const randomLen = () => {
  len = Math.floor(Math.random() * (128 - 16) + 16);
  updateLabel(len);
  document.getElementById("len").value = len;
};

const updateLabel = (len) => {
  let label = document.getElementById("len-val");
  label.innerHTML = len;
};

const randomize = () => {
  let min = document.getElementById("asciiMin");
  let max = document.getElementById("asciiMax");
  const x = Math.floor(Math.random() * (125 - 33) + 33);
  min.value = x;
  max.value = Math.floor(Math.random() * (126 - x) + x);
};

style.css

html {
  font-weight: bold;
  padding: 5vh;
  margin: 1vw;
  background-color: #1c1c1c;
  color: snow;
}

.settings {
  margin: 2rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 100%;
  border: 0.5px solid lightgray;
  border-radius: 2rem;
  box-shadow: 0px 0px 5px #ff0080;
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.settings,
.random-string {
  width: 45%;
  margin: 1rem;
}

.form-group {
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  flex-wrap: wrap;
}

textarea {
  width: 100%;
  height: 5rem;
  padding: 1rem;
  border: none;
  background-color: #282828;
  color: #f5f5f5;
  font-size: 1.2rem;
  font-weight: bold;
}

input {
  background-color: #1c1c1c;
  color: #ff0080;
  border: 2px solid #ff0080;
  height: 2rem;
  padding: 0.5rem;
  width: 100%;
  font-size: 1.2rem;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ff0080;
}

input:hover {
  box-shadow: 0px 0px 15px #ff0080;
}

button {
  background-color: #ff0080;
  color: snow;
  margin: 1.168rem;
  padding: 1rem;
  border-radius: 5px;
  text-transform: uppercase;
}

button:hover {
  box-shadow: 0px 0px 15px #ff0080;
}

button:active {
  background-color: #990066;
  box-shadow: 0px 0px 10px white;
  position: relative;
  top: 0.5rem;
  right: 0.1rem;
}

label {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2vh;
  background: #1c1c1c; /* Change to a darker black color for a more cyberpunk aesthetic */
  outline: solid;
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: #ff0080;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #ff0080;
}

.slider:hover::-webkit-slider-thumb {
  box-shadow: 0px 0px 15px #ff0080;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: #ff0080;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #ff0080;
}

.slider:hover::-moz-range-thumb {
  box-shadow: 0px 0px 15px #ff0080;
}

.range-labels {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ff0080,
      0 0 40px #ff0080, 0 0 50px #ff0080, 0 0 60px #ff0080, 0 0 70px #ff0080;
  }
  to {
    text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080, 0 0 15px #ff0080,
      0 0 20px #ff0080, 0 0 25px #ff0080, 0 0 30px #ff0080, 0 0 35px #ff0080;
  }
}

h1 {
  animation: neon 1s ease-in-out infinite alternate;
}

See this on CodePen