The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Random Haiku Generator - Coding Questions
omentum
post 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)
Attached File  EXPERIMENT_random_haiku_01.html ( 2.55k ) Number of downloads: 214
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omentum
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 10 2012, 05:22 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
omentum
post 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>


Attached File  EXPERIMENT_random_haiku_02.html ( 2.18k ) Number of downloads: 537


This post has been edited by omentum: Apr 10 2012, 05:54 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 09:44 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC