www.webdeveloper.com
Results 1 to 2 of 2

Thread: table generator with html and javascript

  1. #1
    Join Date
    Dec 2012
    Posts
    5

    table generator with html and javascript

    In this assignment you will be asked to create an HTML file that uses JavaScript to create a
    table. Your table will have a certain number of rows and columns, the cells in the table will have
    different colors, and the cells will contain random numbers.
    Your HTML file should have a form in it that allows the user to specify:
    the number of rows in the table (from 1 10)
    the number of columns in the table (from 1 6)
    the selection of different colors to use
    the bottom of the range of random numbers (must be an integer greater than zero)
    the top of the range of random numbers (must be an integer less than or equal to 100)
    the position of the table
    Numeric fields should be checked to make sure that the user specified a correct value.
    The selection of colors should be a checkbox for black, white, red, orange, yellow, green, blue
    and purple. If a checkbox is checked, that color should be used. At least one box must be
    checked.
    The position should be a radio button for left, center (the default) or right.


    this is how far i have gotten
    :

    <html>
    <head>
    <title>
    Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
    </title>

    <style type="text/css">
    BODY {
    background-color : blue;
    }

    #messages {
    font-weight : bold;
    font-size : 18pt;
    }

    .white { background-color : white; }
    .black { background-color : black; }
    .red { background-color : red; }
    .orange { background-color : orange; }
    .yellow { background-color : yellow; }
    .green { background-color : green; }
    .blue { background-color : blue; }
    .purple { background-color : purple; }


    </style>

    </head>
    <div>

    <body>
    <center>


    <form name = "Tablegenerator">

    <label>Number of Rows: <input type = "number" name = "rows" id="rows" min=1 max=10 /></label><br/>

    <label>Number of Columns: <input type = "number" name = "columns" id="columns" min=1 max=6 /></label><br/>

    <label>Floor of Random Numbers: <input type = "number" name = "Floor" id="floor" min = 1 max = 100 /></label><br/>

    <label>Ceiling of Random Numbers: <input type = "number" name = "ceiling" id = "ceiling" min = 1 max = 100 /></label><br/>

    <input type="radio" name = "RightAlignment" value = "right" >Right Alignment<br>

    <input type="radio" name = "CenterAlignment" value = "center">Center Alignment<br>

    <input type="radio" name = "LeftAlignment" value = "left">Left Alignment<br>

    <input name = "generate" type = "button" value = "CREATE MY TABLE" onclick="createtable()" />

    </form>


    </div>
    <div>


    <input type = "checkbox" onclick='setmsgcolor("red");'>Red</button>

    <input type = "checkbox" onclick='setmsgcolor("yellow");'>Yellow</button>

    <input type = "checkbox" onclick='setmsgcolor("green");'>Green</button>

    <input type = "checkbox" onclick='setmsgcolor("black");'>Black</button>

    <input type = "checkbox" onclick='setmsgcolor("white");'>White</button>

    <input type = "checkbox" onclick='setmsgcolor("blue");'>Blue</button>

    <input type = "checkbox" onclick='setmsgcolor("orange");'>Orange</button>

    <input type = "checkbox" onclick='setmsgcolor("purple");'>Purple</button>


    <div id="messages">
    <b>HELLO, WELCOME TO MY PROGRAM. ENTER THE INFORMATION ABOVE.</b>
    <div id ="wrapper"></div>

    </div>
    </center>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2007
    Posts
    317
    If I understand, I am trying this:
    Code:
      
    <html>
    <head>
    <title>
    Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
    </title>
    
    <style type="text/css">
    BODY {
    background-color : turquoise;
    }
    
    #messages {
    font-weight : bold;
    font-size : 18pt;
    }
    
    .white { background-color : white; }
    .black { background-color : black; }
    .red { background-color : red; }
    .orange { background-color : orange; }
    .yellow { background-color : yellow; }
    .green { background-color : green; }
    .blue { background-color : blue; }
    .purple { background-color : purple; }
    
    
    </style>
    
    
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?270325-table-generator-with-html-and-javascript
    // http://www.w3schools.com/html/html5_form_input_types.asp
    
    function tabloYapmaca () {
    
    var sa = document.getElementById('satirlar').value;
    var su = document.getElementById('sutunlar').value;
    
    // http://www.w3schools.com/jsref/jsref_number.asp
    // alert(typeof( document.getElementById('minik').value));  // string
    
    var minik = Number( document.getElementById('minik').value ) ;
    var tavan = Number(  document.getElementById('tavan').value ) ;
    
    /*
    var A = []; 
    for(var n = minik; n<=tavan; n++ ) {
    A[A.length]= n;
    }
    alert(A);
    alert( A[Math.floor((Math.random()* A.length ) )] ); 
    */
    
    
    // http://www.w3schools.com/jsref/jsref_random.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_random3
    // Math.floor((Math.random()*100)+1);
    
    //var rs = Math.floor((Math.random()* (tavan - minik ))+ minik );
    
    //alert(rs);
    
    var B = []; 
    for(var m =0; m< (sa*su); m++) {
    B[B.length] = Math.floor((Math.random()* (tavan - minik + 1 ))+ minik );
    }
    alert('elements of array B (B dizisinin elemanları) =   ' + B );
    
    
    var s='<table border= "1" >';
    var no = 0; 
    for(var i=0; i< sa; i++) {
    s+=  '<tr>'; 
    for(var k = 0; k < su; k++) {
     s +=  '<td>'+ B[no++] +'</td>'; 
    }
    s+=  '</tr>'; 
    }
    s+=  '</table>'; 
    
    var d = document.getElementById('pano');
    d.innerHTML = s;
    
    }
    
    // http://www.w3schools.com/tags/att_table_align.asp
    // http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_align2
    
    // http://www.w3schools.com/jsref/prop_radio_checked.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked
    
    
    // http://www.w3schools.com/jsref/prop_checkbox_checked.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order
    
    </script>
    </head>
    <div>
    
    <body>
    <center>
    
    
    <form name = "Tablegenerator">
    
    <label>Number of Rows: (Satırların sayısı )<input type = "number" name = "rows" id="satirlar" min=1 max=10 /></label><br/>
    
    <label>Number of Columns: (Stunların sayısı ) <input type = "number" name = "columns" id="sutunlar" min=1 max=6 /></label><br/>
    
    <label>Floor of Random Numbers: ( Rastgele sayıların en kğ ) <input type = "number" name = "Floor" id="minik" min = 1 max = 100 /></label><br/>
    
    <label>Ceiling of Random Numbers: ( Rastgele sayıların en byğ ) <input type = "number" name = "ceiling" id = "tavan" min = 1 max = 100 /></label><br/>
    
    <input type="radio" name = "Alignment" value = "right" >Right Alignment ( Sağa hizala )<br>
    
    <input type="radio" name = "Alignment" value = "center">Center Alignment ( Ortaya hizala)<br>
    
    <input type="radio" name = "Alignment" value = "left">Left Alignment ( Sola hizala ) <br>
    
    <input name = "generate" type = "button" value = "tablo yap" onclick="tabloYapmaca ()" />
    
    </form>
    
    
    
    
    <input type = "checkbox" onclick='setmsgcolor("red");'>Red</button>
    
    <input type = "checkbox" onclick='setmsgcolor("yellow");'>Yellow</button>
    
    <input type = "checkbox" onclick='setmsgcolor("green");'>Green</button>
    
    <input type = "checkbox" onclick='setmsgcolor("black");'>Black</button>
    
    <input type = "checkbox" onclick='setmsgcolor("white");'>White</button>
    
    <input type = "checkbox" onclick='setmsgcolor("blue");'>Blue</button>
    
    <input type = "checkbox" onclick='setmsgcolor("orange");'>Orange</button>
    
    <input type = "checkbox" onclick='setmsgcolor("purple");'>Purple</button>
    
    
    <div id="messages">
    <b>HELLO, WELCOME TO MY PROGRAM. ENTER THE INFORMATION ABOVE.</b>
    <div id ="pano"></div>
    
    </div>
    </center>
    </body>
    </html>
    Last edited by Ayşe; 12-19-2012 at 06:28 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles