imparvez

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [],
      textvalue : ""
    }
    this.handleAddTodoItem = this.handleAddTodoItem.bind(this)

imparvez

    <div class="container">
        <div class="wrapper">
            <h1 class="header" id="header">This is Header</h1>
            <a href="#" id="anchor" class="anchor-link">CLICK ME</a>
            <p>lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel lorempixel
                lorempixel lorempixel lorempixel lorempixel lorempixel
                lorempixel lorempixel lorempixel lorempixel lorempixel
            </p>
            <a href="#" id="anchor" class="anchor-link">CLICK ME</a>
            <h1 class="header" id="header">This is Header</h1>

imparvez

// V1 Arrays
// It should have a place to store todos
// It should have a way to display todos
// It should have a way to add new todos
// It should have a way to change a todos
// It should have a way to delete a todos

/*********************************************/

// 1. It should have a place to store todos

imparvez

// V2 Function
// It should have a function to display todos
// It should have a function to add new todos
// It should have a function to change a todos
// It should have a function to delete a todos

var todos = ['item 1', 'item 2', 'item 3'];

// 1. It should have a function to display todos
function displayTodos(){ // Declare a function

imparvez

// V3 Objects
// It should store the todos arrays on an object
// It should have a display todos method
// It should have an addTodo method
// It should have a changeTodo method
// It should have a deleteTodo method

var todoList = {
  todos: ['item 1', 'item 2', 'item 3'], // 1. It should store the todos arrays on an object
  displayTodos: function(){

imparvez

// V4 Boolean.
// todoList.addTodo should add object.
// todoList.changeTodo should change the todoText property.
// todoList.toggleCompleted should change the completed property.

var todoList = {
  todos: [], // 1. It should store the todos arrays on an object
  displayTodos: function(){
    console.log('My Todos: ', this.todos)
  },

imparvez

// V5 The For Loop.
// .displayTodos should show .todoText
// .displayTodos should tell you if .todos is empty
// .displayTodos should show .completed

var todoList = {
  todos: [], 
  displayTodos: function(){
    if(this.todos.length === 0) { // Chp no: 2 .displayTodos should tell you if .todos is empty

imparvez

// Different ways to loop or iterate arrays in JavaScript
var newArray = ['item 1', 'item 2', 'item 3', 'item 4'];

// Way no: 1
for(var i = 0; i < newArray.length; i++) {
  console.log('Array Item', newArray[i]);
}

// Way no: 2
for(var i in newArray) {

imparvez

// Different ways to loop or iterate objects in JavaScript
var newObjects = {
  'p1': 'item 1',
  'p2': 'item 2',
  'p3': 'item 3',
}

// Way no: 1
for(var key in newObjects) {
  if(newObjects.hasOwnProperty(key)) {

imparvez

//  V6 Thinking in CODE.
// .toggleAll: if everything's true, make everything false.
// .toggleAll: Otherwise, make everything true.

var todoList = {
  todos: [], 
  displayTodos: function(){
    if(this.todos.length === 0) { // Chp no: 2 .displayTodos should tell you if .todos is empty
      console.log('Your todo list is EMPTY');