From 8918cb7e75e0ea5d0278661b57ba6e8c0cc5a4bb Mon Sep 17 00:00:00 2001
From: Asabeneh <asabeneh@gmail.com>
Date: Mon, 12 Oct 2020 02:02:28 +0300
Subject: [PATCH] Day_12 has been added

---
 12_Day_Forms/12_forms.md                       | 15 ++++++++++-----
 12_Day_Forms/12_forms_boilerplate/src/index.js | 11 +++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md
index a8c54d8..b010c5c 100644
--- a/12_Day_Forms/12_forms.md
+++ b/12_Day_Forms/12_forms.md
@@ -560,7 +560,7 @@ const selectOptions = options.map(({ value, label }) => (
   <option value={value}> {label}</option>
 ))
 
-class App extends React.Component {
+class App extends Component {
   // declaring state
   state = {
     firstName: '',
@@ -628,6 +628,10 @@ class App extends React.Component {
       email,
       country,
       gender,
+      tel,
+      dateOfBirth,
+      favoriteColor,
+      weight,
       bio,
       file,
       skills,
@@ -646,6 +650,10 @@ class App extends React.Component {
       email,
       country,
       gender,
+      tel,
+      dateOfBirth,
+      favoriteColor,
+      weight,
       bio,
       file,
       skills: formattedSkills,
@@ -662,7 +670,7 @@ class App extends React.Component {
         <h3>Add Student</h3>
         <form onSubmit={this.handleSubmit}>
           <fieldset>
-            <legend>React Form</legend>
+            <legend>React Form and Form Validation</legend>
             <div className='row'>
               <div className='form-group'>
                 <label htmlFor='firstName'>First Name </label>
@@ -842,7 +850,6 @@ class App extends React.Component {
 }
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -867,8 +874,6 @@ ReactDOM.render(<App />, rootElement)
 
 ## Exercises: Level 3
 
-
-
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>]()
diff --git a/12_Day_Forms/12_forms_boilerplate/src/index.js b/12_Day_Forms/12_forms_boilerplate/src/index.js
index b7696cd..f349574 100644
--- a/12_Day_Forms/12_forms_boilerplate/src/index.js
+++ b/12_Day_Forms/12_forms_boilerplate/src/index.js
@@ -31,7 +31,7 @@ const selectOptions = options.map(({ value, label }) => (
   <option value={value}> {label}</option>
 ))
 
-class App extends React.Component {
+class App extends Component {
   // declaring state
   state = {
     firstName: '',
@@ -99,6 +99,10 @@ class App extends React.Component {
       email,
       country,
       gender,
+      tel,
+      dateOfBirth,
+      favoriteColor,
+      weight,
       bio,
       file,
       skills,
@@ -117,6 +121,10 @@ class App extends React.Component {
       email,
       country,
       gender,
+      tel,
+      dateOfBirth,
+      favoriteColor,
+      weight,
       bio,
       file,
       skills: formattedSkills,
@@ -314,5 +322,4 @@ class App extends React.Component {
 }
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)