From f49f726b8d75e564a98741e718cc33f755573212 Mon Sep 17 00:00:00 2001
From: asabeneh <asabeneh@gmail.com>
Date: Tue, 13 Oct 2020 03:26:07 +0300
Subject: [PATCH] Day_13 has been published

---
 11_Day_Events/11_events_boilerplate/README.md |   2 +-
 12_Day_Forms/12_forms.md                      |  11 +-
 12_Day_Forms/12_forms_boilerplate/README.md   |   2 +-
 .../13_uncontrolled_input.md                  | 845 ++----------------
 .../README.md                                 |   2 +-
 .../src/index.js                              | 317 +------
 readMe.md                                     |   6 +-
 7 files changed, 113 insertions(+), 1072 deletions(-)

diff --git a/11_Day_Events/11_events_boilerplate/README.md b/11_Day_Events/11_events_boilerplate/README.md
index 6a3afde..dbc8073 100644
--- a/11_Day_Events/11_events_boilerplate/README.md
+++ b/11_Day_Events/11_events_boilerplate/README.md
@@ -1,4 +1,4 @@
-# 30 Days of React App: Day 3
+# 30 Days of React App: Day 11
 
 In the project directory, you can run to start the project
 
diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md
index e54d3d4..5768916 100644
--- a/12_Day_Forms/12_forms.md
+++ b/12_Day_Forms/12_forms.md
@@ -92,6 +92,8 @@ The input element has many attributes such as value, name, id, placeholder, type
 
 ```js
 import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
 class App extends Component {
   // declaring state
   // initial state
@@ -134,7 +136,9 @@ We usually use form to handle use information. Let us move to form section and m
 In this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).
 
 ```js
-class App extends React.Component {
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+class App extends Component {
   // declaring state
   state = {
     firstName: '',
@@ -202,9 +206,7 @@ class App extends React.Component {
             />
           </div>
 
-          <button onClick={this.changeAnimal} class='btn btn-success'>
-            Submit
-          </button>
+          <button class='btn btn-success'>Submit</button>
         </form>
       </div>
     )
@@ -683,6 +685,7 @@ class App extends Component {
       file,
       skills: formattedSkills,
     }
+    // the is the place we connect backend api to send the data to the database
     console.log(data)
   }
 
diff --git a/12_Day_Forms/12_forms_boilerplate/README.md b/12_Day_Forms/12_forms_boilerplate/README.md
index 6a3afde..7ee98c8 100644
--- a/12_Day_Forms/12_forms_boilerplate/README.md
+++ b/12_Day_Forms/12_forms_boilerplate/README.md
@@ -1,4 +1,4 @@
-# 30 Days of React App: Day 3
+# 30 Days of React App: Day 12
 
 In the project directory, you can run to start the project
 
diff --git a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
index f24afb2..37ba758 100644
--- a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
+++ b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
@@ -18,145 +18,93 @@
 
 ![30 Days of React banner](../images/30_days_of_react_banner_day_13.jpg)
 
-- [Uncotrolled Inputs](#uncotrolled-inputs)
-  - [Getting data from an input field](#getting-data-from-an-input-field)
+- [Uncotrolled Components](#uncotrolled-components)
+  - [Getting data from an uncontrolled input](#getting-data-from-an-uncontrolled-input)
   - [Getting multiple input data from form](#getting-multiple-input-data-from-form)
-  - [Get data from different input field types](#get-data-from-different-input-field-types)
-  - [Form Validation](#form-validation)
-  - [What is validation?](#what-is-validation)
-  - [What is the purpose of validation](#what-is-the-purpose-of-validation)
-  - [Validation Types](#validation-types)
 - [Exercises](#exercises)
   - [Exercises: Level 1](#exercises-level-1)
   - [Exercises: Level 2](#exercises-level-2)
   - [Exercises: Level 3](#exercises-level-3)
 
-# Uncotrolled Inputs
+# Uncotrolled Components
 
-In the previous day challenge we have covered controlled inputs. In react most of the time we use controlled inputs as recommended on the official [documentation of React](https://reactjs.org/docs/uncontrolled-components.html). To write un
+In the previous day challenge we have covered controlled inputs. In react most of the time we use controlled inputs as recommended on the official [documentation of React](https://reactjs.org/docs/uncontrolled-components.html).
 
-```html
-<input type="text" />
-<input type="number" />
-<input type="range" />
+To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. In uncontrolled input we get data from input fields like traditional HTML form data handling.
 
-<input type="email" />
-<input type="password" />
-<input type="tel" />
+An example of uncontrolled component
 
-<input type="checkbox" />
-<input type="radio" />
+## Getting data from an uncontrolled input
 
-<input type="color" />
-
-<input type="url" />
-<input type="image" />
-<input type="file" />
-
-<input type="hidden" />
-
-<input type="date" />
-<input type="datetime-local" />
-<input type="month" />
-<input type="week" />
-<input type="time" />
-
-<input type="reset" />
-<input type="search" />
-<input type="submit" />
-<input type="button" />
-```
-
-Another HTML fields to get data from a form are textarea and select with options elements.
-
-```html
-<textarea>Please write your comment ...</textarea>
-
-<select name="country">
-  <option value="">Select your country</option>
-  <option value="finland">Finland</option>
-  <option value="sweden">Sweden</option>
-  <option value="denmark">Denmark</option>
-  <option value="norway">Norway</option>
-  <option value="iceland">Iceland</option>
-</select>
-```
-
-Now, you know most of the fields we need to get data from a form. Let's start with an input with type text field. In the previous day, we saw different types of events and today we will focus on more of _onChange_ event type which triggers whenever an input field data changes. Input field has by default a memory to store input data but in this section we control that using state and we implement a controlled input. Today we will implement a controlled input. We will cover uncontrolled input in a separate section.
-
-## Getting data from an input field
-
-So far we did not get any data from input field. Now, it is time to learn how to get data from an input field. We need on input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/OJVpyqm).
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 
-The input element has many attributes such as value, name, id, placeholder, type and event handler. In addition, we can link a label and an input field using an id of input field and htmlFor of the label.If label and input are linked it will focus the input when we click on label. Look at the example give below.
+class App extends Component {
+  firstName = React.createRef()
 
-```js
-class App extends React.Component {
-  // declaring state
-  // initial state
-  state = {
-    firstName: '',
-  }
-  handleChange = (e) => {
-    const value = e.target.value
-    this.setState({ firstName: value })
+  handleSubmit = (e) => {
+    e.preventDefault()
+    console.log(this.firstName.current.value)
   }
 
   render() {
-    // accessing the state value and this value will injected to the input in the value attribute
-    const firstName = this.state.firstName
     return (
       <div className='App'>
-        <label htmlFor='firstName'>First Name: </l>
-        <input
-          type='text'
-          id='firstName'
-          name='firstName'
-          placeholder='First Name'
-          value={firstName}
-          onChange={this.handleChange}
-        />
-        <h1>{this.state.firstName}</h1>
+        <form onSubmit={this.handleSubmit}>
+          <label htmlFor='firstName'>First Name: </label>
+          <input
+            type='text'
+            id='firstName'
+            name='firstName'
+            placeholder='First Name'
+            ref={this.firstName}
+          />
+          <button type='submit'>Submit</button>
+        </form>
       </div>
     )
   }
 }
-```
 
-We usually use form to handle use information. Let us move to form section and make use the form element.
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
 
 ## Getting multiple input data from form
 
-In this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).
+We can grab multiple input data from DOM. We are not directly targeting the DOM but React is getting data from DOM using ref.
 
 ```js
-class App extends React.Component {
-  // declaring state
-  state = {
-    firstName: '',
-    lastName: '',
-    country: '',
-    title: '',
-  }
-  handleChange = (e) => {
-    /*
-    // we can get the name and value like this but we can also destructure it from e.target
-    const name = e.target.name
-    const value = e.target.value
-    */
-    const { name, value } = e.target
-    // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
-    this.setState({ [name]: value })
-  }
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+class App extends Component {
+  firstName = React.createRef()
+  lastName = React.createRef()
+  country = React.createRef()
+  title = React.createRef()
+
   handleSubmit = (e) => {
     // stops the default behavior of form element specifically refreshing of page
     e.preventDefault()
-    console.log(this.state)
+
+    console.log(this.firstName.current.value)
+    console.log(this.lastName.current.value)
+    console.log(this.title.current.value)
+    console.log(this.country.current.value)
+
+    const data = {
+      firstName: this.firstName.current.value,
+      lastName: this.lastName.current.value,
+      title: this.title.current.value,
+      country: this.country.current.value,
+    }
+    // the is the place we connect backend api to send the data to the database
+    console.log(data)
   }
 
   render() {
-    // accessing the state value by destrutcturing the state
-    const { firstName, lastName, title, country } = this.state
     return (
       <div className='App'>
         <h3>Add Student</h3>
@@ -166,7 +114,7 @@ class App extends React.Component {
               type='text'
               name='firstName'
               placeholder='First Name'
-              value={firstName}
+              ref={this.firstName}
               onChange={this.handleChange}
             />
           </div>
@@ -175,7 +123,7 @@ class App extends React.Component {
               type='text'
               name='lastName'
               placeholder='Last Name'
-              value={lastName}
+              ref={this.lastName}
               onChange={this.handleChange}
             />
           </div>
@@ -184,7 +132,7 @@ class App extends React.Component {
               type='text'
               name='country'
               placeholder='Country'
-              value={country}
+              ref={this.country}
               onChange={this.handleChange}
             />
           </div>
@@ -193,328 +141,12 @@ class App extends React.Component {
               type='text'
               name='title'
               placeholder='Title'
-              value={title}
+              ref={this.title}
               onChange={this.handleChange}
             />
           </div>
 
-          <button onClick={this.changeAnimal} class='btn btn-success'>
-            Submit
-          </button>
-        </form>
-      </div>
-    )
-  }
-}
-```
-
-The above form handles only text types but do have different input field types. Let's do another form which handle all the different input field types.
-
-## Get data from different input field types
-
-```js
-// index.js
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-
-const options = [
-  {
-    value: '',
-    label: '-- Select Country--',
-  },
-  {
-    value: 'Finland',
-    label: 'Finland',
-  },
-  {
-    value: 'Sweden',
-    label: 'Sweden',
-  },
-  {
-    value: 'Norway',
-    label: 'Norway',
-  },
-  {
-    value: 'Denmark',
-    label: 'Denmark',
-  },
-]
-
-// mapping the options to list(array) of JSX options
-
-const selectOptions = options.map(({ value, label }) => (
-  <option value={value}> {label}</option>
-))
-
-class App extends React.Component {
-  // declaring state
-  state = {
-    firstName: '',
-    lastName: '',
-    email: '',
-    country: '',
-    tel: '',
-    dateOfBirth: '',
-    favoriteColor: '',
-    weight: '',
-    gender: '',
-    file: '',
-    bio: '',
-    skills: {
-      html: false,
-      css: false,
-      javascript: false,
-    },
-  }
-  handleChange = (e) => {
-    /*
-    // we can get the name and value like this but we can also destructure it from e.target
-    const name = e.target.name
-    const value = e.target.value
-    */
-    const { name, value, type, checked } = e.target
-    // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
-
-    if (type === 'checkbox') {
-      this.setState({
-        skills: { ...this.state.skills, [name]: checked },
-      })
-    } else if (type === 'file') {
-      console.log(type, 'cehck here')
-      this.setState({ [name]: e.target.files[0] })
-    } else {
-      this.setState({ [name]: value })
-    }
-  }
-  handleSubmit = (e) => {
-    // stops the default behavior of form element specifically refreshing of page
-    e.preventDefault()
-    const {
-      firstName,
-      lastName,
-      email,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      country,
-      gender,
-      bio,
-      file,
-      skills,
-    } = this.state
-
-    const formattedSkills = []
-    for (const key in skills) {
-      console.log(key)
-      if (skills[key]) {
-        formattedSkills.push(key.toUpperCase())
-      }
-    }
-    const data = {
-      firstName,
-      lastName,
-      email,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      country,
-      gender,
-      bio,
-      file,
-      skills: formattedSkills,
-    }
-    console.log(data)
-  }
-
-  render() {
-    // accessing the state value by destrutcturing the state
-    const {
-      firstName,
-      lastName,
-      email,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      country,
-      gender,
-      bio,
-    } = this.state
-    return (
-      <div className='App'>
-        <h3>Add Student</h3>
-        <form onSubmit={this.handleSubmit}>
-          <div className='row'>
-            <div className='form-group'>
-              <label htmlFor='firstName'>First Name </label>
-              <input
-                type='text'
-                name='firstName'
-                value={firstName}
-                onChange={this.handleChange}
-                placeholder='First Name'
-              />
-            </div>
-            <div className='form-group'>
-              <label htmlFor='lastName'>Last Name </label>
-              <input
-                type='text'
-                name='lastName'
-                value={this.state.lastName}
-                onChange={this.handleChange}
-                placeholder='Last Name'
-              />
-            </div>
-            <div className='form-group'>
-              <label htmlFor='email'>Email </label>
-              <input
-                type='email'
-                name='email'
-                value={email}
-                onChange={this.handleChange}
-                placeholder='Email'
-              />
-            </div>
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='tel'>Telephone </label>
-            <input
-              type='tel'
-              name='tel'
-              value={tel}
-              onChange={this.handleChange}
-              placeholder='Tel'
-            />
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='dateOfBirth'>Date of birth </label>
-            <input
-              type='date'
-              name='dateOfBirth'
-              value={dateOfBirth}
-              onChange={this.handleChange}
-              placeholder='Date of Birth'
-            />
-          </div>
-          <div className='form-group'>
-            <label htmlFor='favoriteColor'>Favorite Color</label>
-            <input
-              type='color'
-              id='color'
-              name='color'
-              value={color}
-              onChange={this.handleChange}
-              placeholder='Favorite Color'
-            />
-          </div>
-          <div className='form-group'>
-            <label htmlFor='weight'>Weight </label>
-            <input
-              type='number'
-              id='weight'
-              name='weight'
-              value={weight}
-              onChange={this.handleChange}
-              placeholder='Weight in Kg'
-            />
-          </div>
-          <div>
-            <label htmlFor='country'>Country</label> <br />
-            <select name='country' onChange={this.handleChange} id='country'>
-              {selectOptions}
-            </select>
-          </div>
-
-          <div>
-            <p>Gender</p>
-            <div>
-              <input
-                type='radio'
-                id='female'
-                name='gender'
-                value='Female'
-                onChange={this.handleChange}
-                checked={gender === 'Female'}
-              />
-              <label htmlFor='female'>Female</label>
-            </div>
-            <div>
-              <input
-                id='male'
-                type='radio'
-                name='gender'
-                value='Male'
-                onChange={this.handleChange}
-                checked={gender === 'Male'}
-              />
-              <label htmlFor='male'>Male</label>
-            </div>
-            <div>
-              <input
-                id='other'
-                type='radio'
-                name='gender'
-                value='Other'
-                onChange={this.handleChange}
-                checked={gender === 'Other'}
-              />
-              <label htmlFor='other'>Other</label>
-            </div>
-          </div>
-
-          <div>
-            <p>Select your skills</p>
-            <div>
-              <input
-                type='checkbox'
-                id='html'
-                name='html'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='html'>HTML</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='css'
-                name='css'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='css'>CSS</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='javascript'
-                name='javascript'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='javascript'>JavaScript</label>
-            </div>
-          </div>
-          <div>
-            <label htmlFor='bio'>Bio</label> <br />
-            <textarea
-              id='bio'
-              name='bio'
-              value={bio}
-              onChange={this.handleChange}
-              cols='120'
-              rows='10'
-              placeholder='Write about yourself ...'
-            />
-          </div>
-
-          <div>
-            <input type='file' name='file' onChange={this.handleChange} />
-          </div>
-          <div>
-            <button>Submit</button>
-          </div>
+          <button class='btn btn-success'>Submit</button>
         </form>
       </div>
     )
@@ -525,369 +157,20 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-## Form Validation
-
-## What is validation?
-
-The action or process of checking or proving the validity or accuracy of something in this case data.
-
-## What is the purpose of validation
-
-The main purpose to validation is to get a desired data from users. In addition, to prevent malicious users and data.
-
-## Validation Types
-
-Validation can be done in client side or sever side. At the moment, we are using React which is a front end technology and we use client side validation.A validation can implement using HTML5 built-in validation or using JavaScript(using regular expression).
-
-In the following snippet of code, a validation has been implemented the first field. Try to understand how it works. The onBlur event has been used to check validity when the input is not focused.
-
-```js
-// index.js
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-
-const options = [
-  {
-    value: '',
-    label: '-- Select Country--',
-  },
-  {
-    value: 'Finland',
-    label: 'Finland',
-  },
-  {
-    value: 'Sweden',
-    label: 'Sweden',
-  },
-  {
-    value: 'Norway',
-    label: 'Norway',
-  },
-  {
-    value: 'Denmark',
-    label: 'Denmark',
-  },
-]
-
-// mapping the options to list(array) of JSX options
-
-const selectOptions = options.map(({ value, label }) => (
-  <option value={value}> {label}</option>
-))
-
-class App extends Component {
-  // declaring state
-  state = {
-    firstName: '',
-    lastName: '',
-    email: '',
-    country: '',
-    tel: '',
-    dateOfBirth: '',
-    favoriteColor: '',
-    weight: '',
-    gender: '',
-    file: '',
-    bio: '',
-    skills: {
-      html: false,
-      css: false,
-      javascript: false,
-    },
-    touched: {
-      firstName: false,
-      lastName: false,
-    },
-  }
-  handleChange = (e) => {
-    /*
-    // we can get the name and value like this but we can also destructure it from e.target
-    const name = e.target.name
-    const value = e.target.value
-    */
-    const { name, value, type, checked } = e.target
-    // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
-
-    if (type === 'checkbox') {
-      this.setState({
-        skills: { ...this.state.skills, [name]: checked },
-      })
-    } else if (type === 'file') {
-      this.setState({ [name]: e.target.files[0] })
-    } else {
-      this.setState({ [name]: value })
-    }
-  }
-  handleBlur = (e) => {
-    const { name, value } = e.target
-    this.setState({ touched: { ...this.state.touched, [name]: true } })
-  }
-  validate = () => {
-    // Object to collect error feedback and to display on the form
-    const errors = {
-      firstName: '',
-    }
-
-    if (
-      (this.state.touched.firstName && this.state.firstName.length < 3) ||
-      (this.state.touched.firstName && this.state.firstName.length > 12)
-    ) {
-      errors.firstName = 'First name must be between 2 and 12'
-    }
-    return errors
-  }
-  handleSubmit = (e) => {
-    // stops the default behavior of form element specifically refreshing of page
-    e.preventDefault()
-
-    const {
-      firstName,
-      lastName,
-      email,
-      country,
-      gender,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      bio,
-      file,
-      skills,
-    } = this.state
-
-    const formattedSkills = []
-    for (const key in skills) {
-      console.log(key)
-      if (skills[key]) {
-        formattedSkills.push(key.toUpperCase())
-      }
-    }
-    const data = {
-      firstName,
-      lastName,
-      email,
-      country,
-      gender,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      bio,
-      file,
-      skills: formattedSkills,
-    }
-    console.log(data)
-  }
-
-  render() {
-    // accessing the state value by destrutcturing the state
-    // the noValidate attribute on the form is to stop the HTML5 built-in validation
-
-    const { firstName } = this.validate()
-    return (
-      <div className='App'>
-        <h3>Add Student</h3>
-        <form onSubmit={this.handleSubmit} noValidate>
-          <div className='row'>
-            <div className='form-group'>
-              <label htmlFor='firstName'>First Name </label>
-              <input
-                type='text'
-                name='firstName'
-                value={this.state.firstName}
-                onChange={this.handleChange}
-                onBlur={this.handleBlur}
-                placeholder='First Name'
-              /> <br />
-              <small>{firstName}</small>
-            </div>
-            <div className='form-group'>
-              <label htmlFor='lastName'>Last Name </label>
-              <input
-                type='text'
-                name='lastName'
-                value={this.state.lastName}
-                onChange={this.handleChange}
-                placeholder='Last Name'
-              />
-            </div>
-            <div className='form-group'>
-              <label htmlFor='email'>Email </label>
-              <input
-                type='email'
-                name='email'
-                value={this.state.email}
-                onChange={this.handleChange}
-                placeholder='Email'
-              />
-            </div>
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='tel'>Telephone </label>
-            <input
-              type='tel'
-              name='tel'
-              value={this.state.tel}
-              onChange={this.handleChange}
-              placeholder='Tel'
-            />
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='dateOfBirth'>Date of birth </label>
-            <input
-              type='date'
-              name='dateOfBirth'
-              value={this.state.dateOfBirth}
-              onChange={this.handleChange}
-              placeholder='Date of Birth'
-            />
-          </div>
-          <div className='form-group'>
-            <label htmlFor='favoriteColor'>Favorite Color</label>
-            <input
-              type='color'
-              id='favoriteColor'
-              name='favoriteColor'
-              value={this.state.favoriteColor}
-              onChange={this.handleChange}
-              placeholder='Favorite Color'
-            />
-          </div>
-          <div className='form-group'>
-            <label htmlFor='weight'>Weight </label>
-            <input
-              type='number'
-              id='weight'
-              name='weight'
-              value={this.state.weight}
-              onChange={this.handleChange}
-              placeholder='Weight in Kg'
-            />
-          </div>
-          <div>
-            <label htmlFor='country'>Country</label> <br />
-            <select name='country' onChange={this.handleChange} id='country'>
-              {selectOptions}
-            </select>
-          </div>
-
-          <div>
-            <p>Gender</p>
-            <div>
-              <input
-                type='radio'
-                id='female'
-                name='gender'
-                value='Female'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Female'}
-              />
-              <label htmlFor='female'>Female</label>
-            </div>
-            <div>
-              <input
-                id='male'
-                type='radio'
-                name='gender'
-                value='Male'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Male'}
-              />
-              <label htmlFor='male'>Male</label>
-            </div>
-            <div>
-              <input
-                id='other'
-                type='radio'
-                name='gender'
-                value='Other'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Other'}
-              />
-              <label htmlFor='other'>Other</label>
-            </div>
-          </div>
-
-          <div>
-            <p>Select your skills</p>
-            <div>
-              <input
-                type='checkbox'
-                id='html'
-                name='html'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='html'>HTML</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='css'
-                name='css'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='css'>CSS</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='javascript'
-                name='javascript'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='javascript'>JavaScript</label>
-            </div>
-          </div>
-          <div>
-            <label htmlFor='bio'>Bio</label> <br />
-            <textarea
-              id='bio'
-              name='bio'
-              value={this.state.bio}
-              onChange={this.handleChange}
-              cols='120'
-              rows='10'
-              placeholder='Write about yourself ...'
-            />
-          </div>
-
-          <div>
-            <input type='file' name='file' onChange={this.handleChange} />
-          </div>
-          <div>
-            <button>Submit</button>
-          </div>
-        </form>
-      </div>
-    )
-  }
-}
-
-const rootElement = document.getElementById('root')
-ReactDOM.render(<App />, rootElement)
-```
+Most of the time we use controlled input instead of uncontrolled input. In case if you want to target some element on the DOM you will use ref to get the content of that element. Don't touch directly using pure JavaScript. When you develop a React application do not touch the DOM directly because React has its own way of handling the DOM manipulation.
 
 # Exercises
 
 ## Exercises: Level 1
 
-1. What is the importance of form?
-2. How many input types do you know?
-3. Mention at least four attributes of an input element
-4. What is the importance of htmlFor?
-5. Write an input type which is not given in the example if there is?
-6. What is a controlled input?
-7. How do you bind data in React? The first input field example is data binding in React.
-8. What is validation?
-9. What is the event type we use to listen when an input changes?
-10. What are event types we use to validate an input?
+1. What is a controlled input?
+2. What is an uncontrolled input
+3. How do you get a content of a certain HTML element in React ?
+4. Why it is not a good idea to touch the DOM directly in React ?
+5. What is most frequently used in React ? Controlled or Uncontrolled input.
 
 ## Exercises: Level 2
 
-1. Validate the form given above (a gif image or a video will be provided later)
-
 ## Exercises: Level 3
 
 🎉 CONGRATULATIONS ! 🎉
diff --git a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md
index 6a3afde..79b2351 100644
--- a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md
+++ b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md
@@ -1,4 +1,4 @@
-# 30 Days of React App: Day 3
+# 30 Days of React App: Day 13
 
 In the project directory, you can run to start the project
 
diff --git a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js
index d70429a..ef10f30 100644
--- a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js
+++ b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js
@@ -1,321 +1,74 @@
-// index.js
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
-const options = [
-  {
-    value: '',
-    label: '-- Select Country--',
-  },
-  {
-    value: 'Finland',
-    label: 'Finland',
-  },
-  {
-    value: 'Sweden',
-    label: 'Sweden',
-  },
-  {
-    value: 'Norway',
-    label: 'Norway',
-  },
-  {
-    value: 'Denmark',
-    label: 'Denmark',
-  },
-]
-
-// mapping the options to list(array) of JSX options
-
-const selectOptions = options.map(({ value, label }) => (
-  <option value={value}> {label}</option>
-))
-
 class App extends Component {
-  // declaring state
-  state = {
-    firstName: '',
-    lastName: '',
-    email: '',
-    country: '',
-    tel: '',
-    dateOfBirth: '',
-    favoriteColor: '',
-    weight: '',
-    gender: '',
-    file: '',
-    bio: '',
-    skills: {
-      html: false,
-      css: false,
-      javascript: false,
-    },
-    touched: {
-      firstName: false,
-      lastName: false,
-    },
-  }
-  handleChange = (e) => {
-    /*
-    // we can get the name and value like this but we can also destructure it from e.target
-    const name = e.target.name
-    const value = e.target.value
-    */
-    const { name, value, type, checked } = e.target
-    // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
-
-    if (type === 'checkbox') {
-      this.setState({
-        skills: { ...this.state.skills, [name]: checked },
-      })
-    } else if (type === 'file') {
-      this.setState({ [name]: e.target.files[0] })
-    } else {
-      this.setState({ [name]: value })
-    }
-  }
-  handleBlur = (e) => {
-    const { name, value } = e.target
-    this.setState({ touched: { ...this.state.touched, [name]: true } })
-  }
-  validate = () => {
-    // Object to collect error feedback and to display on the form
-    const errors = {
-      firstName: '',
-    }
+  firstName = React.createRef()
+  lastName = React.createRef()
+  country = React.createRef()
+  title = React.createRef()
 
-    if (
-      (this.state.touched.firstName && this.state.firstName.length < 3) ||
-      (this.state.touched.firstName && this.state.firstName.length > 12)
-    ) {
-      errors.firstName = 'First name must be between 2 and 12'
-    }
-    return errors
-  }
   handleSubmit = (e) => {
     // stops the default behavior of form element specifically refreshing of page
     e.preventDefault()
 
-    const {
-      firstName,
-      lastName,
-      email,
-      country,
-      gender,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      bio,
-      file,
-      skills,
-    } = this.state
+    console.log(this.firstName.current.value)
+    console.log(this.lastName.current.value)
+    console.log(this.title.current.value)
+    console.log(this.country.current.value)
 
-    const formattedSkills = []
-    for (const key in skills) {
-      console.log(key)
-      if (skills[key]) {
-        formattedSkills.push(key.toUpperCase())
-      }
-    }
     const data = {
-      firstName,
-      lastName,
-      email,
-      country,
-      gender,
-      tel,
-      dateOfBirth,
-      favoriteColor,
-      weight,
-      bio,
-      file,
-      skills: formattedSkills,
+      firstName: this.firstName.current.value,
+      lastName: this.lastName.current.value,
+      title: this.title.current.value,
+      country: this.country.current.value,
     }
+    // the is the place we connect backend api to send the data to the database
     console.log(data)
   }
 
   render() {
-    // accessing the state value by destrutcturing the state
-    // the noValidate attribute on the form is to stop the HTML5 built-in validation
-
-    const { firstName } = this.validate()
     return (
       <div className='App'>
         <h3>Add Student</h3>
-        <form onSubmit={this.handleSubmit} noValidate>
-          <div className='row'>
-            <div className='form-group'>
-              <label htmlFor='firstName'>First Name </label>
-              <input
-                type='text'
-                name='firstName'
-                value={this.state.firstName}
-                onChange={this.handleChange}
-                onBlur={this.handleBlur}
-                placeholder='First Name'
-              />{' '}
-              <br />
-              <small>{firstName}</small>
-            </div>
-            <div className='form-group'>
-              <label htmlFor='lastName'>Last Name </label>
-              <input
-                type='text'
-                name='lastName'
-                value={this.state.lastName}
-                onChange={this.handleChange}
-                placeholder='Last Name'
-              />
-            </div>
-            <div className='form-group'>
-              <label htmlFor='email'>Email </label>
-              <input
-                type='email'
-                name='email'
-                value={this.state.email}
-                onChange={this.handleChange}
-                placeholder='Email'
-              />
-            </div>
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='tel'>Telephone </label>
-            <input
-              type='tel'
-              name='tel'
-              value={this.state.tel}
-              onChange={this.handleChange}
-              placeholder='Tel'
-            />
-          </div>
-
-          <div className='form-group'>
-            <label htmlFor='dateOfBirth'>Date of birth </label>
+        <form onSubmit={this.handleSubmit}>
+          <div>
             <input
-              type='date'
-              name='dateOfBirth'
-              value={this.state.dateOfBirth}
+              type='text'
+              name='firstName'
+              placeholder='First Name'
+              ref={this.firstName}
               onChange={this.handleChange}
-              placeholder='Date of Birth'
             />
           </div>
-          <div className='form-group'>
-            <label htmlFor='favoriteColor'>Favorite Color</label>
+          <div>
             <input
-              type='color'
-              id='favoriteColor'
-              name='favoriteColor'
-              value={this.state.favoriteColor}
+              type='text'
+              name='lastName'
+              placeholder='Last Name'
+              ref={this.lastName}
               onChange={this.handleChange}
-              placeholder='Favorite Color'
             />
           </div>
-          <div className='form-group'>
-            <label htmlFor='weight'>Weight </label>
+          <div>
             <input
-              type='number'
-              id='weight'
-              name='weight'
-              value={this.state.weight}
+              type='text'
+              name='country'
+              placeholder='Country'
+              ref={this.country}
               onChange={this.handleChange}
-              placeholder='Weight in Kg'
             />
           </div>
           <div>
-            <label htmlFor='country'>Country</label> <br />
-            <select name='country' onChange={this.handleChange} id='country'>
-              {selectOptions}
-            </select>
-          </div>
-
-          <div>
-            <p>Gender</p>
-            <div>
-              <input
-                type='radio'
-                id='female'
-                name='gender'
-                value='Female'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Female'}
-              />
-              <label htmlFor='female'>Female</label>
-            </div>
-            <div>
-              <input
-                id='male'
-                type='radio'
-                name='gender'
-                value='Male'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Male'}
-              />
-              <label htmlFor='male'>Male</label>
-            </div>
-            <div>
-              <input
-                id='other'
-                type='radio'
-                name='gender'
-                value='Other'
-                onChange={this.handleChange}
-                checked={this.state.gender === 'Other'}
-              />
-              <label htmlFor='other'>Other</label>
-            </div>
-          </div>
-
-          <div>
-            <p>Select your skills</p>
-            <div>
-              <input
-                type='checkbox'
-                id='html'
-                name='html'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='html'>HTML</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='css'
-                name='css'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='css'>CSS</label>
-            </div>
-            <div>
-              <input
-                type='checkbox'
-                id='javascript'
-                name='javascript'
-                onChange={this.handleChange}
-              />
-              <label htmlFor='javascript'>JavaScript</label>
-            </div>
-          </div>
-          <div>
-            <label htmlFor='bio'>Bio</label> <br />
-            <textarea
-              id='bio'
-              name='bio'
-              value={this.state.bio}
+            <input
+              type='text'
+              name='title'
+              placeholder='Title'
+              ref={this.title}
               onChange={this.handleChange}
-              cols='120'
-              rows='10'
-              placeholder='Write about yourself ...'
             />
           </div>
 
-          <div>
-            <input type='file' name='file' onChange={this.handleChange} />
-          </div>
-          <div>
-            <button>Submit</button>
-          </div>
+          <button class='btn btn-success'>Submit</button>
         </form>
       </div>
     )
diff --git a/readMe.md b/readMe.md
index 4c8d426..9920c21 100644
--- a/readMe.md
+++ b/readMe.md
@@ -35,8 +35,10 @@
 |10|[React Project Folder Structure](./10_React_Project_Folder_Structure/10_react_project_folder_structure.md)|
 |11|[Events](./11_Day_Events/11_events.md)|
 |12|[Forms](./12_Day_Forms/12_forms.md)|
-|13|[Controlled and Uncondrolled Component 😞]()|
-|13|[Component Life Cycles😞]()|
+|13|[Controlled and Uncontrolled Component](./13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)|
+|14|[Component Life Cycles😞]()|
+|15|[Styles in React😞]()|
+
 
 🧡🧡🧡 HAPPY CODING 🧡🧡🧡
 <div>