tennysongardi

tennysongardi

Add to Opera GX please, i know its in Opera Development(I use GX and Development).

tennysongardi

Add to Opera GX please, i know its in Opera Development(I use GX and Development).

tennysongardi

So I thought maybe all Opera browsers should have some form of keyboard testing. So, here's the code!

<!DOCTYPE html>
<html>
<body>
<div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>
<style>
.fx {
  -webkit-display: flex;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.fx > div {
  padding-left: 20px;
  padding-right: 20px;
}

.fx > div:first-child {
   width: 30%;
}

.flex {
  -webkit-flex: 1;
  flex: 1;
}

#test-target {
  display: block;
  width: 100%;
  margin-bottom: 10px; 
}
</style>
<script>
let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnClearConsole = document.getElementById('btn-clear-console');

function logMessage(message) {
  document.getElementById("console-log").innerHTML += message + "<br>";
}

textarea.addEventListener('keydown', (e) => {
  if (!e.repeat)
    logMessage(`Key "${e.key}" pressed  [event: keydown]`);
  else
    logMessage(`Key "${e.key}" repeating  [event: keydown]`);
});

textarea.addEventListener('beforeinput', (e) => {
  logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
});

textarea.addEventListener('input', (e) => {
  logMessage(`Key "${e.data}" input  [event: input]`);
});

textarea.addEventListener('keyup', (e) => {
  logMessage(`Key "${e.key}" released  [event: keyup]`);
});

btnClearConsole.addEventListener('click', (e) => {
  let child = consoleLog.firstChild;
  while (child) {
   consoleLog.removeChild(child);
   child = consoleLog.firstChild;
  }
});
</script>
</body>
</html>

Hope you like it!

tennysongardi

Does anyone else think Opera should add something like Alt+Tab so we can easily switch between workspaces?

tennysongardi

So I think Opera GX needs better dark mode. Here's the code in HTML, CSS, JS!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color: #f2f2f2;
  color: #616161;
  font-size: 25px;
}

.dark-mode {
  background-color: #616161;
  color: #f2f2f2;
}
</style>
</head>
<body>

<p>Dark Mode</p>
<button onclick="myFunction()">Toggle dark mode</button>

<script>
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

Hope u like it! Test the code at something like repl.it or w3schools.com

tennysongardi

Hey there @channelofdomo ! Few thing.

Is your computer dark mode?
Is GX force dark mode, or do you use an extension?
@leocg has a point

tennysongardi

@tennysongardi

Best posts made by tennysongardi

Latest posts made by tennysongardi