8 changed files with 259 additions and 14 deletions
@ -1,13 +0,0 @@ |
|||||||
<?php |
|
||||||
if(isset($_POST['searchterm'])) |
|
||||||
{ |
|
||||||
echo htmlspecialchars($_POST['searchterm'], ENT_QUOTES); |
|
||||||
} |
|
||||||
?> |
|
||||||
|
|
||||||
<form action="" method="post"> |
|
||||||
User name: <input type="text" name="name"><br> |
|
||||||
Password: <input type="password" name="password"><br> |
|
||||||
|
|
||||||
<input type="submit" value="Search"> |
|
||||||
</form> |
|
||||||
@ -0,0 +1,40 @@ |
|||||||
|
body { |
||||||
|
background-color: #f2f2f2; |
||||||
|
font-family: 'Roboto', sans-serif; |
||||||
|
} |
||||||
|
form { |
||||||
|
border-radius: 5px; |
||||||
|
background-color: #8d8c8c; |
||||||
|
margin: 20px; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
input { |
||||||
|
border-radius: 4px; |
||||||
|
box-sizing: border-box; |
||||||
|
display: block; |
||||||
|
margin: 8px 0; |
||||||
|
padding: 12px 20px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
input [type=submit] { |
||||||
|
border-color: blueviolet; |
||||||
|
border-radius: 4px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 8px 0; |
||||||
|
padding: 12px 20px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
select { |
||||||
|
border-radius: 4px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 8px 0; |
||||||
|
padding: 12px 20px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
border-radius: 4px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 8px 0; |
||||||
|
padding: 12px 20px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
<?php |
||||||
|
$name = ''; |
||||||
|
$password = ''; |
||||||
|
$color = ''; |
||||||
|
$languages = array(); |
||||||
|
$comments = ''; |
||||||
|
|
||||||
|
if (isset($_POST['submit'])) { |
||||||
|
//echo htmlspecialchars($_POST['searchterm'], ENT_QUOTES); |
||||||
|
|
||||||
|
$ok = true; |
||||||
|
if (isset($_POST['submit'])) { |
||||||
|
if (!isset($_POST['name']) || empty($_POST['name'])) { |
||||||
|
die('Name is required'); |
||||||
|
} else { |
||||||
|
$name = $_POST['name']; |
||||||
|
} |
||||||
|
|
||||||
|
if (!isset($_POST['password']) || empty($_POST['password'])) { |
||||||
|
$ok = false; |
||||||
|
} else { |
||||||
|
$password = $_POST['password']; |
||||||
|
} |
||||||
|
if (isset($_POST['password'])) $password = $_POST['password']; |
||||||
|
if (isset($_POST['color'])) $color = $_POST['color']; |
||||||
|
if (isset($_POST['languages'])) $languages = $_POST['languages']; |
||||||
|
if (isset($_POST['comments'])) $comments = $_POST['comments']; |
||||||
|
} |
||||||
|
|
||||||
|
if ($ok) { |
||||||
|
printf('User name: %s<br>', htmlspecialchars($name, ENT_QUOTES)); |
||||||
|
printf('Password: %s<br>', htmlspecialchars($password, ENT_QUOTES)); |
||||||
|
printf('Favorite Color: %s<br>', htmlspecialchars($color, ENT_QUOTES)); |
||||||
|
printf('Languages Spoken: %s<br>', htmlspecialchars(implode(', ', $languages), ENT_QUOTES)); |
||||||
|
printf('Comments: %s<br>', htmlspecialchars($comments, ENT_QUOTES)); |
||||||
|
} |
||||||
|
} |
||||||
|
?> |
||||||
|
|
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Document</title> |
||||||
|
|
||||||
|
<link rel="stylesheet" href="form.css"> |
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<form action="" method="post"> |
||||||
|
<label for="name">User name</label> |
||||||
|
<input type="text" name="name" value="<?php echo htmlspecialchars($name, ENT_QUOTES); ?>">
|
||||||
|
|
||||||
|
<label for="password">Password</label> |
||||||
|
<input type="password" name="password"> |
||||||
|
|
||||||
|
<label for="color">Favorite Color</label> |
||||||
|
<select name="color" id="color"> |
||||||
|
<option value="">Please select...</option> |
||||||
|
<option value="#f00">Red</option> |
||||||
|
<option value="#0f0">Green</option> |
||||||
|
<option value="#00f">Blue</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<label for="languages">Languages Spoken</label> |
||||||
|
<select name="languages[]" id="languages" multiple="multiple"> |
||||||
|
<option value="en">English</option> |
||||||
|
<option value="fr">French</option> |
||||||
|
<option value="de">German</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<label for="comments">Comments</label> |
||||||
|
<textarea name="comments" id="comments" cols="30" rows="10"> |
||||||
|
<?php echo htmlspecialchars($comments, ENT_QUOTES); ?> |
||||||
|
</textarea> |
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Register"> |
||||||
|
</form> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
.new-expense__controls { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 1rem; |
||||||
|
margin-bottom: 1rem; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense__control label { |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense__control input { |
||||||
|
font: inherit; |
||||||
|
padding: 0.5rem; |
||||||
|
border-radius: 6px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
width: 20rem; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense__actions { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import React, {useState} from "react"; |
||||||
|
|
||||||
|
import "./ExpenseForm.css"; |
||||||
|
|
||||||
|
const ExpenseForm = (props) => { |
||||||
|
const [enteredTitle, setEnteredTitle] = useState(''); |
||||||
|
const [enteredAmount, setEnteredAmount] = useState(''); |
||||||
|
const [enteredDate, setEnteredDate] = useState(''); |
||||||
|
|
||||||
|
const titleChangeHandler = (event) => { |
||||||
|
setEnteredTitle(event.target.value); |
||||||
|
}; |
||||||
|
const amountChangeHandler = (event) => { |
||||||
|
setEnteredAmount(event.target.value); |
||||||
|
}; |
||||||
|
const dateChangeHandler = (event) => { |
||||||
|
setEnteredDate(event.target.value); |
||||||
|
}; |
||||||
|
|
||||||
|
return <form> |
||||||
|
<div className="new-expense__controls"> |
||||||
|
<div className="new-expense__control"> |
||||||
|
<label>Title</label> |
||||||
|
<input type="text" onChange={titleChangeHandler} /> |
||||||
|
</div> |
||||||
|
<div className="new-expense__control"> |
||||||
|
<label>Amount</label> |
||||||
|
<input type="number" min="0.01" step="0.01" onChange={amountChangeHandler} /> |
||||||
|
</div> |
||||||
|
<div className="new-expense__control"> |
||||||
|
<label>Date</label> |
||||||
|
<input type="date" min="2019-01-01" max="2022-12-31" onChange={dateChangeHandler} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="new-expense__actions"> |
||||||
|
<button type="submit">Add Expense</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
} |
||||||
|
|
||||||
|
export default ExpenseForm; |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
.new-expense { |
||||||
|
background-color: #a892ee; |
||||||
|
padding: 1rem; |
||||||
|
margin: 2rem auto; |
||||||
|
width: 50rem; |
||||||
|
max-width: 95%; |
||||||
|
border-radius: 12px; |
||||||
|
text-align: center; |
||||||
|
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense button { |
||||||
|
font: inherit; |
||||||
|
cursor: pointer; |
||||||
|
padding: 1rem 2rem; |
||||||
|
border: 1px solid #40005d; |
||||||
|
background-color: #40005d; |
||||||
|
color: white; |
||||||
|
border-radius: 12px; |
||||||
|
margin-right: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense button:hover, |
||||||
|
.new-expense button:active { |
||||||
|
background-color: #510674; |
||||||
|
border-color: #510674; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense button.alternative { |
||||||
|
color: #220131; |
||||||
|
border-color: transparent; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.new-expense button.alternative:hover, |
||||||
|
.new-expense button.alternative:active { |
||||||
|
background-color: #ddb3f8; |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import ExpenseForm from "./ExpenseForm"; |
||||||
|
import './NewExpense.css'; |
||||||
|
|
||||||
|
const NewExpense = (props) => { |
||||||
|
const saveExpenseDataHandler = (enteredExpenseData) => { |
||||||
|
const expenseData = { |
||||||
|
...enteredExpenseData, |
||||||
|
id: Math.random().toString(), |
||||||
|
}; |
||||||
|
props.onAddExpense(expenseData); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="new-expense"> |
||||||
|
<ExpenseForm onSaveExpenseData={saveExpenseDataHandler} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default NewExpense; |
||||||
Loading…
Reference in new issue