Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML I need help with a few things for my project

phofu

Coder
Hello everyone! I recently made a web chat app, called Box Chat, and so far it is looking great! I made the web chat app using HTML and Notepad, but I made the website using Google Sites. I used a guide on making this: https://davidwalsh.name/build-a-decentralized-web-chat-in-15-minutes. Anyways, there's a few things that I need help with:

1. Having the system generate a random name for users when they log on. This site is supposed to encourage anonymity, so for right now, usernames are generated as long keys, like a Bit Coin key. I would much rather have the system generate a random color for usernames, such as GREEN.

2. I need help on making it to where when a user disconnects, it says it disconnects. Right now, I have say a user connects when they connect, however, I am not sure how to make it say a user has disconnected when someone disconnects.

3. I need help to make it say "someone is typing" when someone is typing.

Here is my code so far:

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Box Chat</title>
  <style>
    body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
    pre { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; }
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
    #input::before { content: "> "; }
  </style> 

  <script>
    function log(message) {
      document.getElementById("log").textContent += message + "\n";
    }
  </script>

<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>

</head>
<body>

  <pre id="log"></pre>

<pre id="input" contenteditable="true"></pre>
</body>
<script>
  log("Welcome to Box Chat! It may take a few moments for users to connect, please be patient. Remember, it is your responsibility to stay safe!");

  /***** Your code goes here! *****/

var b = Bugout();
log(b.address() + " [ you have connected ]");

var b = Bugout("box-chat");
b.on("seen", function(address) { log(address + " [ someone else has connected ]"); });

b.on("message", function(address, message) {
  log(address + ": " + message);
});

document.getElementById("input").onkeydown = function(ev) {
    if (ev.keyCode == 13) {
      if (b.lastwirecount) {
        b.send(ev.target.textContent);
        ev.target.textContent = "";
      }
      ev.preventDefault();
    }
  }

</script>

</html>

If you want to check out my site, here's the link: https://sites.google.com/view/box-chat/box-chat

I hope I can get help, I've asked reddit, but no one seems to be helping me.
 
Hello everyone! I recently made a web chat app, called Box Chat, and so far it is looking great! I made the web chat app using HTML and Notepad, but I made the website using Google Sites. I used a guide on making this: https://davidwalsh.name/build-a-decentralized-web-chat-in-15-minutes. Anyways, there's a few things that I need help with:

1. Having the system generate a random name for users when they log on. This site is supposed to encourage anonymity, so for right now, usernames are generated as long keys, like a Bit Coin key. I would much rather have the system generate a random color for usernames, such as GREEN.

2. I need help on making it to where when a user disconnects, it says it disconnects. Right now, I have say a user connects when they connect, however, I am not sure how to make it say a user has disconnected when someone disconnects.

3. I need help to make it say "someone is typing" when someone is typing.

Here is my code so far:

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Box Chat</title>
  <style>
    body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
    pre { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; }
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
    #input::before { content: "> "; }
  </style>

  <script>
    function log(message) {
      document.getElementById("log").textContent += message + "\n";
    }
  </script>

<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>

</head>
<body>

  <pre id="log"></pre>

<pre id="input" contenteditable="true"></pre>
</body>
<script>
  log("Welcome to Box Chat! It may take a few moments for users to connect, please be patient. Remember, it is your responsibility to stay safe!");

  /***** Your code goes here! *****/

var b = Bugout();
log(b.address() + " [ you have connected ]");

var b = Bugout("box-chat");
b.on("seen", function(address) { log(address + " [ someone else has connected ]"); });

b.on("message", function(address, message) {
  log(address + ": " + message);
});

document.getElementById("input").onkeydown = function(ev) {
    if (ev.keyCode == 13) {
      if (b.lastwirecount) {
        b.send(ev.target.textContent);
        ev.target.textContent = "";
      }
      ev.preventDefault();
    }
  }

</script>

</html>

If you want to check out my site, here's the link: https://sites.google.com/view/box-chat/box-chat

I hope I can get help, I've asked reddit, but no one seems to be helping me.
I forgot one thing:

How would I make private rooms as well?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom