Im very lost on this JAVASCRIPT Lab assignment. Any help would be greatly Apprec
ID: 671173 • Letter: I
Question
Im very lost on this JAVASCRIPT Lab assignment. Any help would be greatly Appreciated. (seems long but its not)
Tabletop role playing games generally begin with the players creating their avatars, or characters. Each player generates a set of attributes for their character, usually by rolling a set of dice and adding up the rolls. For this exercise, you will be writing an application that emulates rolling three six-sided dice six times to generate values six character attributes. The attributes required are specified below the break.
Output Requirements
Your char.html page will need to display the names of the attributes (listed above the break) and the values that you will be generating in your JavaScript. are strength, dexterity, intelligence, wisdom, constitution, andcharisma. The range of values for each attribute is [3-18].
Create a CSS file named lab04.css that is used by char.html page to style the content. Be sure to right-align your numbers.
Bonus points for color-coding attribute values with your CSS, based upon their relationship to the three-dice average of 10.5.
Create a JavaScript file named stats.js that populates the appropriate elements on char.html. Do not use functions: we will revisit this project at a later date and "functionalize" it.
Use Math.random and Math.floor to "roll" your dice. You must emulate rolling three dice at a time and repeat that six times. Hint: think nested for loops.
Use document.getElementById to fill in the elements on the char.html page.
Explanation / Answer
HTML FILE:
<h1 id="title">Dice Example</h1>
<table>
<tr>
<th>Strength</th>
<th>Dexterity</th>
<th>Intelligence</th>
<th>Wisdom</th>
<th>Constitution</th>
<th>Charishma</th>
</tr>
<tr>
<td id="id0"></td>
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
<td id="id5"></td>
</tr>
</table>
<br>
<input type="submit" id="byBtn" value="Fill Table"/>
JS FILE:
function fillTable(){
for(var i=0;i<6;i++){ //loop to fill six cells in tables
for(var j=0;j<3;j++){ //loop to 3 dices
//get random values
var firstDie = Math.floor(Math.random() * 6) + 1 ;
var secondDie = Math.floor(Math.random() * 6) + 1 ;
var thirdDie = Math.floor(Math.random() * 6) + 1 ;
var td = document.getElementById('id'+i);
td.innerHTML = firstDie+secondDie+thirdDie; //printing value to table
}
}
}
CSS FILE:
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}