I am very new when it come's to PHP I need to make a chessboard for school. I am using options to let them select the color of the board. What i have so far is that 1 half is white always. But where i'm stuck is how can i make PHP reconize the color they selected and make the chessboard that color. I also am not sure if i need to use CSS with it please help me i'm stuck.
<!DOCTYPE html>
<html>
<head>
<title>Schaakbord</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="schaakbord.css">
</head>
<body>
<form action="" method="GET">
<select name="kleuren">
<option name="kleur" value="geel">Geel</option>
<option name="kleur" value="rood">Rood</option>
<option name="kleur" value="blauw">Blauw</option>
<option name="kleur" value="groen">Groen</option>
<option name="kleur" value="paars">Paars</option>
<option name="kleur" value="roze">Roze</option>
<option name="kleur" value="bruin">Bruin</option>
<option name="kleur" value="oranje">Oranje</option>
<option name="kleur" value="wit">Wit</option>
<option name="kleur" value="grijs">Grijs</option>
</select>
<input type="submit" name="submit">
</form>
<br/>
<?php
if(isset($_GET["submit"])){
echo "<table>";
for($i=0;$i<8;$i++)
{
echo "<tr>";
for($u=0;$u<8;$u++)
{
if(($i + $u)%2 == 0o)
{
echo "<td></td>";
}
else {
echo "<th></th>";
}
}
echo "</tr>";
}
echo "</table>";
}
?>
</body>
</html>
body {
background-color:black;
}
td {
width:50px;
height:50px;
background-color:red;
}
th {
width:50px;
height:50px;
background-color:white;
}
this way will work:
<!DOCTYPE html>
<html>
<head>
<title>Schaakbord</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="schaakbord.css">
</head>
<body>
<form action="" method="GET">
<select name="kleuren">
<option name="kleur" value="yellow">Geel</option>
<option name="kleur" value="red">Rood</option>
<option name="kleur" value="blue">Blauw</option>
<option name="kleur" value="green">Groen</option>
<option name="kleur" value="purple">Paars</option>
<option name="kleur" value="pink">Roze</option>
<option name="kleur" value="brown">Bruin</option>
<option name="kleur" value="orange">Oranje</option>
<option name="kleur" value="with">Wit</option>
<option name="kleur" value="gray">Grijs</option>
</select>
<input type="submit" name="submit">
</form>
<br/>
<?php
if(isset($_GET["submit"])){
echo "<table>";
for($i=0;$i<8;$i++)
{
echo "<tr>";
for($u=0;$u<8;$u++)
{
if(($i + $u)%2 == 0)
{
echo "<td style='background-color:".$_GET["kleuren"]."'></td>";
}
else {
echo "<th></th>";
}
}
echo "</tr>";
}
echo "</table>";
}
?>
</body>
</html>
Rather than splitting the board into <td> and <th> use a class:
if(($i + $u)%2 == 0)
{
echo "<td class="color"></td>";
}
else
{
echo "<td class="white"></td>";
}
Then in your css, change the color based on class:
td {
width:50px;
height:50px;
}
td.color {
background-color: <?php echo $GET['kleur'];?>;
}
td.white {
background-color: white;
}
Note: The values set by the option elements would need to be valid css colors
Is better if you use a css classname selector: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
You can also use even and odd selectors: https://www.w3.org/Style/Examples/007/evenodd.en.html
Example here: Pure css Chessboard with div & no classes or ids, is it possible?
Create a CSS class for each color, named like the color, and use the class after submitting.
CSS
body {
background-color:black;
}
td {
width:50px;
height:50px;
}
th {
width:50px;
height:50px;
background-color:white;
}
.white { background-color:white; }
.red { background-color:red; }
.....
Table
$color = $_GET["kleuren"];
for($u=0;$u<8;$u++)
{
if(($i + $u)%2 == 0)
{
echo "<td class='".$class."'></td>";
}
else {
echo "<th></th>";
}
}
Follow this way, As I did you can add more colors(HEX Values)
<!DOCTYPE html>
<html>
<head>
<title>Schaakbord</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="schaakbord.css">
</head>
<body>
<form action="" method="GET">
<select name="kleuren">
<option value="#8B0000">Red</option>
<option value="#483D8B">Blue</option>
<option value="#228B22">Green</option>
<option value="#FF69B4">Pink</option>
</select>
<input type="submit" name="submit">
</form>
<br/>
<?php
echo "<table>";
for($i=0;$i<8;$i++)
{
echo "<tr>";
for($u=0;$u<8;$u++)
{
if(($i + $u)%2 == 0)
{
echo "<td class='color'></td>";
}
else {
echo "<td class='white'></th>";
}
}
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
<?php
if(isset($_GET["submit"])){
$color = $_GET['kleuren'];
}else{
$color = "red";
}
?>
<style type="text/css">
body {
background-color:black;
}
.color {
width:50px;
height:50px;
background-color:<?php echo $color; ?>;
}
.white {
width:50px;
height:50px;
background-color:white;
}
</style>