Random Haiku Generator - Coding Questions |
Random Haiku Generator - Coding Questions |
omentum |
Apr 10 2012, 12:27 PM
Post
#1
|
Group: Members Posts: 3 Joined: 10-April 12 Member No.: 16,888 |
Hello all,
I am very much a novice at HTML and JavaScript programming, but I can usually find my way through modifying existing code. With this Random Haiku Generator, I would like the three lines of haiku to appear stacked and centered, as traditional haiku looks. Example: overwhelmed with joy mother nature sleeps in peace smoke in the distance Is this possible? I've tried putting in "line break" coding after each of the first two lines, but it seems to cause the generator to fail. As a secondary (but not necessary) request for help, I'd like to know if the color of the haiku text that appears in the white box can be changed, and also the color of the box. For example, the box filled with black so that it can't be seen against the black background, and the haiku text in white. The truth is, I wish the results didn't have to be displayed in that box at all, but I don't know how to make that happen. It would be nicer if it could appear as plain text, centered and stacked. Also, do you see any unnecessary coding that can be stripped out to make the code as lean and correct as possible? Thank you for any advice! I appreciate it. (NOTE: HTML file is attached to this thread) Rick CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Random Haiku Generator</title> <script language="JavaScript"> <!-- var line1 = new Array("quivering gently", "dark clouds descending", "during an earthquake", "searching for answers", "winter turns to spring", "shrouded in darkness", "overwhelmed with joy", "for twenty one days", "the mirror shatters", "dark clouds fill the sky") var line2 = new Array("leaves fluttering on the breeze", "the river runs silently", "mother nature sleeps in peace", "a thousand people dreaming", "illusions form in the mist", "running wildly through a dream", "loneliness and great despair", "through a hole in the window", "waiting upon a cold wind", "lightning flashes through the trees") var line3 = new Array("fading with the sun", "hoping for rebirth", "a long way from home", "it's so beautiful", "fear of the unknown", "an ocean of dreams", "smoke in the distance", "the end of the world", "sleepwalking at night", "night of a full moon") var a = 0; var b = 0; var c = 0; function RandomTitle(nameform) { a = Math.floor(Math.random() * line1.length); b = Math.floor(Math.random() * line2.length); c = Math.floor(Math.random() * line3.length); nameform.third.value=line1[a] + " " + line2[b] + " " + line3[c] } //--> </script> <style type="text/css"> .highlighted_text { color: #C00; } body { font-family: Arial, Helvetica, sans-serif; } .Purple_Text { color: #66F; } .HOTPINKTEXT { color: #F09; } .BOLDtext { font-weight: bold; } </style> </head> <body vlink="#ff00ff" bgcolor="#00bfff" link="#0000ff" text="#ffffff"> <h1 align="center" class="HOTPINKTEXT"> </h1> <table width="50%" border="0" align="center"> <tr> <td width="50%"></td> </tr> <tr align="center" valign="top"> <td bgcolor="#000000"><B>RANDOM HAIKU GENERATOR</B>:</td> </tr> <tr align="center" valign="top"> <td bgcolor="#000000"><p> <center> <form> <table width="100%"> <tbody><tr align="center"> <td height="36" colspan="2"> <input name="generate" value="CLICK HERE To Generate A Random Haiku" onClick="RandomTitle(this.form)" type="button"> </td> <tr> <td height="68" colspan="2" align="center"> <div align="center"><input value=" " name="third" size="100%" type="text"></div> </td> </tr> </tbody></table> </form> </center></td> </tr> </table> </div></body></html> This post has been edited by omentum: Apr 10 2012, 12:27 PM Attached File(s) EXPERIMENT_random_haiku_01.html ( 2.55k ) Number of downloads: 214 |
Christian J |
Apr 10 2012, 04:03 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
The current versions puts the whole haiku text in an INPUT text field, and those are always on a single line. Perhaps you could write to an ordinary HTML element instead.
JS: CODE document.getElementById('output').innerHTML=line1[a] + "<br>" + line2[b] + "<br>" + line3[c]; HTML: CODE <td id="output"></td> Use CSS to control color and centering. |
omentum |
Apr 10 2012, 05:19 PM
Post
#3
|
Group: Members Posts: 3 Joined: 10-April 12 Member No.: 16,888 |
Thank you for your suggestion, Christian J. I think I understand what you are saying.
Edited to add: I got it to work a little better. Thank you for putting me on the right track. I think I can fine-tune it from here! I really appreciate your help! This post has been edited by omentum: Apr 10 2012, 05:23 PM |
pandy |
Apr 10 2012, 05:22 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
CODE nameform.third.value=line1[a] + " " + line2[b] + " " + line3[c] Which line should have had a semicolon at the end. |
omentum |
Apr 10 2012, 05:53 PM
Post
#5
|
Group: Members Posts: 3 Joined: 10-April 12 Member No.: 16,888 |
OK, Christian J. (and others)
I think I'm getting closer... One little problem... when I replaced those two lines of code, I get a couple of strange cells added to the table. The haiku is placed over in a cell to the right (weird!) and is left-justified. When I try to merge or delete those extra cells, the haiku disappears with them. I want a table that is one column and three rows: The first row has the title (RANDOM HAIKU GENERATOR:) The second row has the "CLICK HERE" button. The third row is where the haiku results are placed once the "CLICK HERE" button is pressed (and they are centered). What in the world am I doing wrong?! (New code attached at the bottom of this message) Thank you! Rick CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Random Haiku Generator</title> <script language="JavaScript"> <!-- var line1 = new Array("quivering gently", "dark clouds descending", "during an earthquake", "searching for answers", "winter turns to spring", "shrouded in darkness", "overwhelmed with joy", "for twenty one days", "the mirror shatters", "dark clouds fill the sky") var line2 = new Array("leaves fluttering on the breeze", "the river runs silently", "mother nature sleeps in peace", "a thousand people dreaming", "illusions form in the mist", "running wildly through a dream", "loneliness and great despair", "through a hole in the window", "waiting upon a cold wind", "lightning flashes through the trees") var line3 = new Array("fading with the sun", "hoping for rebirth", "a long way from home", "it's so beautiful", "fear of the unknown", "an ocean of dreams", "smoke in the distance", "the end of the world", "sleepwalking at night", "night of a full moon") var a = 0; var b = 0; var c = 0; function RandomTitle(nameform) { a = Math.floor(Math.random() * line1.length); b = Math.floor(Math.random() * line2.length); c = Math.floor(Math.random() * line3.length); document.getElementById('output').innerHTML=line1[a] + "<br>" + line2[b] + "<br>" + line3[c]; } //--> </script> <style type="text/css"> .highlighted_text { color: #C00; } body { font-family: Arial, Helvetica, sans-serif; } .Purple_Text { color: #66F; } .HOTPINKTEXT { color: #F09; } .BOLDtext { font-weight: bold; } </style> </head> <body vlink="#ff00ff" bgcolor="#00bfff" link="#0000ff" text="#ffffff"> <table width="375" border="0" align="center"> <tr> <td align="center" bgcolor="#000000"><B>RANDOM HAIKU GENERATOR</B>:</td> </tr> <tr> <td bgcolor="#000000"><input name="generate" value="CLICK HERE To Generate A Random Haiku" onClick="RandomTitle(this.form)" type="button"></td> </tr> <tr> <td bgcolor="#000000"><td bgcolor="#000000" id="output"></td><td bgcolor="#000000"></td> </tr> </table> </div></body></html> EXPERIMENT_random_haiku_02.html ( 2.18k ) Number of downloads: 537 This post has been edited by omentum: Apr 10 2012, 05:54 PM |
Christian J |
Apr 10 2012, 06:11 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I was thinking you could replace this (in your original code sample)
CODE <td height="68" colspan="2" align="center"> <div align="center"><input value=" " name="third" size="100%" type="text"></div> </td> with my table cell, but I didn't noticed your COLSPAN, so use this instead of my previous version: CODE <td colspan="2" id="output"></td> |
Lo-Fi Version | Time is now: 26th April 2024 - 12:27 PM |