help with garden calendar

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • carletongardener
    New Member
    • Feb 2009
    • 5

    help with garden calendar

    I'm trying to make a calendar where the frost date is input and based on this date, a list of other dates are calculated that will be specific times from the input date. I have minimal programming skills and would appreciate any help.

    I've gotten code that will input the frost date and output a single date (6 weeks prior to this date = tomato planting date). I wish the output button was a list of dates, or there were multiple buttons that pop up..... Maybe someone could help with adding one more date line and I can figure out how to repeat. Or direct me to the function I need to research more. Thanks!

    test site: http://bioarray.us/generate%20planti...=5&d1=20&m1=10

    code so far:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    
    <form>
      <p>
        <input type="text" name="date1" size="20">
        <br>
    Date of last spring frost (mm/dd/yyyy)<br>
    Enter month and day of the latest spring frost in your garden in the past 5 years or so. If you don't know this, use the date from <a href="http://www.burpee.com/ancillary/zonefinder.do">Burpee</a> or <a href="http://cdo.ncdc.noaa.gov/cgi-bin/climatenormals/climatenormals.pl?directive=prod_select2&prodtype=CLIM2001&subrnum">NOAA</a>. For year, enter this year - 2009.
    <br>
    <br>
    <input type="button" value="Generate planting calendar!"
    onclick="finddates(this);" />
      </p>
      <p>&nbsp;</p>
      <p>
        <input type="text" name="date2" size="20" readonly>
        Sow tomato seed indoors.<br>
        <br>
        <br>
          </p>
    </form>
    
    <script type="text/javascript">
    
    document.forms(0).date1.value = dateToString(new Date())
    
    function dateToString(d){
    return [d.getMonth()+1,d.getDate()].join('/')
    
    }
    
    function finddates(x){
    d = new Date(x.form.date1.value)
    d = new Date(d.getYear(),d.getMonth(),d.getDate()-40)
    x.form.date2.value = dateToString(d)
    
    
    }
    </script>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    
    
    </body>
    </html>
    
    
    </body>
    </html>
    Last edited by eWish; Feb 6 '09, 01:29 AM. Reason: Please use the code tags
  • David Laakso
    Recognized Expert Contributor
    • Aug 2008
    • 397

    #2
    Originally posted by carletongardene r
    I'm trying to make a calendar where the frost date is input and based on this date, a list of other dates are calculated that will be specific times from the input date...
    Move post to appropriate board on this forum. (X)HTML/CSS does not meet need required...

    Comment

    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694

      #3
      Originally posted by carletongardene r
      I wish the output button was a list of dates, or there were multiple buttons that pop up..... Maybe someone could help with adding one more date line and I can figure out how to repeat.
      you could use a couple of checkboxes to set the dates (tomato, cucumber, ...) to be computed. the checkboxes' value could be the number of days to subtract/add to the current date. this way, the function triggered by the button needs to fetch all the checked checkboxes using their passed value to compute the date.

      for a better styling of the page have a look at CSS, especially the properties padding and margin should be good to start.

      finally, I think you'd better use HTML than XHTML to start with
      - true XHTML (with the recommended mime type "applicatio n/xhtml+xml") is not supported by Internet Explorer
      - XHTML served as "text/html" is treated as HTML
      - XHTML must be well-formed, otherwise browsers give you an error (the so-called Yellow Screen Of Death (YSOD))
      (empty elements (like <img>, <br>, <hr>) are written <tagname/> (<img/>, <br/>, <hr/>), & must always be escaped)

      regards

      Comment

      • carletongardener
        New Member
        • Feb 2009
        • 5

        #4
        Thanks for the suggestions!

        I'm sorry I can't figure out how to move this thread and am not even sure where it should be moved to. (embarrassing.. .)

        I converted to HTML, I think. I'm using DreamWeaver.

        New test site: http://bioarray.us/planting%20calendar%202.html

        Looks nicer now. I just need get the calculator functions to generate several different dates that are different lengths fo time form input date and enter these into the appropriate boxes.

        New code:
        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <!-- DW6 -->
        <head>
        <!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
        <title>Lodging - Calendar</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="mm_lodging1.css" type="text/css">
        </head>
        <body bgcolor="#999966">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        	<tr>
        	<td width="15" nowrap>&nbsp;</td>
        	<td height="60" colspan="2" class="logo" nowrap><br>
        	Skippy's Vegetable Garden</td>
        	<td width="100%">&nbsp;</td>
        	</tr>
        
        	<tr bgcolor="#ffffff">
        	<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"></td>
        	</tr>
        
        	<tr bgcolor="#a4c2c2">
        	<td width="15" nowrap>&nbsp;</td>
        	<td height="36" id="navigation" class="navText"><a href="http://www.carletongarden.blogspot.com/">HOME</a><a href="javascript:;"></a></td>
        	<td>&nbsp;</td>
        	<td width="100%">&nbsp;</td>
        	</tr>
        
        	<tr bgcolor="#ffffff">
        	<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"></td>
        	</tr>
        
        	<tr bgcolor="#ffffff">
        	<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1" border="0"></td>
        	<td valign="top" width="35"><img src="mm_spacer.gif" alt="" width="35" height="1" border="0"></td>
        	<td width="710" valign="top"><br>
        	<table border="0" cellspacing="0" cellpadding="2" width="610">
                <tr>
                  <td class="pageName">Personalized Vegetable Garden Planting Calender</td>
                </tr>
        	</table>
        	<p>Enter the date of your last srping frost (mm/dd/yyyy)
        	<form>
          <p>
            <input type="text" name="date1" size="20">
            <br>
        Enter month and day of the latest spring frost in your garden in the past 5 years or so. If you don't know this, use the date from <a href="http://www.burpee.com/ancillary/zonefinder.do">Burpee</a> or <a href="http://cdo.ncdc.noaa.gov/cgi-bin/climatenormals/climatenormals.pl?directive=prod_select2&prodtype=CLIM2001&subrnum">NOAA</a>. For year, enter this year - 2009.
        <br>
        <br>
        <input type="button" value="Generate planting calendar!"
        onclick="finddates(this);" />
          </p>
          <p>&nbsp;</p>
          <p>
            <input type="text" name="date2" size="20" readonly>
            Sow tomato seeds indoors.<br>
            </p>
          <p>
            <input type="text" name="date3" size="20" readonly>
            Sow cucumber seeds indoors.</p>
          <p>
            <input type="text" name="date4" size="20" readonly>
            Sow sunflowers directly in the garden.</p>
          <p><br>
          </p>
        	</form>
        
        <script type="text/javascript">
        
        document.forms(0).date1.value = dateToString(new Date())
        
        function dateToString(d){
        return [d.getMonth()+1,d.getDate()].join('/')
        
        }
        
        function finddates(x){
        d = new Date(x.form.date1.value)
        d = new Date(d.getYear(),d.getMonth(),d.getDate()-40)
        x.form.date2.value = dateToString(d)
        
        
        }
        </script>
        <br>
        <br>
        <br>
        <br>
        <br>
        
        
        
        <br>
        	 *  &nbsp;<br>
              </p>
        	 *</td>
        	<td>&nbsp;</td>
        	</tr>
        
        	<tr>
        	<td width="15">&nbsp;</td>
            <td width="35">&nbsp;</td>
            <td width="710">&nbsp;</td>
        	<td width="100%">&nbsp;</td>
        	</tr>
        </table>
        </body>
        </html>
        Last edited by acoder; Feb 11 '09, 09:32 AM. Reason: Added [code] tags

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          Line 71 document.forms( 0) should be document.forms[0].

          PS. please use [code] tags when posting code.

          PPS. Moved to the JavaScript forum.

          Comment

          • carletongardener
            New Member
            • Feb 2009
            • 5

            #6
            Thanks SO much for the help! I'm all set. Here's the final link to my tool, if you want to generate a planting calender for your vegetable garden. http://bioarray.us/Skippy%27s%20plan...0calendar.html (Sorry I'm such a noob.)

            Comment

            • David Laakso
              Recognized Expert Contributor
              • Aug 2008
              • 397

              #7
              Nice job. Validating the markup could be a nice touch. So might making it readable, for children of all ages, on landing. But these are trivial matters. Or, are they?

              Comment

              • carletongardener
                New Member
                • Feb 2009
                • 5

                #8
                Thanks. I validated. Don't know how to make it readable. K

                Comment

                • David Laakso
                  Recognized Expert Contributor
                  • Aug 2008
                  • 397

                  #9
                  Change the body declaration to read:
                  Code:
                  body { 
                  font: 100%/1.4 Helvetica, Arial, sans-serif;
                  margin:0;padding:0;
                  background:#fff;
                  }
                  100% is default. 1.4 is line-height.

                  re: sans
                  Completely delete each and every font-size rule throughout the style sheet and the styles embedded in the head of the document. Each will inherit default (100%) sans from the body declaration.

                  re:serif
                  Change the font-size for TNR and Georgia to 100% with a raw number (as above) for line-height if even needed. Bump either or both up a little if you like.

                  re: sans and serif
                  Users will now get their preference, rather than yours. And should users who know how to use their machine decide to go up or down in size from their default by scaling the fonts, they can do so in compliant browsers, and more easily in the IEs as well...

                  Comment

                  • carletongardener
                    New Member
                    • Feb 2009
                    • 5

                    #10
                    Thank you! I hope I did this right.

                    Comment

                    • David Laakso
                      Recognized Expert Contributor
                      • Aug 2008
                      • 397

                      #11
                      Originally posted by carletongardene r
                      Thank you! I hope I did this right.
                      So do i. Post to the forum and someone will check it...

                      Comment

                      Working...