You are viewing our Forum Archives. To view or take place in current topics click here.
#11. Posted:
Status: Offline
Joined: Apr 29, 200914Year Member
Posts: 4,420
Reputation Power: 1211
Status: Offline
Joined: Apr 29, 200914Year Member
Posts: 4,420
Reputation Power: 1211
While adding a <br /> tag will solve your problem, I don't think it's the correct way to go about solving the issue. Simple adding a bit of styling solves the issue more befittingly, and using flexbox, make it far more flexible too (pun intended). observe:
Now here is a simple stylesheet with some styling added:
The result is as follows:
[ Register or Signin to view external links. ]
You're obviously new to development and are following and starting with the simple steps, but it's best to be conscious and constantly asking yourself the question, "Is there a better way to do this?"
P.S This post engrossed my compulsion for modification so much, it's the first time I've posted in 3 years!
Go you!
Last edited by CoNdEmR ; edited 1 time in total
<?php
$num_boxes = 4;
$precision = 1;
$gradetext = '';
//minimum=>grade
$grade_array = array(
'90-100'=>'A',
'80-89'=>'B',
'70-79'=>'C',
'60-69'=>'D',
'0-59'=>'F'
);
function create_form($num_boxes=1)
{
if(is_int($num_boxes))
{
$form = '';
for($i=0;$i<$num_boxes;$i++)
{
$inc = $i+1;
$val = (isset($_POST['grade'][$i])) ? $_POST['grade'][$i] : '';
$form .= "
<div class='fields'>
<label for='grade$inc'>Grade $inc:</label>
<input classs='form-input' id='grade$inc' name='grade[$i]' type='number' value = '$val' min='0' max='100' />
</div>
";
}
return $form;
}
}
function get_grade($pc,$grade_array)
{
foreach($grade_array as $min=>$grade)
{
if($pc < $min) continue;
return $grade;
}
}
if($_POST)
{
$GPA = 0;
$num_posts = count(array_filter($_POST['grade'], "is_numeric"));
$total = array_sum($_POST['grade']);
if($num_posts != 0) $GPA = $total/$num_posts;
$lettergrade = get_grade($GPA,$grade_array);
$gradetext = "Average Test Score = " . number_format($GPA,$precision) . " ($lettergrade)";
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<title>Test Score Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form role="form" class="" method="post">
<div class="form-fields">
<?php echo create_form($num_boxes); ?>
<button class="btn btn-submit" type="submit">Calculate</button>
</div>
</form>
</div>
</body>
</html>
Now here is a simple stylesheet with some styling added:
.container {
max-width: 960px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.form-fields {
display: flex;
flex-direction: column;
align-items: center;
}
.fields {
margin-bottom: 10px;
}
.btn {
width: 130px;
padding: 8px;
}
The result is as follows:
[ Register or Signin to view external links. ]
You're obviously new to development and are following and starting with the simple steps, but it's best to be conscious and constantly asking yourself the question, "Is there a better way to do this?"
P.S This post engrossed my compulsion for modification so much, it's the first time I've posted in 3 years!
Go you!
Last edited by CoNdEmR ; edited 1 time in total
- 0useful
- 0not useful
#12. Posted:
Status: Offline
Joined: Aug 06, 201112Year Member
Posts: 935
Reputation Power: 36
Status: Offline
Joined: Aug 06, 201112Year Member
Posts: 935
Reputation Power: 36
CoNdEmR wrote While adding a <br /> tag will solve your problem, I don't think it's the correct way to go about solving the issue. Simple adding a bit of styling solves the issue more befittingly, and using flexbox, make it far more flexible too (pun intended). observe:
<?php
$num_boxes = 4;
$precision = 1;
$gradetext = '';
//minimum=>grade
$grade_array = array(
'90-100'=>'A',
'80-89'=>'B',
'70-79'=>'C',
'60-69'=>'D',
'0-59'=>'F'
);
function create_form($num_boxes=1)
{
if(is_int($num_boxes))
{
$form = '';
for($i=0;$i<$num_boxes;$i++)
{
$inc = $i+1;
$val = (isset($_POST['grade'][$i])) ? $_POST['grade'][$i] : '';
$form .= "
<div class='fields'>
<label for='grade$inc'>Grade $inc:</label>
<input classs='form-input' id='grade$inc' name='grade[$i]' type='number' value = '$val' min='0' max='100' />
</div>
";
}
return $form;
}
}
function get_grade($pc,$grade_array)
{
foreach($grade_array as $min=>$grade)
{
if($pc < $min) continue;
return $grade;
}
}
if($_POST)
{
$GPA = 0;
$num_posts = count(array_filter($_POST['grade'], "is_numeric"));
$total = array_sum($_POST['grade']);
if($num_posts != 0) $GPA = $total/$num_posts;
$lettergrade = get_grade($GPA,$grade_array);
$gradetext = "Average Test Score = " . number_format($GPA,$precision) . " ($lettergrade)";
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<title>Test Score Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form role="form" class="" method="post">
<div class="form-fields">
<?php echo create_form($num_boxes); ?>
<button class="btn btn-submit" type="submit">Calculate</button>
</div>
</form>
</div>
</body>
</html>
Now here is a simple stylesheet with some styling added:
.container {
max-width: 960px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.form-fields {
display: flex;
flex-direction: column;
align-items: center;
}
.fields {
margin-bottom: 10px;
}
.btn {
width: 130px;
padding: 8px;
}
The result is as follows:
[ Register or Signin to view external links. ]
You're obviously new to development and are following and starting with the simple steps, but it's best to be conscious and constantly asking yourself the question, "Is there a better way to do this?"
Thanks, appreciate the help. I figured it out. Here is a picture of the outcome.
- 0useful
- 0not useful
#13. Posted:
Status: Offline
Joined: Jan 22, 20168Year Member
Posts: 3
Reputation Power: 0
The br tag wouldn't be the correct way in this case.
Include your style.css and target the div class around the input forms.
Style the classes by targeting them in the style sheet with the class name,
Margins, Paddings and line-heights would allow you to style these correctly.
Feel free to contact me on for further information I'm happy to show you
Include your style.css and target the div class around the input forms.
Style the classes by targeting them in the style sheet with the class name,
Margins, Paddings and line-heights would allow you to style these correctly.
Feel free to contact me on for further information I'm happy to show you
- 0useful
- 0not useful
#14. Posted:
Status: Offline
Joined: Jun 29, 201310Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201310Year Member
Posts: 211
Reputation Power: 13
BRs are just fine for your purposes, OP.
Other than that, wrap the inputs in some form of width container and set them to: display: block; and adjust margins (margin-top, really).
Other than that, wrap the inputs in some form of width container and set them to: display: block; and adjust margins (margin-top, really).
- 1useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.