javascript: first steps of chatbox

Keeping with tradition of these javascript experiments, this is set up just like all the others:   My html, and js file are in my desktop folder, and I double click my html file to see it run in the default browser. 




I want to make my whispering wall's text display in a chatbox, so the user can see what they typed, and prior conversations.
As of now, the whispering wall will take input, process it through the NLTK and python code, and return a response to screen.
But none of the input is kept (or previous Wiwa responses) once the html is refreshed with the retrieved response from my scripts.

So the first thing to do is see how to create this scrolling text box.
This post only covers the experiment of creating/exploring how to display a chatbox.
( I am hoping to create the second part to this experiment today which will cover placing a script line from a file, into the chat box.)


Just a few items I had to look up for the HTML javascript code:
"clearing input field":  https://www.w3schools.com
"keep scroll at bottom": https://stackoverflow.com
"add a breakline to childNode:" https://stackoverflow.com

break it, modify it, explore, create, hydrate.
The code:

                                             <!-- HTML -->

<!DOCTYPE html>

<html>
<head>
<title>Exercise 4 chatbox</title>
 <script type="text/javascript" src="/home/nellie/Desktop/browser test/ex4.js"></script>
  </head>
  <!-- #91cac5 == greyish teal-->
  <!-- #413647 == dark grey violet -->
  <!-- #edc488 == Peach -->
  <body id="Main_Body" style="background: #413647; font-color: ">
    <br>
    <br>


  <h1 style="color: #edc488;"> This is the browser opened page </h1>
  <br>


<h3> CHAT </h3>
  <div style="border:solid #d5500d; background: #EDC488; height: 100px; width: 50%; overflow: auto;" id="chatbox">
  </div>
  <h1> INPUT: </h1>
  <textarea id="user_input" type="text" onfocus="this.value=''" maxlength="120" style="height: 20px; width: 400px; border: solid #d5500d;">
  </textarea>
  <div style="display: inline-block; margin-left: 25%; margin-right: 25%;">
    <button id="mybutton" onclick="MyFunction()">Test the code</button>




  </body>
  </html>






                                          // JavaScript //

//javascript for ex4 chatbox
function scroll_to_bottom(){
  var objDiv = document.getElementById("chatbox");
  objDiv.scrollTop = objDiv.scrollHeight;
}

function MyFunction(){
  element = document.getElementById("chatbox");
  linebreak = document.createElement("br");
  user_input = document.getElementById("user_input").value;
  element.append(user_input);
  element.appendChild(linebreak);
  scroll_to_bottom();
}





 



Comments

Post a Comment

Popular posts from this blog

playing with color in powershell python

Here's a bit I'm working on.  I've discovered I love doing Ascii.  Examples of how to use the color changing escape.  I got a table from StackOverflow: https://stackoverflow.com/questions/287871/print-in-terminal-with-colors-using-python the charts are way at the bottom. So far accurate for me.  def prettyjunk ( self ): # 1 is bold, 0 is plain, 2 is dull text_red = ' \x1b [1;31;40m' stop_color = ' \x1b [0m' text_blue = ' \x1b [1;34;40m' text_green = ' \x1b [1;32;40m' text_purple = ' \x1b [1;35;40m' text_lightblue = ' \x1b [1;36;40m' text_white = ' \x1b [1;37;40m' a_green_at = ( f " { text_green } @ { stop_color } " ) a_red_at = ( f " { text_red } @ { stop_color } " ) print ( f " { text_red } This should be Red. { stop_color } " ) print ( f "
Read more

JavaScript Ascii animation with while loops and console.log

I was working on figuring out while loops for an exercise in LearnJavaScriptTheHardWay  by Zed Shaw,  and I decided to do this: The red text console.logs were for debugging, and will take over the animation if the comments are removed. The bold red number is the point at which the loop stops.  My CPU didn't have too much trouble with that large number, but I'd recommend dialing it down if your CPU is slow. Also if your CPU is really fast, you'll have to change the pause to something much lower to see the animation better.  That too is in a loop, so the more that pause happens, the more loops your CPU is running.   Link: https://stackoverflow.com/questions/9006988/node-js-on-windows-how-to-clear-console To clear screen as described in link above, uncomment the bold purple comment I tried to comment the code to help learners see what I did,  any comments or suggestions, feel free to drop em in!                      ex16_ASCII.js //Trying to make a comma
Read more

playing with trigonometry sin in pygame

Image
Ok I am so far from understanding, so don't take this as any kind of math lesson. Also, every time I thought I knew what I was doing.... pygame would show me differently. Still a work in progress, but for now, something to play with. Update: SinWaveTime class added to produce that particular weaving effect Tinkering with the different sin wave variables: I wrote this piece separate from my 3D experiment to see how to manipulate the sin wave. While trying to use time as the factor to move my pygame draw circle on the x-axis, i got this crazy little doo-dad : I don't think it's drawing two circles at once, but if I figure out what the heck it's doing I'll let you know.  Or hey if you know, drop a comment.  I don't know if my comments are just not working, or no one wants to. So, here's some pygame code to play with the sin wave.  Alter the different variables to see it in action. picture of SinWave.move_with_time() see changes, SinWaveTime c
Read more