From 1b37a66c92326659330ee4f9df8bdd1f44e45dbe Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 4 Jun 2020 12:17:04 +0800
Subject: [PATCH 01/68] Adding my React learning journey
learningReact
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 1850409..46b6ac4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# I've joined the #301DaysOfCode Challenge.
-
+I, meera menon joined this challenge today, 4th june 2020 and just forked the repo from benjaminspark
## Contents
* [Rules](rules.md)
From 95c48e6f4db2074378b0320978592e9545fef39b Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 4 Jun 2020 16:11:54 +0800
Subject: [PATCH 02/68] DAY 1
Brushing up on my React JavaScript framework
---
log.md | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/log.md b/log.md
index 8926854..88f2e96 100644
--- a/log.md
+++ b/log.md
@@ -1,12 +1,14 @@
# #301DaysOfCode - Log
The daily log of my **#301DaysOfCode** challenge.
-## Log
+## Log 1
-### Day 1: [Date]
+### Day 1: [4th June 2020]
-**Today's Progress:**
+**Today's Progress: I have been learning React , intermediate level for the past few days from Scrimba, and I really find it much easier after practising on the scrimba platform. Today, I learnt how to do a basic React form, and practised it in my codepen file**
+
+**Thoughts:*Hope, by the end of this challenge, I become a React expert as I love React but sometimes I find it intimidating to do without googling, hehe*
+
+**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/YzymZrQ*
-**Thoughts:**
-**Link to work:**
From bbc6fcb110f7dcc9390f8c2cf7753d0e148a52d6 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 5 Jun 2020 16:23:17 +0800
Subject: [PATCH 03/68] ## Log 2 ### Day 2: [5th June 2020]
React Forms practice
---
log.md | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 161 insertions(+)
diff --git a/log.md b/log.md
index 88f2e96..358f760 100644
--- a/log.md
+++ b/log.md
@@ -12,3 +12,164 @@ The daily log of my **#301DaysOfCode** challenge.
**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/YzymZrQ*
+
+
+
+## Log 2
+
+### Day 2: [5th June 2020]
+
+**Today's progress: I am learning my React form lessons on scrimba and in this practise session, I learnt a lot about making different types of input types such as radio and checkbox in React Forms.**
+
+The code for this lesson:
+class App extends Component {
+ constructor() {
+ super()
+ this.state = {
+ firstName: "",
+ lastName: "",
+ age: "",
+ gender: "",
+ destination: "",
+ isVegan: false,
+ isKosher: false,
+ isLactoseFree: false
+ }
+ this.handleChange = this.handleChange.bind(this)
+ }
+
+ handleChange(event) {
+ const {name, value, type, checked} = event.target
+ type === "checkbox" ?
+ this.setState({
+ [name]: checked
+ })
+ :
+ this.setState({
+ [name]: value
+ })
+ }
+
+ render() {
+ return (
+
+
+
+
Entered information:
+
Your name: {this.state.firstName} {this.state.lastName}
+
+
+ )
+ }
+}
+
+ReactDOM.render(, document.getElementById("root"));
+
+
+
+
+**Thoughts:*Hope, by the end of this challenge, I become a React expert as I love React but sometimes I find it intimidating to do without googling, hehe*
+
+**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/JjGoLXy?editors=1010*
From 0a6fa6130c49a03f7316e809ac863b05f1f1bdbe Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 6 Jun 2020 16:10:19 +0800
Subject: [PATCH 04/68] ## Log 3 ### Day 3: [6th June 2020]
Learning about React Container & Component Architecture
---
log.md | 190 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 190 insertions(+)
diff --git a/log.md b/log.md
index 358f760..6246ebd 100644
--- a/log.md
+++ b/log.md
@@ -173,3 +173,193 @@ ReactDOM.render(, document.getElementById("root"));
**Thoughts:*Hope, by the end of this challenge, I become a React expert as I love React but sometimes I find it intimidating to do without googling, hehe*
**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/JjGoLXy?editors=1010*
+
+
+## Log 3
+
+### Day 3: [6th June 2020]
+
+**Today's progress: I am learning my React form lessons on scrimba and in this practise session, I learnt about the Container and Component Architecture in React for making the React Forms. Special thanks to Bob Ziroll for these lessons by Bob Ziroll in React lessons, Scrimba**
+Writing down the code in my codepen file so that I can retrieve later for my projects:
+The html :
+The javascript :
+
+import React from "react"
+
+function FormComponent(props) {
+ return (
+
+
+
+
Entered information:
+
Your name: {props.data.firstName} {props.data.lastName}
+
+
+ )
+}
+export default FormComponent
+import React, {Component} from "react"
+import FormComponent from "./FormComponent"
+
+class Form extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ firstName: "",
+ lastName: "",
+ age: "",
+ gender: "",
+ destination: "",
+ isVegan: false,
+ isKosher: false,
+ isLactoseFree: false
+ }
+ this.handleChange = this.handleChange.bind(this)
+ }
+
+ handleChange(event) {
+ const {name, value, type, checked} = event.target
+ type === "checkbox" ?
+ this.setState({
+ [name]: checked
+ })
+ :
+ this.setState({
+ [name]: value
+ })
+ }
+
+ render() {
+ return(
+
+ )
+ }
+}
+export default Form
+
+import React, {Component} from "react"
+import Form from "./FormContainer"
+
+function App() {
+ return (
+
+ )
+}
+export default App
+
+ReactDOM.render(, document.getElementById("root"))
+
+
+As seen above, it is worth remembering and noting down that the FormComponent.js goes at the top of the code, below that is the FormContainer.js and below that is the App.js
+While writing the code in scrimba, the import and export of the files in js are to be mentioned but it is not required in the codePen since the export and import of the js files are automatically done behind the hoods by the codePen files.
+
+
+
+**Thoughts:*Hope, by the end of this challenge, I am slowly becoming a React somebody from nobody, without googling, just need to refer to my notes, hence documenting here, very handy indeed, hehe*
+
+**Link to work:*This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : https://codepen.io/meeramenon07/full/VweLeOL*
From 487f69c6405e360523a7e89a36cb6b6d127396c0 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 8 Jun 2020 17:20:33 +0800
Subject: [PATCH 05/68] Day 4- Day 5: [7th June 2020- 8th June 2020]
revision work only
---
log.md | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 153 insertions(+)
diff --git a/log.md b/log.md
index 6246ebd..cb530b5 100644
--- a/log.md
+++ b/log.md
@@ -363,3 +363,156 @@ While writing the code in scrimba, the import and export of the files in js are
**Thoughts:*Hope, by the end of this challenge, I am slowly becoming a React somebody from nobody, without googling, just need to refer to my notes, hence documenting here, very handy indeed, hehe*
**Link to work:*This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : https://codepen.io/meeramenon07/full/VweLeOL*
+
+
+
+
+
+Day 4- Day 5: [7th June 2020- 8th June 2020]
+Two days, I was just into revision of this lesson not much of progress: I am learning my React form lessons on scrimba and in this practise session, I learnt about the Container and Component Architecture in React for making the React Forms. Special thanks to Bob Ziroll for these lessons by Bob Ziroll in React lessons, Scrimba Writing down the code in my codepen file so that I can retrieve later for my projects: The html :
+
+The javascript :
+import React from "react"
+
+function FormComponent(props) { return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Entered information:
+
Your name: {props.data.firstName} {props.data.lastName}
+
+
+)
+} export default FormComponent import React, {Component} from "react" import FormComponent from "./FormComponent"
+
+class Form extends React.Component { constructor() { super() this.state = { firstName: "", lastName: "", age: "", gender: "", destination: "", isVegan: false, isKosher: false, isLactoseFree: false } this.handleChange = this.handleChange.bind(this) }
+
+handleChange(event) {
+ const {name, value, type, checked} = event.target
+ type === "checkbox" ?
+ this.setState({
+ [name]: checked
+ })
+ :
+ this.setState({
+ [name]: value
+ })
+}
+
+render() {
+ return(
+
+ )
+}
+} export default Form
+
+import React, {Component} from "react" import Form from "./FormContainer"
+
+function App() { return ( ) } export default App
+
+ReactDOM.render(, document.getElementById("root"))
+
+As seen above, it is worth remembering and noting down that the FormComponent.js goes at the top of the code, below that is the FormContainer.js and below that is the App.js While writing the code in scrimba, the import and export of the files in js are to be mentioned but it is not required in the codePen since the export and import of the js files are automatically done behind the hoods by the codePen files.
+
+**Thoughts:Hope, by the end of this challenge, I am slowly becoming a React somebody from nobody, without googling, just need to refer to my notes, hence documenting here, very handy indeed, hehe
+
+**Link to work:This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : https://codepen.io/meeramenon07/full/VweLeOL
+
+
From fa1a359c7a006db8df36d2e44f0c3bb3c6aa0b81 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 9 Jun 2020 16:49:12 +0800
Subject: [PATCH 06/68] ## Log 6 ### Day 6: [9th June 2020]
Learning to make meme generator in React
---
log.md | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 86 insertions(+)
diff --git a/log.md b/log.md
index cb530b5..22dddf6 100644
--- a/log.md
+++ b/log.md
@@ -516,3 +516,89 @@ As seen above, it is worth remembering and noting down that the FormComponent.js
**Link to work:This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : https://codepen.io/meeramenon07/full/VweLeOL
+
+
+
+**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/JjGoLXy?editors=1010*
+
+
+
+
+## Log 6
+
+### Day 6: [9th June 2020]
+
+**Today's progress: Started with the next lesson on scrimba on the making of a Meme generator, right from scratch! It is really fun! I am learning a lot of stuff by learning and re-learning and un-learning what I had learnt last time, so, along the way, I make mistakes and learn all the way along! Have not yet completed this lesson and thought of continuing it for tomorrow!
+
+The code for today is:
+
+index.js
+import React from "react"
+import ReactDOM from "react-dom"
+import App from "./App"
+
+ReactDOM.render(, document.getElementById("root"))
+
+Header.js
+
+import React from "react"
+
+function Header(){
+ return(
+
+
+
+ )
+ }
+
+
+
+}
+
+export default MemeGenerator
+
+
+App.js
+
+import React from "react"
+import Header from "./Header"
+import MemeGenerator from "./MemeGenerator"
+
+/**
+ * Create 2 new components - Header and MemeGenerator
+ * Header will only display things
+ * MemeGenerator will be calling to an API and holding on to data
+ * Each should be in their own file of the same name
+ */
+
+function App() {
+ return (
+
+ )
+ }
+}
+
+
+export default MemeGenerator
+
+
+App.js
+import React from "react"
+import Header from "./Header"
+import MemeGenerator from "./MemeGenerator"
+
+/**
+ * Create 2 new components - Header and MemeGenerator
+ * Header will only display things
+ * MemeGenerator will be calling to an API and holding on to data
+ * Each should be in their own file of the same name
+ */
+
+function App() {
+ return (
+
+
+
+
+ )
+}
+
+export default App
+
+**Thoughts:*Rome was not built in one day and I am dead SURE that I am going to get expert on this React so that I dont need to google for any react coding! I want to get this right without googling!*
+
From 272b721ae345365b53775a73e92135b7281a2ae7 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 13 Jun 2020 16:44:43 +0800
Subject: [PATCH 10/68] ## Log 10 ### Day 10: 13th June 2020]
Making an API call to fetch data
---
log.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 80 insertions(+)
diff --git a/log.md b/log.md
index dc30185..571c396 100644
--- a/log.md
+++ b/log.md
@@ -713,3 +713,83 @@ export default App
**Thoughts:*Rome was not built in one day and I am dead SURE that I am going to get expert on this React so that I dont need to google for any react coding! I want to get this right without googling!*
+
+
+
+
+## Log 10
+
+### Day 10: 13th June 2020]
+
+**Today's Progress: I am continuing with my meme generator project now- today, I did the next part of the project, which is carrying out the following task:
+/**
+ * We'll be using an API that provides a bunch of meme images.
+ *
+ * Your task:
+ * make an API call to "https://api.imgflip.com/get_memes" and save the
+ * data that comes back (`response.data.memes`) to a new state property
+ * called `allMemeImgs`. (The data that comes back is an array)
+ */**
+
+ The code for above task is as follows:
+
+ Header.js
+
+ import React from "react"
+
+function Header() {
+ return (
+
+
+
+ )
+ }
+}
+
+export default MemeGenerator
+
+**Thoughts:*Becoming more enlightened on React!*
From 670c944feeb9b8405576340c6d4b3148340a37b3 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 14 Jun 2020 16:51:25 +0800
Subject: [PATCH 11/68] ## Log 12 ### Day 12: [14th June 2020]
Done with the input field, create the onChange handler method that updates the corresponding state on every change of the input and create the generate button that shows up the memes from the stored images array
---
log.md | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 99 insertions(+), 3 deletions(-)
diff --git a/log.md b/log.md
index 571c396..d7b4734 100644
--- a/log.md
+++ b/log.md
@@ -722,7 +722,8 @@ export default App
### Day 10: 13th June 2020]
**Today's Progress: I am continuing with my meme generator project now- today, I did the next part of the project, which is carrying out the following task:
-/**
+ fetch data from an api link
+ /**
* We'll be using an API that provides a bunch of meme images.
*
* Your task:
@@ -730,8 +731,9 @@ export default App
* data that comes back (`response.data.memes`) to a new state property
* called `allMemeImgs`. (The data that comes back is an array)
*/**
-
- The code for above task is as follows:
+
+
+ The code for above task is as follows:
Header.js
@@ -793,3 +795,97 @@ class MemeGenerator extends Component {
export default MemeGenerator
**Thoughts:*Becoming more enlightened on React!*
+
+
+
+
+## Log 12
+
+### Day 12: [14th June 2020]
+
+**Today's Progress: I am continuing with my meme generator project now- today, I did the next part of the project, which is carrying out the following task:
+ /**
+ * Create 2 input fields, one for the topText and one for the bottomText
+ * Remember that these will be "controlled forms
+ */
+ /**
+ * Create the onChagne handler method
+ * It should update the corresponding state on every change of the input box
+ */
+ /**
+ * Create a method that, when the "Gen" button is clicked, chooses one of the
+ * memes from our `allMemeImgs` array at random and makes it so that is the
+ * meme image that shows up in the bottom portion of our meme generator site
+ */
+
+
+ The code for above task is as follows:
+
+ import React, {Component} from "react"
+
+class MemeGenerator extends Component {
+ constructor() {
+ super()
+ this.state = {
+ topText: "",
+ bottomText: "",
+ randomImg: "http://i.imgflip.com/1bij.jpg",
+ allMemeImgs: []
+ }
+ this.handleChange = this.handleChange.bind(this)
+ }
+
+ componentDidMount() {
+ fetch("https://api.imgflip.com/get_memes")
+ .then(response => response.json())
+ .then(response => {
+ const {memes} = response.data
+ this.setState({ allMemeImgs: memes })
+ })
+ }
+
+ handleChange(event) {
+ const {name, value} = event.target
+ this.setState({ [name]: value })
+ }
+
+ /**
+ * Create a method that, when the "Gen" button is clicked, chooses one of the
+ * memes from our `allMemeImgs` array at random and makes it so that is the
+ * meme image that shows up in the bottom portion of our meme generator site (`.url`)
+ */
+
+ render() {
+ return (
+
+
+
+
+
{this.state.topText}
+
{this.state.bottomText}
+
+
+ )
+ }
+}
+
+export default MemeGenerator
+
+**Thoughts:*Becoming more enlightened on React!*
From 486f62c961e9742e0b76956eb64f9d6033cf70f1 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 15 Jun 2020 17:28:46 +0800
Subject: [PATCH 12/68] ## Log 13 ### Day 13: [15th June 2020]
Learnt how to add in the handleSubmit (event)
---
log.md | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 94 insertions(+)
diff --git a/log.md b/log.md
index d7b4734..31deb0f 100644
--- a/log.md
+++ b/log.md
@@ -889,3 +889,97 @@ class MemeGenerator extends Component {
export default MemeGenerator
**Thoughts:*Becoming more enlightened on React!*
+
+
+
+
+
+
+## Log 13
+
+### Day 13: [15th June 2020]
+
+**Today's Progress: I am continuing with my meme generator project now- today, I did the next part of the project, which is carrying out the following task:
+ /**
+ * Create a method that, when the "Gen" button is clicked, chooses one of the
+ * memes from our `allMemeImgs` array at random and makes it so that is the
+ * meme image that shows up in the bottom portion of our meme generator site (`.url`)
+ // get a random int (index in the array)
+ // get the meme from that index
+ // set `randomImg` to the `.url` of the random item I grabbed
+
+ */
+
+ The code after including the handleSubmit :
+
+
+ import React, {Component} from "react"
+
+class MemeGenerator extends Component {
+ constructor() {
+ super()
+ this.state = {
+ topText: "",
+ bottomText: "",
+ randomImg: "http://i.imgflip.com/1bij.jpg",
+ allMemeImgs: []
+ }
+ this.handleChange = this.handleChange.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ }
+
+ componentDidMount() {
+ fetch("https://api.imgflip.com/get_memes")
+ .then(response => response.json())
+ .then(response => {
+ const {memes} = response.data
+ this.setState({ allMemeImgs: memes })
+ })
+ }
+
+ handleChange(event) {
+ const {name, value} = event.target
+ this.setState({ [name]: value })
+ }
+
+ handleSubmit(event) {
+ event.preventDefault()
+ const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)
+ const randMemeImg = this.state.allMemeImgs[randNum].url
+ this.setState({ randomImg: randMemeImg })
+ }
+
+ render() {
+ return (
+
+
+
+
+
{this.state.topText}
+
{this.state.bottomText}
+
+
+ )
+ }
+}
+
+export default MemeGenerator
+
+
From eb35dfbd73d35f70af1e760380e68d62b48adb44 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 16 Jun 2020 18:11:58 +0800
Subject: [PATCH 13/68] ## Log 14 ### Day 14: [16th June 2020]
no code day
---
log.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/log.md b/log.md
index 31deb0f..5bd11a2 100644
--- a/log.md
+++ b/log.md
@@ -982,4 +982,16 @@ class MemeGenerator extends Component {
export default MemeGenerator
+\\\\
+
+
+
+
+
+## Log 14
+
+### Day 14: [16th June 2020]
+
+Todays progress: None, one of those bad days when you just cant focus, so, I am just gonna stare at my project for ten minutes and re do it tomorrow
+
From 41a3f6fdede53b4921deaaa83abc6470fbf2ecde Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 17 Jun 2020 16:12:40 +0800
Subject: [PATCH 14/68] ## Log 15 ### Day 15: [17th June 2020]
memegenerator project
---
log.md | 310 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 310 insertions(+)
diff --git a/log.md b/log.md
index 5bd11a2..3633355 100644
--- a/log.md
+++ b/log.md
@@ -995,3 +995,313 @@ export default MemeGenerator
Todays progress: None, one of those bad days when you just cant focus, so, I am just gonna stare at my project for ten minutes and re do it tomorrow
+
+
+
+## Log 15
+
+### Day 15: [17th June 2020]
+
+**Today's Progress: I am continuing with my meme generator project now- today, I decided to reconstruct the project on my codepen file and arrange all the instructions for the project in one place here, so that later when I refer back to this project, it is much easier for me to remember, so, it is like a revision or revisiting the project from scratch:
+
+All the tasks from the beginning of the project here:
+STEP 1:
+**
+ * Create the boilerplate to get React to render something on the screen
+ * Render an component, which you'll need to create separately
+ */
+
+
+ STEP 2:
+
+ /**
+ * Create 2 new components - Header and MemeGenerator
+ * Header will only display things
+ * MemeGenerator will be calling to an API and holding on to data
+ * Each should be in their own file of the same name
+ */
+
+STEP 3:
+
+/**
+ * Initialize state to save the following data:
+ * top text
+ * bottom text
+ * random image (intialize with "http://i.imgflip.com/1bij.jpg")
+ */
+
+
+STEP 4:
+
+/**
+ * We'll be using an API that provides a bunch of meme images.
+ *
+ * Your task:
+ * make an API call to "https://api.imgflip.com/get_memes" and save the
+ * data that comes back (`response.data.memes`) to a new state property
+ * called `allMemeImgs`. (The data that comes back is an array)
+ */
+
+
+ STEP 5:
+
+ /**
+ * Create 2 input fields, one for the topText and one for the bottomText
+ * Remember that these will be "controlled forms", so make sure to add
+ * all the attributes you'll need for that to work
+ */
+
+
+ STEP 6:
+
+ /**
+ * Create the onChagne handler method
+ * It should update the corresponding state on every change of the input box
+ */
+
+
+ STEP 7:
+
+ /**
+ * Create a method that, when the "Gen" button is clicked, chooses one of the
+ * memes from our `allMemeImgs` array at random and makes it so that is the
+ * meme image that shows up in the bottom portion of our meme generator site
+ */
+
+
+ STEP 8:
+
+ // get a random int (index in the array)
+ // get the meme from that index
+ // set `randomImg` to the `.url` of the random item I gra
+
+
+ **Thoughts:*Hope, by the end of this challenge, I am slowly becoming a React somebody*
+
+ Complete code source for the above task for my codepen file:
+
+ The html file:
+
+ The css file:
+
+ * {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ background-color: whitesmoke;
+}
+
+header {
+ height: 100px;
+ display: flex;
+ align-items: center;
+ background: #6441A5; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to right, #2a0845, #6441A5); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to right, #2a0845, #6441A5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+header > img {
+ height: 80%;
+ margin-left: 10%;
+}
+
+header > p {
+ font-family: VT323, monospace;
+ color: whitesmoke;
+ font-size: 50px;
+ margin-left: 60px;
+}
+
+.meme {
+ position: relative;
+ width: 90%;
+ margin: auto;
+}
+
+.meme > img {
+ width: 100%;
+}
+
+.meme > h2 {
+ position: absolute;
+ width: 80%;
+ text-align: center;
+ left: 50%;
+ transform: translateX(-50%);
+ margin: 15px 0;
+ padding: 0 5px;
+ font-family: impact, sans-serif;
+ font-size: 2em;
+ text-transform: uppercase;
+ color: white;
+ letter-spacing: 1px;
+ text-shadow:
+ 2px 2px 0 #000,
+ -2px -2px 0 #000,
+ 2px -2px 0 #000,
+ -2px 2px 0 #000,
+ 0 2px 0 #000,
+ 2px 0 0 #000,
+ 0 -2px 0 #000,
+ -2px 0 0 #000,
+ 2px 2px 5px #000;
+}
+
+.meme > .bottom {
+ bottom: 0;
+}
+
+.meme > .top {
+ top: 0;
+}
+
+.meme-form {
+ width: 90%;
+ margin: 20px auto;
+ display: flex;
+ justify-content: space-between;
+}
+
+.meme-form > input {
+ width: 45%;
+ height: 40px;
+}
+
+.meme-form > button {
+ border: none;
+ font-family: VT323, monospace;
+ font-size: 25px;
+ letter-spacing: 1.5px;
+ color: white;
+ background: #6441A5;
+}
+
+.meme-form > input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+ font-family: VT323, monospace;
+ font-size: 25px;
+ text-align: cen
+}
+.meme-form > input::-moz-placeholder { /* Firefox 19+ */
+ font-family: VT323, monospace;
+ font-size: 25px;
+ text-align: cen
+}
+.meme-form > input:-ms-input-placeholder { /* IE 10+ */
+ font-family: VT323, monospace;
+ font-size: 25px;
+ text-align: cen
+}
+.meme-form > input:-moz-placeholder { /* Firefox 18- */
+ font-family: VT323, monospace;
+ font-size: 25px;
+ text-align: cen
+}
+
+ The javascript file:
+
+ function Header() {
+ return (
+
+
+
+ )
+}
+
+
+
+ReactDOM.render(, document.getElementById("root"))
+
+
+
+**Link to work:*This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : [*https://codepen.io/meeramenon07/pen/bGEpYXQ*]
+
+
+
+
+
+
+
+
From 050512e0c5916410fb1f318e210ecfe938c78337 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 18 Jun 2020 16:48:28 +0800
Subject: [PATCH 15/68] ## Log 16 ### Day 16: [18th June 2020]
finished doing the meme generator project
---
log.md | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/log.md b/log.md
index 3633355..6b88f1d 100644
--- a/log.md
+++ b/log.md
@@ -1297,6 +1297,20 @@ ReactDOM.render(, document.getElementById("root"))
**Link to work:*This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : [*https://codepen.io/meeramenon07/pen/bGEpYXQ*]
+
+
+
+
+
+## Log 16
+
+### Day 16: [18th June 2020]
+
+**Today's Progress: I am playing around with my code with my meme generator project now- today, I decided to reconstruct the project on my codepen file and arrange all the instructions for the project in one place here, so that later when I refer back to this project, it is much easier for me to remember, so, it is like a revision or revisiting the project from scratch: Here is the revised project with some changes in the css and some changes with the api and images
+
+**Link to work:*This is my codepen link to my codepen file with the above code that I learnt from Bob Ziroll, Scrimba React.j. Here is the link : [*https://codepen.io/meeramenon07/full/XWXNmpq*]
+
+
From 0e534485fb4eefc08357db8c60773005d9b79eec Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 19 Jun 2020 12:12:22 +0800
Subject: [PATCH 16/68] ## Log 17 ### Day 17: [19th June 2020]
writing some modern React codes
---
log.md | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 107 insertions(+)
diff --git a/log.md b/log.md
index 6b88f1d..d57164b 100644
--- a/log.md
+++ b/log.md
@@ -1314,8 +1314,115 @@ ReactDOM.render(, document.getElementById("root"))
+ ## Log 17
+
+### Day 17: [19th June 2020]
+
+**Today's Progress: I learnt how to write some code in modern React**
+
+**Thoughts:*Hope, by the end of this challenge, I become a React expert as I love React but sometimes I find it intimidating to do without googling, hehe*
+
+This is the general standard of using class based functions in React :
+
+import React, {Component} from "react"
+
+class App extends Component {
+ // Change to use class properties
+ constructor() {
+ super()
+ this.state = {
+ firstName: ""
+ }
+ this.handleChange = this.handleChange.bind(this)
+ }
+
+ // Change to use arrow functions
+ handleChange(event) {
+ const { name, value } = event.target
+ this.setState({
+ [name]: value
+ })
+ }
+
+ render() {
+ return (
+
+
+
{this.state.firstName}
+
+ )
+ }
+}
+
+export default App
+
+AND SOME CHANGES IN MODERN REACT AS MENTIONED BELOW
+
+
+/**
+ * Other modern/advanced React features/topics to learn:
+ *
+ * Official React Context API - https://reactjs.org/docs/context.html
+ * Error Boundaries - https://reactjs.org/docs/error-boundaries.html
+ * render props - https://reactjs.org/docs/render-props.html
+ * Higher Order Components - https://reactjs.org/docs/higher-order-components.html
+ * React Router - https://reacttraining.com/react-router/core/guides/philosophy
+ * React Hooks - https://reactjs.org/docs/hooks-intro.html
+ * React lazy, memo, and Suspense - https://reactjs.org/blog/2018/10/23/react-v-16-6.html
+ */
+ After changes , the modern React code would like this to replace the above code:
+
+ import React, {Component} from "react"
+
+class App extends Component {
+ // Change to use class properties
+ state = { firstName: "" }
+
+ // Change to use arrow functions
+ handleChange = (event) => {
+ const { name, value } = event.target
+ this.setState({
+ [name]: value
+ })
+ }
+
+ render() {
+ return (
+
+
+
{this.state.firstName}
+
+ )
+ }
+}
+
+export default App
+
+
+
+
+
+**Link to work:*This is my codepen link to my practice session on React Form, very basic and just a practice stuff based on what I am learning on scrimba. Here is the link : https://codepen.io/meeramenon07/pen/YzymZrQ*
+
+
From b8db40ee77045567b0ef68c79a6d2b0e6b8bc2be Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 20 Jun 2020 18:31:50 +0800
Subject: [PATCH 17/68] ## Log 18 ### Day 18: [20th June 2020]
Started React Hooks
---
log.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 46 insertions(+)
diff --git a/log.md b/log.md
index d57164b..d04207d 100644
--- a/log.md
+++ b/log.md
@@ -1426,3 +1426,49 @@ export default App
+
+## Log 18
+
+### Day 18: [20th June 2020]
+
+**Today's Progress: In my scrimba lesson, I learnt introduction to React Hooks and about useState()**
+
+**Thoughts:*React Hooks is pretty easier and more convenient to do than React, by doing away with lots of the conventional coding steps, hehe*
+
+For example, the usual norm of code for React in this simple App using class based App:
+
+class App extends React.Component {
+// constructor() {
+// super()
+// this.state = {
+// answer: "Yes"
+// }
+// }
+
+// render() {
+// return (
+//
+//
Is state important to know? {this.state.answer}
+//
+// )
+// }
+// }
+
+export default App
+
+The above code will be replaced by the following code for React Hooks:
+
+import React, {useState} from "react"
+
+function App() {
+ const [answer] = useState("Yes")
+ return (
+
+
Is state important to know? {answer}
+
+ )
+}
+
+
+
+
From cfed8974e633d11c750bae4c75339269dbbf26cd Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 22 Jun 2020 16:20:35 +0800
Subject: [PATCH 18/68] ## Log 19 ### Day 19: [22nd June 2020]
React Hooks, useState()
---
log.md | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 69 insertions(+)
diff --git a/log.md b/log.md
index d04207d..279bd9f 100644
--- a/log.md
+++ b/log.md
@@ -1472,3 +1472,72 @@ function App() {
+
+## Log 19
+
+### Day 19: [22nd June 2020]
+
+**Today's Progress: In my scrimba lesson, I learnt more about React Hooks and about useState()**
+
+**Thoughts:*React Hooks is pretty easier and more convenient to do than React, by doing away with lots of the conventional coding steps, hehe*
+
+The code here for setting count display on the screen using scrimba:
+
+import React, {useState} from "react"
+
+// Convert the class below to a functional component that uses the useState hook to initalize a count vartiable to 0 and display the count on the screen.
+// Don't worry about the part where the button changes the count quite yet, that's what you're here to learn about!
+
+function App() {
+ const [count, setCount] = useState(0)
+ const [answer, setAnswer] = useState("Yes")
+
+ function increment() {
+ setCount(prevCount => prevCount + 1)
+ }
+
+ function decrement() {
+ setCount(prevCount => prevCount - 1)
+ }
+
+ return (
+
+// )
+// }
+// }
+
+export default App
+
+index.js
+
+import React from "react"
+import ReactDOM from "react-dom"
+
+import App from "./App"
+
+ReactDOM.render(, document.getElementById("root"))
+
+
+
From 768a9b7cf0ad09783006924f46719b86d61a1df5 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 23 Jun 2020 11:51:01 +0800
Subject: [PATCH 19/68] ## Log 20 ### Day 20: [23nd June 2020]
React Hooks useEffect()
---
log.md | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 86 insertions(+)
diff --git a/log.md b/log.md
index 279bd9f..c706df1 100644
--- a/log.md
+++ b/log.md
@@ -1541,3 +1541,89 @@ ReactDOM.render(, document.getElementById("root"))
+
+
+## Log 20
+
+### Day 20: [23nd June 2020]
+
+**Today's Progress: In my scrimba lesson, I learnt more about React Hooks and about useEffect()
+**
+
+**Thoughts:*React Hooks is pretty easier and more convenient to do than React, by doing away with lots of the conventional coding steps, hehe*
+
+
+The code :
+
+import React, {useEffect, useState} from "react"
+
+import randomcolor from "randomcolor"
+
+
+function App(){
+ const [count, setCount] = useState(0)
+ const[color, setColor] = useState("")
+
+ function increment(){
+ setCount(prevCount => prevCount + 1 )
+ }
+
+ function decrement(){
+ setCount(prevCount => prevCount - 1)
+ }
+
+ useEffect(() => {
+ setColor(randomcolor())
+
+ }, [count])
+
+ return(
+
+
{count}
+
+
+
+
+ )
+
+}
+
+index.js
+
+import React from "react"
+import ReactDOM from "react-dom"
+
+import App from "./App"
+
+ReactDOM.render(, document.getElementById("root"))
+
+
+css
+
+div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+h1 {
+ font-size: 3em;
+}
+
+button {
+ border: 1px solid lightgray;
+ background-color: transparent;
+ padding: 10px;
+ border-radius: 4px;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+button:focus {
+ outline:0;
+}
+
+
From 08d869dbbb38d9f30f68a3d531b145514fdaf9cd Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 24 Jun 2020 12:13:17 +0800
Subject: [PATCH 20/68] ## Log 21 ### Day 21: [24th June 2020]
useEffect()
---
log.md | 44 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 44 insertions(+)
diff --git a/log.md b/log.md
index c706df1..7740ad2 100644
--- a/log.md
+++ b/log.md
@@ -1627,3 +1627,47 @@ button:focus {
}
+
+
+
+
+## Log 21
+
+### Day 21: [24th June 2020]
+
+**Today's Progress: In my scrimba lesson, I learnt more about React Hooks and about useEffect()
+**
+
+**Thoughts:*React Hooks is pretty easier and more convenient to do than React, by doing away with lots of the conventional coding steps, hehe*
+
+
+The code :
+
+App.js
+import React, {useState, useEffect} from "react"
+import randomcolor from "randomcolor"
+
+function App() {
+ const [count, setCount] = useState(0)
+ const [color, setColor] = useState("")
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ // setCount(prevCount => prevCount + 1)
+ }, 1000)
+ return () => clearInterval(intervalId)
+ }, [])
+
+ useEffect(() => {
+ setColor(randomcolor())
+ }, [count])
+
+ return (
+
+
{count}
+
+ )
+}
+
+export default App
+
From e503625e402828cc051237ec93b3c692cfdf3890 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 25 Jun 2020 12:11:13 +0800
Subject: [PATCH 21/68] ## Log 22 ### Day 22: [25th June 2020]
---
log.md | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/log.md b/log.md
index 7740ad2..0b6ca29 100644
--- a/log.md
+++ b/log.md
@@ -1671,3 +1671,24 @@ function App() {
export default App
+
+
+## Log 22
+
+### Day 22: [25th June 2020]
+
+**Today's Progress: In my scrimba lesson, I learnt more about React Hooks and Project ideas for practice:
+https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d
+
+https://medium.freecodecamp.org/want-to-build-something-fun-heres-a-list-of-sample-web-app-ideas-b991bce0ed9a
+
+https://medium.freecodecamp.org/summer-is-over-you-should-be-coding-heres-yet-another-list-of-exciting-ideas-to-build-a95d7704d36d
+
+
+**
+
+**Thoughts:*Finally i concluded all the lessons of React in scrimba. Learnt about state, functionand class methods, and props for passing state between parents and child, JSX, and css styling for react apps, making a to do list, making a form in react, conditional rendering in React and introduction to React Hooks. Going to practise some more projects in React from above links of freecodecamp *
+
+
+
+
From 121c4366df6110fd3171dff41db964b2ef10e5bb Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 26 Jun 2020 11:51:40 +0800
Subject: [PATCH 22/68] ## Log 23 ### Day 23: [26th June 2020]
Reading through my Build a Pomodoro Clock project
---
log.md | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 81 insertions(+)
diff --git a/log.md b/log.md
index 0b6ca29..44679ad 100644
--- a/log.md
+++ b/log.md
@@ -1690,5 +1690,86 @@ https://medium.freecodecamp.org/summer-is-over-you-should-be-coding-heres-yet-an
**Thoughts:*Finally i concluded all the lessons of React in scrimba. Learnt about state, functionand class methods, and props for passing state between parents and child, JSX, and css styling for react apps, making a to do list, making a form in react, conditional rendering in React and introduction to React Hooks. Going to practise some more projects in React from above links of freecodecamp *
+## Log 23
+
+### Day 23: [26th June 2020]
+
+**Today's Progress: As: part of my quest to get more expertise with React, I have just started doing the last React project from the Frond end libraries projects in FreeCodeCamp.org certification projects: BUILD A POMODORO CLOCK
+
+THE PROJECT TASK DESCRIPTION IS AS FOLLOWS:-
+
+Front End Libraries Projects - Build a Pomodoro Clock
+Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/XpKrrW.
+
+Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
+
+You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+User Story #1: I can see an element with id="break-label" that contains a string (e.g. "Break Length").
+
+User Story #2: I can see an element with id="session-label" that contains a string (e.g. "Session Length").
+
+User Story #3: I can see two clickable elements with corresponding IDs: id="break-decrement" and id="session-decrement".
+
+User Story #4: I can see two clickable elements with corresponding IDs: id="break-increment" and id="session-increment".
+
+User Story #5: I can see an element with a corresponding id="break-length", which by default (on load) displays a value of 5.
+
+User Story #6: I can see an element with a corresponding id="session-length", which by default displays a value of 25.
+
+User Story #7: I can see an element with a corresponding id="timer-label", that contains a string indicating a session is initialized (e.g. "Session").
+
+User Story #8: I can see an element with corresponding id="time-left". NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
+
+User Story #9: I can see a clickable element with a corresponding id="start_stop".
+
+User Story #10: I can see a clickable element with a corresponding id="reset".
+
+User Story #11: When I click the element with the id of reset, any running timer should be stopped, the value within id="break-length" should return to 5, the value within id="session-length" should return to 25, and the element with id="time-left" should reset to it's default state.
+
+User Story #12: When I click the element with the id of break-decrement, the value within id="break-length" decrements by a value of 1, and I can see the updated value.
+
+User Story #13: When I click the element with the id of break-increment, the value within id="break-length" increments by a value of 1, and I can see the updated value.
+
+User Story #14: When I click the element with the id of session-decrement, the value within id="session-length" decrements by a value of 1, and I can see the updated value.
+
+User Story #15: When I click the element with the id of session-increment, the value within id="session-length" increments by a value of 1, and I can see the updated value.
+
+User Story #16: I should not be able to set a session or break length to <= 0.
+
+User Story #17: I should not be able to set a session or break length to > 60.
+
+User Story #18: When I first click the element with id="start_stop", the timer should begin running from the value currently displayed in id="session-length", even if the value has been incremented or decremented from the original value of 25.
+
+User Story #19: If the timer is running, the element with the id of time-left should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).
+
+User Story #20: If the timer is running and I click the element with id="start_stop", the countdown should pause.
+
+User Story #21: If the timer is paused and I click the element with id="start_stop", the countdown should resume running from the point at which it was paused.
+
+User Story #22: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a break has begun.
+
+User Story #23: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id="break-length" element.
+
+User Story #24: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a session has begun.
+
+User Story #25: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id="session-length" element.
+
+User Story #26: When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id="beep".
+
+User Story #27: The audio element with id="beep" must be 1 second or longer.
+
+User Story #28: The audio element with id of beep must stop playing and be rewound to the beginning when the element with the id of reset is clicked.
+
+You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+
+
+
+
+
+
From 73d483105d687e0441c70e25a3217f1cbc660fda Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 27 Jun 2020 16:52:46 +0800
Subject: [PATCH 23/68] ## Log 24 ### Day 24: [27th June 2020]
Passed 4 tests that I attempted. Remaining of the 25 tests to do in small chunks every day until I pass the whole project!
---
log.md | 40 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 40 insertions(+)
diff --git a/log.md b/log.md
index 44679ad..0ecdea6 100644
--- a/log.md
+++ b/log.md
@@ -1770,6 +1770,46 @@ Once you're done, submit the URL to your working project with all its tests pass
+## Log 24
+
+### Day 24: [27th June 2020]
+
+**Today's Progress: As: part of my quest to get more expertise with React, I have just started doing the last React project from the Frond end libraries projects in FreeCodeCamp.org certification projects: BUILD A POMODORO CLOCK
+I only attempted 4 tasks out of the 29 tasks mentioned above and I passed the first 4 tests! CONGRATULATIONS TO ME :-)
+
+The 4 tasks are :
+
+User Story #1: I can see an element with id="break-label" that contains a string (e.g. "Break Length").
+
+User Story #2: I can see an element with id="session-label" that contains a string (e.g. "Session Length").
+
+User Story #3: I can see two clickable elements with corresponding IDs: id="break-decrement" and id="session-decrement".
+
+User Story #4: I can see two clickable elements with corresponding IDs: id="break-increment" and id="session-increment".
+
+
+The code for the first 4 tests
+for html file:
+
+
+for javascript react file
+function App(){
+ return(
+
+
Break
+
Session Length
+
+
+
+
+
+
+
+ );
+}
+
+
+
From 151f68840c171a0a8f176b0ba5d8a02158a63a69 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 29 Jun 2020 12:11:35 +0800
Subject: [PATCH 24/68] ## Log 25 ### Day 25
[28th June 2020- 29th June 2020]
stuck as hell in this project!!
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index 0ecdea6..deff8df 100644
--- a/log.md
+++ b/log.md
@@ -1813,3 +1813,11 @@ function App(){
+
+
+## Log 25
+
+### Day 25: [28th June 2020- 29th June 2020]
+
+**Today's Progress: As: part of my quest to get more expertise with React, I have just started doing the last front-end project from the Frond end libraries projects in
+fcc and I am badly stuck. Perhaps I should try doing it in jquery instead of React??
From efcce37bcd41bd517231c3961ebf8fd1379036ce Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 30 Jun 2020 21:20:19 +0800
Subject: [PATCH 25/68] ### Day 26: [30th June 2020]
getting started and doing some corrections in my code to begin with and managed to pass four tests
---
log.md | 35 +++++++++++++++++++++++++++++++++++
1 file changed, 35 insertions(+)
diff --git a/log.md b/log.md
index deff8df..887f344 100644
--- a/log.md
+++ b/log.md
@@ -1821,3 +1821,38 @@ function App(){
**Today's Progress: As: part of my quest to get more expertise with React, I have just started doing the last front-end project from the Frond end libraries projects in
fcc and I am badly stuck. Perhaps I should try doing it in jquery instead of React??
+
+
+
+
+
+
+## Log 26
+
+### Day 26: [30th June 2020]
+
+**Today's Progress: I did lots and lots of research and digging into react tutorials and practised some more code in react components and props and now, I could figure out where I went wrong. I managed to pass the first 4 tests again and corrected my app code to start with and here is the starter code
+
+
+function App(){
+ return(
+
+ Break Length
+
Session Length
+
+
+
+
+
+
+
+ )
+}
+
+
+
+
+
+
+
+
From 1d2c4afbc07669cb84b762dac62d1e5f66dddb68 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 2 Jul 2020 16:45:40 +0800
Subject: [PATCH 26/68] ## # Day 27: [2nd June 2020]
stuck again
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index 887f344..6746f62 100644
--- a/log.md
+++ b/log.md
@@ -1852,7 +1852,15 @@ function App(){
+## Log 27
+### Day 27: [2nd June 2020]
+
+I skipped yesterday...oops
+
+I am stuck at one point and still trying to continue with the project...All the best to me ...
+
+Progress: no progress yet
From bf7e802c257c223c760cefb69ec0d206259d8c4e Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 4 Jul 2020 21:03:39 +0800
Subject: [PATCH 27/68] ## Log 28 Day 28
passed 11 tests out of the 29 tests in just 15 minutes.. Now I am on the right track and on my way to finishing the project, hopefully by end of this month
---
log.md | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 84 insertions(+)
diff --git a/log.md b/log.md
index 6746f62..203241c 100644
--- a/log.md
+++ b/log.md
@@ -1864,3 +1864,87 @@ Progress: no progress yet
+
+## Log 28
+
+### Day 28: [4th June 2020]
+
+Today's progress: I could not code for two days as my computer internet was down. But today, I achieved a lot by passing 11 tests out of the total 29 tests for the project, Congratulations to me as I am now on the right track,,,,,
+
+The code in progress
+
+
+function Length(){
+ return(
+
+
+ )
+ }
+
+
+}
+ReactDOM.render(, document.getElementById("root"));
+
+
+
+
+
+
+
+
From 7f2ded20f2c9b0d4cdd3082ee66a3867340c1af8 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 6 Jul 2020 15:25:35 +0800
Subject: [PATCH 28/68] Log 29, day 30
---
log.md | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/log.md b/log.md
index 203241c..7109f75 100644
--- a/log.md
+++ b/log.md
@@ -1946,5 +1946,10 @@ ReactDOM.render(, document.getElementById("root"));
+## Log 29
+
+### Day 30: [6th June 2020]
+
+Today's progress: I could not code for two days as my computer internet was down. But today, I achieved a lot by passing 11 tests out of the total 29 tests for the project, Congratulations to me as I am now on the right track,,,,,Not yet able to pass the other tests yet...
From 8a348cb5ff3f582fa01b1bab7a0c923b613c81c4 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 7 Jul 2020 17:54:27 +0800
Subject: [PATCH 29/68] ## Log 30 ### Day 31: [7th June 2020]
---
log.md | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/log.md b/log.md
index 7109f75..8828a67 100644
--- a/log.md
+++ b/log.md
@@ -1953,3 +1953,17 @@ ReactDOM.render(, document.getElementById("root"));
Today's progress: I could not code for two days as my computer internet was down. But today, I achieved a lot by passing 11 tests out of the total 29 tests for the project, Congratulations to me as I am now on the right track,,,,,Not yet able to pass the other tests yet...
+
+
+
+
+
+## Log 30
+
+### Day 31: [7th June 2020]
+
+Today's progress: I have completed 50% of my pomodoro clock project, should be able to finish it soon ...
+
+
+
+
From 6929258704f5671ed4a9c948333fccff2e2b442a Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 8 Jul 2020 18:40:23 +0800
Subject: [PATCH 30/68] ## Log 31 ### Day 32: [8th June 2020]
almost completed this project
---
log.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/log.md b/log.md
index 8828a67..d4f953c 100644
--- a/log.md
+++ b/log.md
@@ -1967,3 +1967,9 @@ Today's progress: I have completed 50% of my pomodoro clock project, should be a
+## Log 31
+
+### Day 32: [8th June 2020]
+
+Today's progress: I have completed 70% of my pomodoro clock project, should be able to finish it soon ...
+
From 8b8cb773f8cd28f8d76c9d9b003a9e2f364b7fee Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 9 Jul 2020 16:19:29 +0800
Subject: [PATCH 31/68] ## Log 32 ### Day 33: [9th June 2020]
almost finished project, doing the stylesheet
---
log.md | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/log.md b/log.md
index d4f953c..314f225 100644
--- a/log.md
+++ b/log.md
@@ -1973,3 +1973,14 @@ Today's progress: I have completed 50% of my pomodoro clock project, should be a
Today's progress: I have completed 70% of my pomodoro clock project, should be able to finish it soon ...
+
+
+
+
+## Log 32
+
+### Day 33: [9th June 2020]
+
+Today's progress: I have completed my javascript react file and now doing the styling sheet of my pomodoro clock project, should be able to finish it within a day or two!! ...
+
+
From 98a1d960d31a1617ccf21d575288b38b155b7f86 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 10 Jul 2020 19:22:30 +0800
Subject: [PATCH 32/68] ## Log 33 ### Day 34: [10th June 2020]
---
log.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/log.md b/log.md
index 314f225..363273b 100644
--- a/log.md
+++ b/log.md
@@ -1984,3 +1984,15 @@ Today's progress: I have completed 70% of my pomodoro clock project, should be a
Today's progress: I have completed my javascript react file and now doing the styling sheet of my pomodoro clock project, should be able to finish it within a day or two!! ...
+
+
+
+
+
+## Log 33
+
+### Day 34: [10th June 2020]
+
+Today's progress: I have completed my javascript react file and now doing the styling sheet of my pomodoro clock project, should be able to finish it within a day or two!! ...
+
+
From 67cf082b645de899f819521e385063f9335a25ab Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 11 Jul 2020 21:29:22 +0800
Subject: [PATCH 33/68] ### Day 35: [11th June 2020]
finished the project, need to add media queries tomorrow
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index 363273b..5712e0f 100644
--- a/log.md
+++ b/log.md
@@ -1996,3 +1996,11 @@ Today's progress: I have completed my javascript react file and now doing the st
Today's progress: I have completed my javascript react file and now doing the styling sheet of my pomodoro clock project, should be able to finish it within a day or two!! ...
+
+
+
+##Log 14
+### Day 35: [11th June 2020]
+Today's progress: I finished my React app project but not yet made it responsive, will add in the media queries tomorrow.
+For today, I will call it a day...phew!
+
From 15184d3b45f0f3ef4aaed7ad8bb403c310d04b11 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 12 Jul 2020 13:20:05 +0800
Subject: [PATCH 34/68] ##Log 15, ### Day 36: [12th July 2020]
unable to access my file at codepen today due to server issues at codepen site
---
log.md | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/log.md b/log.md
index 5712e0f..df8ff56 100644
--- a/log.md
+++ b/log.md
@@ -2000,7 +2000,15 @@ Today's progress: I have completed my javascript react file and now doing the st
##Log 14
-### Day 35: [11th June 2020]
+### Day 35: [11th July 2020]
Today's progress: I finished my React app project but not yet made it responsive, will add in the media queries tomorrow.
For today, I will call it a day...phew!
+##Log 15
+### Day 36: [12th July 2020]
+sorry for typo mistake earlier, this is july month running and not june...
+Today's progress: I was supposed to add the responsiveness to my project but could not do so as I am unable to open my codepen file today, some error in codepen server apparently, hope, it will be up by tomorrow!!!
+
+
+
+
From 491924270884843e0f4f470e45a9d8f71e214b09 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 13 Jul 2020 16:51:09 +0800
Subject: [PATCH 35/68] ##Log 16 ### Day 37: [13th July 2020]
Pomodoro Clock Project passed finally!
---
log.md | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/log.md b/log.md
index df8ff56..3897196 100644
--- a/log.md
+++ b/log.md
@@ -2012,3 +2012,17 @@ Today's progress: I was supposed to add the responsiveness to my project but cou
+##Log 16
+### Day 37: [13th July 2020]
+
+Today's progress: I finished the project and passed all the tests in the project tasks for making the Pomodoro clock.
+
+Link to my work: https://codepen.io/meeramenon07/pen/zYrzgpp
+
+
+
+
+
+
+
+
From 0b5fab9b83927b2da4401f968826ed062e93767d Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 14 Jul 2020 17:11:28 +0800
Subject: [PATCH 36/68] ##Log 17 ### Day 38: [14th July 2020]
Going to start another project in React
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index 3897196..21ee079 100644
--- a/log.md
+++ b/log.md
@@ -2022,6 +2022,16 @@ Link to my work: https://codepen.io/meeramenon07/pen/zYrzgpp
+##Log 17
+### Day 38: [14th July 2020]
+
+Today's progress: I am planning to do more JavaScript projects and React projects and also revise on lessons from React and JavaScript while doing the challenges. Signed up for one more free lesson in React from Scrimba to make a React project. The project is Build a Movie Search App in React. Just started researching and doing lessons today to get more inspiration for this project!
+
+
+
+
+
+
From f3c924db78be8a570552a0f060e324f509e79f4d Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 16 Jul 2020 18:53:26 +0800
Subject: [PATCH 37/68] ##Log 18 ### Day 39: [15th July 2020 ]
In the making of a movie search app project
---
log.md | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/log.md b/log.md
index 21ee079..cbe1b84 100644
--- a/log.md
+++ b/log.md
@@ -2027,6 +2027,13 @@ Link to my work: https://codepen.io/meeramenon07/pen/zYrzgpp
Today's progress: I am planning to do more JavaScript projects and React projects and also revise on lessons from React and JavaScript while doing the challenges. Signed up for one more free lesson in React from Scrimba to make a React project. The project is Build a Movie Search App in React. Just started researching and doing lessons today to get more inspiration for this project!
+##Log 18
+### Day 39: [15th July 2020-16th July 2020 ]
+
+Today's progress: Signed up with a movie database to get a new API link for creating the movie search app Doing some research and also taking tutorials to get help for this project
+
+
+
From 4ebd6df79cf62f4ad421b4a1badbf5c2e71732fc Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 17 Jul 2020 16:52:01 +0800
Subject: [PATCH 38/68] ## Log 40 ### Day 40 : [16th July -17th July 2020]
search movie app with React
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index cbe1b84..fa0ee92 100644
--- a/log.md
+++ b/log.md
@@ -2035,6 +2035,16 @@ Today's progress: Signed up with a movie database to get a new API link for crea
+## Log 40
+### Day 40 : [16th July -17th July 2020]
+
+Today's progress: I love this Search Movie React app project tutorial. Scrimba tutorial is so practical oriented, just love it. In order to remember and grasp on a long term basis, I always type out my code and also write down my code and this makes it so much easier to understand and also remember. Today, I made the function class for this app.
+Tomorrow, I will continue with it to make the next component for this project.
+
+
+
+
+
From 2c93ecebff1002cc78a58f0c080f03182d592d1b Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 18 Jul 2020 15:29:34 +0800
Subject: [PATCH 39/68] ### Day 41 : [18th July 2020]
React Hooks
---
log.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/log.md b/log.md
index fa0ee92..312dec1 100644
--- a/log.md
+++ b/log.md
@@ -2044,6 +2044,12 @@ Tomorrow, I will continue with it to make the next component for this project.
+## Log 41
+### Day 41 : [18th July 2020]
+
+Today's progress: I learnt React Hooks- How to manage state with useState() and how to add api for search query and also how to catch errors .
+
+Tomorrow, I will continue .
From f00f4759dba0e860c26da5ca6900297d019ed31e Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 19 Jul 2020 17:52:27 +0800
Subject: [PATCH 40/68] ## Log 42 ### Day 42 : [19th July 2020]
---
log.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 75 insertions(+)
diff --git a/log.md b/log.md
index 312dec1..ae974bb 100644
--- a/log.md
+++ b/log.md
@@ -2050,6 +2050,81 @@ Tomorrow, I will continue with it to make the next component for this project.
Today's progress: I learnt React Hooks- How to manage state with useState() and how to add api for search query and also how to catch errors .
Tomorrow, I will continue .
+The code for searchMovies.js
+
+import React, {useState} from "react";
+
+export default function SearchMovies(){
+
+ //states- input query, movies
+ const [query, setQuery] = useState('');
+ //create the state for movies, and update that state appropriate
+ const [movies, setMovies] = useState([]);
+
+ const searchMovies = async (e) => {
+ e.preventDefault();
+
+ const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;
+
+ try {
+ const res = await fetch(url);
+ const data = await res.json();
+ setMovies(data.results);
+ }catch(err){
+ console.error(err);
+ }
+ }
+
+
+
+
+
+ return (
+ <>
+
+
+
+ )
+
+
+}
+
+
+
+
+
+
+## Log 42
+### Day 42 : [19th July 2020]
+
+Today's progress: Leant how to make the movie display information. Will do the styling tomorrow.
From e5af0e56bec3ef8e7bf464d9b0dfd17f239df435 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 20 Jul 2020 20:53:42 +0800
Subject: [PATCH 41/68] ## log 43 ### Day 43 : [20th July 2020]
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index ae974bb..c342644 100644
--- a/log.md
+++ b/log.md
@@ -2128,9 +2128,17 @@ Today's progress: Leant how to make the movie display information. Will do the s
+## log 43
+### Day 43 : [20th July 2020]
+Today's progress- Finished the movie search app tutorial. Tomorrow, I am going to try doing the same app in my codepen file
+
+
+
+
+r
From 7949fa801c63a102737a3a8266d33aae79ba5a23 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 21 Jul 2020 18:15:36 +0800
Subject: [PATCH 42/68] Day 44
I decided to include my coding tutorials as well in the coding days
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index c342644..a008b6d 100644
--- a/log.md
+++ b/log.md
@@ -2137,6 +2137,16 @@ Today's progress- Finished the movie search app tutorial. Tomorrow, I am going t
+## Log 44
+### Day 44: [21st July 2020]
+
+Today's progress: Today, I want to try out the new feature of github profiles and decided to include my tutorial videos as well in my coding challenges, so, here is one of the tutorials that I published on youtube today: This is to teach about lastIndexOf in javascript strings. Here is the link:
+
+
+
+
+
+
From 70949ab6aabfb6064f54d30f812829f6be0c648b Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 23 Jul 2020 22:05:07 +0800
Subject: [PATCH 43/68] Log 45 Day 45
able to understand the search app basis now
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index a008b6d..cfa841f 100644
--- a/log.md
+++ b/log.md
@@ -2145,6 +2145,14 @@ Today's progress: Today, I want to try out the new feature of github profiles an
+## Log 45
+### Day 45: [22nd July 2020]
+
+Today's progress: I realised that I am getting stuck at different points of the project since and so, I decided to research and find out what are the core concepts of making a search app and thanks to a simple explanation in a blog by Gideon Bamuleseyo, I was able to grasp where I went wrong in the first place and now, it is so crystal clear to me. So, today, I just spent fiddling around with some search apps and now, I am ready to do the search app projects in React.
+
+
+
+
From d3312601b06885441dbc19eeb7c774700e13573e Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 24 Jul 2020 19:07:18 +0800
Subject: [PATCH 44/68] Search meal app finished - Day 46
---
log.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/log.md b/log.md
index cfa841f..6bf84da 100644
--- a/log.md
+++ b/log.md
@@ -2153,7 +2153,11 @@ Today's progress: I realised that I am getting stuck at different points of the
+## Log 46
+### Day 46: [23rd July -24th July 2020]
+Today's progress: I skipped yesterday since it was my moms birthday, and had lots of chores to do and no time to sit. Today, I finished my app for meal search , with the help of some googling and blog lessons and here is the link to it on my codepen file
+: [https://codepen.io/meeramenon07/full/GRozbBJ]
From 8a30b4bff7dc00f87cee67c032aa09c0a171baa9 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 25 Jul 2020 17:00:29 +0800
Subject: [PATCH 45/68] ###Day 47
Including my codepen file for search meal app in React
---
log.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/log.md b/log.md
index 6bf84da..475855a 100644
--- a/log.md
+++ b/log.md
@@ -2163,4 +2163,8 @@ Today's progress: I skipped yesterday since it was my moms birthday, and had lot
-r
+## Log 47
+### Day 47:[24th july 2020]
+Today's progress: I am revising my code today,writing down in pen on paper improves my muscle memory and thats what I did today and then, also typed on my computer into my codepen file and here is the pen link .
+`https://codepen.io/meeramenon07/pen/GRozbBJ`
+
From 770f147e0833373f463ef0975ad3e152aab54cc9 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 26 Jul 2020 17:05:12 +0800
Subject: [PATCH 46/68] ### Day 48
Some more research and lessons on React advanced concepts on props and api, before venturing into more projects
---
log.md | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/log.md b/log.md
index 475855a..d010324 100644
--- a/log.md
+++ b/log.md
@@ -2164,7 +2164,13 @@ Today's progress: I skipped yesterday since it was my moms birthday, and had lot
## Log 47
-### Day 47:[24th july 2020]
+### Day 47:[25th july 2020]
Today's progress: I am revising my code today,writing down in pen on paper improves my muscle memory and thats what I did today and then, also typed on my computer into my codepen file and here is the pen link .
`https://codepen.io/meeramenon07/pen/GRozbBJ`
+
+
+## Log 48
+### Day 48: [26th July 2020]
+Today, I am just going to read some more advanced concepts on props, and api for creating more react projects. I found some great concepts on w3 schools . It is so strange that after making some projects in React and going through advanced blogs and tutorials, I was still getting stuck at some point or the other while creating projects but these lessons on w3 schools on React props are so well explained, that I decided to read them for today and tomorrow before diving into more React projects next week.
+
From a3562fc6f1fdc6cc72e97dc2e89c9285a8577b89 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 27 Jul 2020 22:01:53 +0800
Subject: [PATCH 47/68] Day 49
Researching forms in React and writing down some codes to practise
---
log.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/log.md b/log.md
index d010324..cc51a36 100644
--- a/log.md
+++ b/log.md
@@ -2174,3 +2174,9 @@ Today's progress: I am revising my code today,writing down in pen on paper impro
### Day 48: [26th July 2020]
Today, I am just going to read some more advanced concepts on props, and api for creating more react projects. I found some great concepts on w3 schools . It is so strange that after making some projects in React and going through advanced blogs and tutorials, I was still getting stuck at some point or the other while creating projects but these lessons on w3 schools on React props are so well explained, that I decided to read them for today and tomorrow before diving into more React projects next week.
+
+## Log 49
+### Day 49 : [27th July 2020]
+
+Today, I am continuing to research and read up the concepts on react forms and props and I am really getting into react
+
From dd6580d722590ef689e2cd289e1db1f90c4fa18a Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 29 Jul 2020 20:45:38 +0800
Subject: [PATCH 48/68] Day 49
practising my syntaxes for doing advanced react code
---
log.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/log.md b/log.md
index cc51a36..a6f85ea 100644
--- a/log.md
+++ b/log.md
@@ -2180,3 +2180,9 @@ Today, I am just going to read some more advanced concepts on props, and api for
Today, I am continuing to research and read up the concepts on react forms and props and I am really getting into react
+
+## Log 50
+### Day 50 : [29th July 2020]
+
+Today's progress: I am practising to write down each and every code syntaxes in React so that I will not be confused while write code for react projects.
+
From f84a7c8fad38eb26f8c44f30e048b0fa101cfb96 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 30 Jul 2020 18:51:23 +0800
Subject: [PATCH 49/68] updated my github readme
used the new feature of github to update my github profile
---
log.md | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/log.md b/log.md
index a6f85ea..5610c52 100644
--- a/log.md
+++ b/log.md
@@ -2186,3 +2186,12 @@ Today, I am continuing to research and read up the concepts on react forms and p
Today's progress: I am practising to write down each and every code syntaxes in React so that I will not be confused while write code for react projects.
+
+
+## Log 51
+### Day 51: [30th July 2020]
+Todays progress: Today, instead of coding for my projects, I decided to update my github readme profile markdown and my profile really looks nice after using up this new readme profile feature. Thanks to github guys for doing this for us.
+
+Here is my profile after update :
+[github readme profile](https://github.com/meeramenon07)
+
From 18d14778ae6f9bfefd154ea72c4b82cd3d16457c Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 30 Jul 2020 19:03:26 +0800
Subject: [PATCH 50/68] edited the link
---
log.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/log.md b/log.md
index 5610c52..12e8fd2 100644
--- a/log.md
+++ b/log.md
@@ -2195,3 +2195,5 @@ Todays progress: Today, instead of coding for my projects, I decided to update m
Here is my profile after update :
[github readme profile](https://github.com/meeramenon07)
+`https://github.com/meeramenon07`
+
From 63511c61129452466ab8db5ea3f928852fea8b88 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 31 Jul 2020 21:11:01 +0800
Subject: [PATCH 51/68] revising some code rules for my react projects
practising doing codes in react for stateless functions and jsx
---
log.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 53 insertions(+)
diff --git a/log.md b/log.md
index 12e8fd2..54e03f4 100644
--- a/log.md
+++ b/log.md
@@ -2197,3 +2197,56 @@ Here is my profile after update :
`https://github.com/meeramenon07`
+
+
+## Log 52
+### Day 52: [31st July 2020]
+
+Today's progress: I am just going to play around with practise codes for props and components from a nice blog called golang.com I will practise these small snippets for two days after which I am going to start doing some serious projects in React.
+
+One of the code snippets for creating stateful functin in react for addressing user name is as follows
+
+```
+class Message extends React.Component{
+ state ={
+ user: 'Meera Menon'
+ }
+ render(){
+ return(
+
+
+ );
+}
+
+ReactDOM.render(, document.getElementById("root");
+
From b0d35ca63658bc7fc203ccf153bd7193e7eb53b9 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 1 Aug 2020 16:17:04 +0800
Subject: [PATCH 52/68] ### Day 53
Practised more jsx for stateless functions in React
---
log.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 67 insertions(+)
diff --git a/log.md b/log.md
index 54e03f4..e6d3fff 100644
--- a/log.md
+++ b/log.md
@@ -2250,3 +2250,70 @@ function Vehicles(){
ReactDOM.render(, document.getElementById("root");
+```
+
+
+
+
+## Log 53
+### Day 53: [01st August 2020]
+Today's progress: Today, I am continuing with writing down some syntaxes for jsx in React
+The code that I practised writing down as follows for stateless functions in React:
+
+```
+function Vehicles(){
+ const price = 7000;
+ if (price < 7000){
+ return
Car Price: {price + price*0.05}
+ }else{
+ return
Car Price: {price + price*0.15}
+ }
+
+ return(
+
{price}
+ );
+}
+ReactDOM.render(, document.getElementById("root"));
+
+
+
+```
+
+
+Jsx using javascaript mapping to use in stateless function in React:
+
+```
+
+function Automobiles(){
+
+
+ const cars = ["Mercedes", "Fiat", "Toyota", "Ambassador", "Ford"];
+
+ const carList = cars.map( (car) =>
+
{cars}
+
+ );
+
+ return (
{carList}
);
+
+
+
+
+}
+ReactDOM.render(, document.getElementById("root");
+
+
+```
+
+Thought of the day: Practise is perfection
+
+
+Links to the code:
+[codepen]{https://codepen.io/meeramenon07/pen/RwrXLpP}
+
+[codepen]{https://codepen.io/meeramenon07/pen/ExPqwEM}
+
+
+
+
+
From 7c3b7a499076696a3d59482a858a0488258765e2 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 2 Aug 2020 19:48:16 +0800
Subject: [PATCH 53/68] Day 54
Practised child props and parent functions in react
---
log.md | 27 +++++++++++++++++++++++++++
1 file changed, 27 insertions(+)
diff --git a/log.md b/log.md
index e6d3fff..73be237 100644
--- a/log.md
+++ b/log.md
@@ -2317,3 +2317,30 @@ Links to the code:
+## Log 54
+### Day 54: [02nd August 2020]
+
+*Today's progress*: Today I am still continuing with React syntax code practising by keying it down in my codepen files. The following is the relation between parent and child props in stateless react function
+```
+function Parent(){
+ return(
+
+ )
+}
+
+function Child(props){
+ return(
+
+
{props.name}
+
+
{props.english}
+
{props.hindi}
+
+
+ )
+}
+
+ReactDOM.render(, document.getElementById("root"));
+```
+
+
From 08fef306441528b90842a48faf574763630ac3be Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 3 Aug 2020 21:42:12 +0800
Subject: [PATCH 54/68] Day 55- getting deeper into React
---
log.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/log.md b/log.md
index 73be237..9f5ff83 100644
--- a/log.md
+++ b/log.md
@@ -2344,3 +2344,15 @@ ReactDOM.render(, document.getElementById("root"));
```
+
+
+
+## Log 55
+### Day 55: [03rd August 2020]
+
+*Today's progress*: I am watching a video tutorial on the making of a shopping cart in havascript and also React and this will give me the importance of using React over plain vanilla javascript in doing complex projects,
+
+video link:
+[YouTube](https://www.youtube.com/watch?v=LDKnz5gwdz4&feature=youtu.be "JavaScript / React Shopping Cart - Using Vanilla JavaScript and then using React [Project] [2020]
+")
+I will continue watching this long tutorial tomorrow
From 171c155b1e79350f52545a92234159ab34e71886 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 4 Aug 2020 19:13:34 +0800
Subject: [PATCH 55/68] Day 56
practise practise more codes on child components and props
---
log.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 47 insertions(+)
diff --git a/log.md b/log.md
index 9f5ff83..0f62d09 100644
--- a/log.md
+++ b/log.md
@@ -2356,3 +2356,50 @@ video link:
[YouTube](https://www.youtube.com/watch?v=LDKnz5gwdz4&feature=youtu.be "JavaScript / React Shopping Cart - Using Vanilla JavaScript and then using React [Project] [2020]
")
I will continue watching this long tutorial tomorrow
+
+
+
+
+
+## Log 56
+### Day 56 : [04th August 2020]
+
+Today's progress: after watching the tutorials, I am practising some more codes on my codepen
+
+using for loop, checking out parent and child components and passing props
+
+code below
+```
+//parent component
+
+function App(){
+
+ return ;
+
+
+}
+
+//child components
+//USING for loop
+function markList(marks){
+ let arrayItems = [];
+ for(let i = 0; i < marks.length; i++){
+ arrayItems.push(
+ );
+}
+
+ReactDOM.render(, document.getElementById("root"));
+
From f535263451bb4aa54da07f3277060cfd9802f6c6 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 6 Aug 2020 16:28:54 +0800
Subject: [PATCH 58/68] Day 58
finished practising some syntax in React
---
log.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 114 insertions(+)
diff --git a/log.md b/log.md
index a33d1b6..ffd2e53 100644
--- a/log.md
+++ b/log.md
@@ -2461,3 +2461,117 @@ function Student(props){
ReactDOM.render(, document.getElementById("root"));
+```
+
+
+
+
+
+
+## Log 58
+### Day 58 : [06th August 2020]
+
+*Today's progress:
+
+practised following :
+
+Using React -using function props
+
+```
+var names = ["John", "Alice", "Mark"];
+function userName(name) {
+
+ names = names.filter(item => item !== name)
+
+}
+//The function defined as userName, uses the JavaScript method to remove the item from array. The userName function is provided to the Student component as the value for a prop named userCallback. The onClick expression is a fat arrow function that calls the function prop when it is invoked.
+
+//parent component
+
+function App() {
+ return (
+
+
+ );
+}
+
+//child component- second level child
+//The {...props} expression passes on all of the props received from the parent component.
+
+
+function Marks(props){
+ return(
+
+
+
PHYSICS: {props.physics}
+
CHEMISTRY: {props.chemistry}
+
BIOLOGY: {props.biology}
+
+
+
+
+ )
+}
+
+
+ReactDOM.render(, document.getElementById("root"));
+
+```
+
+
+Thoughts of the day: ready to start my projects from tomorrow onwards, wish me luck in this React journey
+
+
+
From 6cdc31858d209c45f6c369aaf1e879632b2089c6 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 8 Aug 2020 16:08:45 +0800
Subject: [PATCH 59/68] Day 59
revising my regex in javascript
---
log.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/log.md b/log.md
index ffd2e53..de6df2d 100644
--- a/log.md
+++ b/log.md
@@ -2575,3 +2575,15 @@ Thoughts of the day: ready to start my projects from tomorrow onwards, wish me l
+
+
+
+
+
+
+## Log 59
+### Day 59 : [08th August 2020]
+Skipped for two days as I was brushing up on my regex skills
+
+I revised regex - match method, and extracting an array with repeated words, I also revised the flags i and g where i is for ignoring ases and g is for extracting repeated words
+I will give it a couple of days more to finish this revision before moving on to my react projects building. ooops ....it is not just moving ahead...
From f15e373bba50893992b489ed5a3996bbee932c54 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sun, 9 Aug 2020 20:38:21 +0800
Subject: [PATCH 60/68] Day 60
regex matching letters and numbers
---
log.md | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/log.md b/log.md
index de6df2d..7a6defe 100644
--- a/log.md
+++ b/log.md
@@ -2587,3 +2587,16 @@ Skipped for two days as I was brushing up on my regex skills
I revised regex - match method, and extracting an array with repeated words, I also revised the flags i and g where i is for ignoring ases and g is for extracting repeated words
I will give it a couple of days more to finish this revision before moving on to my react projects building. ooops ....it is not just moving ahead...
+
+
+
+
+
+
+## Log 60
+### Day 60 : [09th August 2020]
+
+Today's progress : Continuing with my regex revision, learnt how to match letters, letters and number ranges, and also how to excluse a number and letter ranges.
+After finishing all the regex revision lessons, I am going to document all the lessons and codes of regex on one log so that it is easier for me to retrieve later whenever I need them again.
+
+
From a53d9253ef98963997553098054f19d80510a760 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 12 Aug 2020 17:12:26 +0800
Subject: [PATCH 61/68] day61
revising my regex
---
log.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/log.md b/log.md
index 7a6defe..bf898f0 100644
--- a/log.md
+++ b/log.md
@@ -2600,3 +2600,11 @@ Today's progress : Continuing with my regex revision, learnt how to match letter
After finishing all the regex revision lessons, I am going to document all the lessons and codes of regex on one log so that it is easier for me to retrieve later whenever I need them again.
+## Log 61
+### Day 61 :[12th August 2020]
+
+Today's progress: Continuing with my regex journey. Learnt how to match numbers, non numbers, greedy, lazy ranges, and many more, there are still eight more topics to cover again for revision in regex and I should be able to finish in two days time after which I will log my regex journey in another repo or this repo, I am not yet sure as of now. I also want to revise my es6 but not sure if I should do that first or straight away proceed to react projects
+
+Thoughts of the day = It is a very steep climb to reach my react journey peak, hehehe
+
+
From abfa796a33334a951da0b0202747907500a09516 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 13 Aug 2020 16:55:31 +0800
Subject: [PATCH 62/68] Day 62
revision on regex on the use of quantifiers and look arounds
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index bf898f0..7568f2e 100644
--- a/log.md
+++ b/log.md
@@ -2608,3 +2608,13 @@ Today's progress: Continuing with my regex journey. Learnt how to match numbers,
Thoughts of the day = It is a very steep climb to reach my react journey peak, hehehe
+
+
+
+
+
+
+#Log62
+### Day 62: [13th August 2020]
+
+Todays progress: Continuing with my Regex revision classes- revised on various types of quantifiers and Look arounds.
From 7444a303c94ec3df456059bccb88568b3ebf6911 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Mon, 17 Aug 2020 19:30:30 +0800
Subject: [PATCH 63/68] Day 63
finished my regex tutorials and planning to start my react
---
log.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/log.md b/log.md
index 7568f2e..f62d98b 100644
--- a/log.md
+++ b/log.md
@@ -2618,3 +2618,9 @@ Thoughts of the day = It is a very steep climb to reach my react journey peak, h
### Day 62: [13th August 2020]
Todays progress: Continuing with my Regex revision classes- revised on various types of quantifiers and Look arounds.
+
+
+
+#Log 63 ###Day 63 : [Date:17th August 2020]
+I took a three day break to learn and revise regex to do better in react finally finished my regex lessons today
+Today's progress: Going to plan a project in react by tomorrow
From 37862e136c9de35376faedee6cd8b2c61e65f9ea Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Tue, 18 Aug 2020 21:06:05 +0800
Subject: [PATCH 64/68] Day 64
start re-learning my ES6 codes
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index f62d98b..f507dc9 100644
--- a/log.md
+++ b/log.md
@@ -2624,3 +2624,13 @@ Todays progress: Continuing with my Regex revision classes- revised on various t
#Log 63 ###Day 63 : [Date:17th August 2020]
I took a three day break to learn and revise regex to do better in react finally finished my regex lessons today
Today's progress: Going to plan a project in react by tomorrow
+
+
+
+
+
+
+#Log 64 ###Day 64 : [Date:18th August 2020]
+
+Today, I started doing revision of my code for ES6, modern javascript since it is most important and vital for doing code in React projects, I should be able to finish my revision in ES6 in a week's time after which it will be much more easier for me to think in react
+
From fe7eab24a26f956ee50a52540adb5f021f950e69 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Wed, 19 Aug 2020 17:48:35 +0800
Subject: [PATCH 65/68] Day 65
-writing arrow functions for anonymous functions
-writing arrow functions for functions with parameters
-writing arrow functions for higher order functions
---
log.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 67 insertions(+)
diff --git a/log.md b/log.md
index f507dc9..a6dc723 100644
--- a/log.md
+++ b/log.md
@@ -2634,3 +2634,70 @@ Today's progress: Going to plan a project in react by tomorrow
Today, I started doing revision of my code for ES6, modern javascript since it is most important and vital for doing code in React projects, I should be able to finish my revision in ES6 in a week's time after which it will be much more easier for me to think in react
+
+
+
+
+
+
+
+#Log 65 ###Day 65 : [Date:19th August 2020]
+
+Today's progress: My es6 class begins
+Topic 1
+Write arrow functions with parameters:
+var myConcat = function(arr1,arr2){
+ return arr1.concat(arr2);
+}
+
+changing the above function to an arrow function will look like this:
+
+var myConcat = (arr1, arr2) => arr1.concat(arr2);
+better practice to write const in place of var :
+const myConcat = (arr1,arr2) => arr1.concat(arr2);
+console.log(myConcat (([1.2],[3,4,5]));
+//[1,2,3,4,5]
+
+
+TOPIC 2: WRITING HIGHER ORDER ARROW FUNCTIONS
+
+const realNumberArray = [4,5.6, -9.8, 3.14, 42, 6, 8.34, -2];
+
+const squareList = (arr) => {
+ const squaredIntegers = arr;
+ return squaredIntegers;
+};
+const squaredIntegers = squareList(realNumberArray);
+console.log(squaredIntegers);
+
+after doing arrow function, it will look like this - while getting the result after filter and map of the numbers provided:
+
+const squareList = (arr) => {
+ const squaredIntegers = arr.filter(num => Number.isInteger(num) && num > 0).map( x => x * x);
+};
+
+const squaredIntegers = squareList(realNumberArray);
+console.log(squaredIntegers);
+
+
+
+
+Topic 3 : use arrow functions to write concise anonymous functions
+var magic = function() {
+ return new Date();
+};
+
+
+after doing arrow function
+
+const magic = () => newDate();
+
+
+
+
+
+
+
+
+
+
From 2907c71002cdb21f42c0a03ef606b8d70a8f08f0 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Thu, 20 Aug 2020 11:51:07 +0800
Subject: [PATCH 66/68] Day 66
-set default parameters for your functions
-use the rest operator with function parameters
---
log.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 57 insertions(+)
diff --git a/log.md b/log.md
index a6dc723..2b24e5f 100644
--- a/log.md
+++ b/log.md
@@ -2698,6 +2698,63 @@ const magic = () => newDate();
+#Log 66 ###Day 66 : [Date:20th August 2020]s
+
+##Today's topics:
+
+-set default parameters for your functions
+-use the rest operator with function parameters
+
+
+Topic: set default parameters for your functions
+const increment= (function() {
+ return function increment(number,value=1
+){
+ return number + value;
+
+
+};
+
+
+
+
+})();
+
+console.log(increment(5,2)); //7
+
+console.log(increment(5));//6
+
+
+
+Topic:use the rest operator with function parameters
+
+const sum = (function(){
+ return functin sum(x,y,z){
+ const args = [x,y,z];
+ return args.reduce( (a,b) => a + b, 0);
+
+
+ };
+
+})();
+console.log(sum(1,2,3));
+
+after using the rest operator, this looks like the following function
+
+
+const sum = function(){
+ return function sum(...args){
+ return args.reduce((a,b) => a+b, 0);
+ };
+
+})();
+console.log(sum(1,2,3,4));
+now it is possible to check for more than three values in the console .log after using the rest operator.
+
+
+
+
+
From 3ff6a1affeacd69a224284217f4f449496d200cb Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Fri, 21 Aug 2020 12:12:47 +0800
Subject: [PATCH 67/68] Day 67
using spread operator in es6
---
log.md | 25 +++++++++++++++++++++++++
1 file changed, 25 insertions(+)
diff --git a/log.md b/log.md
index 2b24e5f..fd2d70c 100644
--- a/log.md
+++ b/log.md
@@ -2758,3 +2758,28 @@ now it is possible to check for more than three values in the console .log after
+
+#Log 67 ###Day 67 : [Date:21st August 2020]s
+Today's topic- Spread operator es6
+
+const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
+let arr2;
+(function() {
+ arr2 = arr1; // change this line
+ arr1[0] = 'potato'
+})();
+console.log(arr2);
+
+//will show potato as the first element in the resultant array
+
+After using the spread operator:
+
+const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
+let arr2;
+(function() {
+ arr2 = [...arr1]; // change this line
+ arr1[0] = 'potato'
+})();
+console.log(arr2);
+//["JAN", "FEB", "MAR", "APR", "MAY"]
+
From 129a06dcc6b549e0bf7535ad7e001f837d5f4532 Mon Sep 17 00:00:00 2001
From: Meera Menon <46912602+meeramenon07@users.noreply.github.com>
Date: Sat, 29 Aug 2020 16:29:45 +0800
Subject: [PATCH 68/68] Day 68
Started doing on building a quiz app using react hooks
---
log.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/log.md b/log.md
index fd2d70c..050595e 100644
--- a/log.md
+++ b/log.md
@@ -2783,3 +2783,13 @@ let arr2;
console.log(arr2);
//["JAN", "FEB", "MAR", "APR", "MAY"]
+
+
+
+
+
+
+#Log 68 ###Day 68 : [Date:29th August 2020]s
+
+I have started doing projects in React hooks
+The first one is creating a quiz app in react hooks and I am working on it , hope to complete it within this week
+ 
+