diff --git a/getting-started/form.php b/getting-started/form.php deleted file mode 100644 index 7b3be05..0000000 --- a/getting-started/form.php +++ /dev/null @@ -1,13 +0,0 @@ - - -
- User name:
- Password:
- - -
\ No newline at end of file diff --git a/php/getting-started/form.css b/php/getting-started/form.css new file mode 100644 index 0000000..1327d4a --- /dev/null +++ b/php/getting-started/form.css @@ -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%; +} \ No newline at end of file diff --git a/php/getting-started/form.php b/php/getting-started/form.php new file mode 100644 index 0000000..0a6621d --- /dev/null +++ b/php/getting-started/form.php @@ -0,0 +1,88 @@ +', htmlspecialchars($name, ENT_QUOTES)); + printf('Password: %s
', htmlspecialchars($password, ENT_QUOTES)); + printf('Favorite Color: %s
', htmlspecialchars($color, ENT_QUOTES)); + printf('Languages Spoken: %s
', htmlspecialchars(implode(', ', $languages), ENT_QUOTES)); + printf('Comments: %s
', htmlspecialchars($comments, ENT_QUOTES)); + } +} +?> + + + + + + + + + Document + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/react-complete-guide/src/App.js b/react-complete-guide/src/App.js index 67ab5b8..273761f 100644 --- a/react-complete-guide/src/App.js +++ b/react-complete-guide/src/App.js @@ -1,3 +1,6 @@ +import React from "react"; + +import NewExpense from "./components/NewExpense/NewExpense"; import Expenses from "./components/Expenses/Expenses"; function App() { @@ -25,7 +28,7 @@ function App() { return (
-

Let's get started!

+
); diff --git a/react-complete-guide/src/components/NewExpense/ExpenseForm.css b/react-complete-guide/src/components/NewExpense/ExpenseForm.css new file mode 100644 index 0000000..042c796 --- /dev/null +++ b/react-complete-guide/src/components/NewExpense/ExpenseForm.css @@ -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; + } \ No newline at end of file diff --git a/react-complete-guide/src/components/NewExpense/ExpenseForm.js b/react-complete-guide/src/components/NewExpense/ExpenseForm.js new file mode 100644 index 0000000..b116526 --- /dev/null +++ b/react-complete-guide/src/components/NewExpense/ExpenseForm.js @@ -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
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+} + +export default ExpenseForm; \ No newline at end of file diff --git a/react-complete-guide/src/components/NewExpense/NewExpense.css b/react-complete-guide/src/components/NewExpense/NewExpense.css new file mode 100644 index 0000000..22e86c3 --- /dev/null +++ b/react-complete-guide/src/components/NewExpense/NewExpense.css @@ -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; + } \ No newline at end of file diff --git a/react-complete-guide/src/components/NewExpense/NewExpense.js b/react-complete-guide/src/components/NewExpense/NewExpense.js new file mode 100644 index 0000000..ef10cff --- /dev/null +++ b/react-complete-guide/src/components/NewExpense/NewExpense.js @@ -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 ( +
+ +
+ ); +} + +export default NewExpense; \ No newline at end of file