WBDSGNR - Real Life Implement: August 2018

Tuesday, 28 August 2018

hide component in angular 4

hide component in angular 4

<app-header *ngIf="1==2"> </app-header>

Sunday, 26 August 2018

Javascript : Click Event Example

<div style="background-color:#D94A38;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center;" onclick="clickMeEvent(this)">Click Me</div>

<script type="application/javascript">
function clickMeEvent(obj) {
  if (obj.innerHTML == "Click Me") {
    obj.innerHTML = "Click Me<br>Click Me Again";
    return;
  }
  if (obj.innerHTML == "Click Me<br>Click Me Again") {
    obj.innerHTML = "Thank You";  
    return; 
  }
  if (obj.innerHTML == "Thank You") {
  obj.innerHTML = "Goodbye";  
    return; 
  }
  if (obj.innerHTML == "Goodbye") {
    obj.style.display = "none";
    return;
  }
}
</script>

Friday, 3 August 2018

IF ELSE statement boleh dikatakan penting untuk membuat keputusan dalam programming..
react tidak mempunyai shortcut seperti mana framework yang lain ia menggunakan skill javascript yang ori cuma dengan gaya react

1. if else

if (coinToss() === 'heads') {
  img = (
    <img src={pics.kitty} />
  );
} else {
  img = ( 
    <img src={pics.doggy} />
  );
}

..

if coinToss = heads
img = img pics.kitty,
else
img = img pics.doggy

import React from 'react';
import ReactDOM from 'react-dom';

function coinToss() {
  // This function will randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
  doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};
let img;

// if/else statement begins here:
if (coinToss() === 'heads') {
  img = (
    <img src={pics.kitty} />
  );
} else {
  img = ( 
    <img src={pics.doggy} />
  );
}

ReactDOM.render(img, document.getElementById('app'));

..

2. Or using ternary Operator

1	const img = <img src={ pics[coinToss() === 'heads' ? 'kitty' : 'doggy'] } />;

..

scenario : if coinToss = head it should display kitty else its doggy

HOW TO WRITE OR ITS STRUCTURE?

import React from 'react';
import ReactDOM from 'react-dom';

function coinToss () {
  // Randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
  doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};

const img = <img src={ pics[coinToss() === 'heads' ? 'kitty' : 'doggy'] } />;

ReactDOM.render(
 img, 
 document.getElementById('app')
);

..

2. USING && CONDITION

import React from 'react';
import ReactDOM from 'react-dom';




// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental &&<li> Nacho Cheez Straight Out The Jar</li>}
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
 favoriteFoods, 
 document.getElementById('app')
);

Thursday, 2 August 2018

Javascript : Create function

Function ibarat menulis resepi atau rukun. Contoh, senaraikan rukun iman?

rukunIman
percaya kepada Allah,
percaya kepada Rasul,
percaya kepada Malaikat,
percaya kepada Al-kitab,
percaya kepada hari akhirat,
percaya kepada qada dan qadar,

Bila ditulis dalam kaedah javascript ia akan menjadi seperti ini

function rukunIman(){
  percaya kepada Allah;
  percaya kepada Rasul;
  percaya kepada Malaikat;
  percaya kepada Al-kitab;
  percaya kepada hari akhirat;
  percaya kepada qada dan qadar;
}

..

Atau function lebih kepada buat seketul sandwich

function makeSandwich(){
 Get one slice of bread;
 Add turkey;
 Put a slice of bread on top;
}

..

Macam mana kalau nak buat option add turkey kepada benda atau isi lain?

..

function makeSandwich(filling){
 Get one slice of bread;
 Add filling;
 Put a slice of bread on top;
}

makeSandwich('burger')

..
ibaratnya, pelanggan datang dan mintak sandwich isi burger, jadi kita beri option kepada pelanggan untuk pilih isi apa.. refer filling

Function memberi peranan atau jawatan kepada sesuatu

function sayHiTo(peserta){
  console.log('hai', peserta);
}

sayHiTo ('muhaza')

..
Secara automatik muhaza akan diberi jawatan peserta atau peserta itu bernama muhaza

Revision : Javascript element

1. VARIABLE

Untuk simpan data dalam istilah javascript, kita guna variable atau var. Var perlu diberi nama..

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

..
dalam kes ini variable diberi nama todos

2. VIEW DATA / VARIABLE

selepas data disimpan dengan sebarang nama, (declare by a name) ia boleh diseru keluar atau dipapar kembali ke browser dengan menggunakan prompt..

alert(todos) @ console.log(todos)

..

3. ADD NEW VALUE INTO VARIABLE

Dah set value dalam variable, boleh tambah value dengan kaedah .push

todos.push('new todo')

..

4. CHANGE VALUE INSIDE VARIABLE

Value sedia ada masih boleh diubah dengan pilih dan ganti

todos[0] = 'changed!'

..

5. DELETE VARIABLE VALUE

Value sedia ada boleh dipilih dan dipadam dengan kaedah splice

todos.splice(0,1)

React : Create Attribute

Dengan React kita boleh buat/bina attribute yang pelbagai

const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
}; 

const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);

const owl = (
  <img 
    src={pics.owl} 
    alt="Unimpressed Owl" />
);

const owlCat = (
  <img 
    src={pics.owlCat} 
    alt="Ghastly Abomination" />
);

..

contoh diatas adalah attribute untuk pics yang memiliki value name dan value.

React : How to render DOM to browser

Cara 1: Direct render html pada ReactDOM

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(<h1>Render me!</h1>,
document.getElementById('app'));

..

Langkah diatas render tanpa menggunakan variable. Render me! akan di-render dalam id pada index.html.

Cara 2 : Dengan menggunakan variable

import React from 'react';
import ReactDOM from 'react-dom';

let renderMe = <h1> Render me! </h1>;
// Write code here:
ReactDOM.render(renderMe,
document.getElementById('app'));

..

Langkah diatas render menggunakan variable renderMe akan menghasilkan Render me! pada browser tetapi dengan memanggil variable.

Cara 3 : Render variable dalam ReactDOM guna misai {}

import React from 'react';
import ReactDOM from 'react-dom';

const theBestString = 'tralalalala i am da best';

ReactDOM.render(<h1>{theBestString}</h1>, document.getElementById('app'));

..
Boleh panggil variable dengan guna misai

Wednesday, 1 August 2018

React : Result to 'sometime' kadang-kadang

Guna react untuk dapatkan kebarangkalian option akan keluar. ambil contoh macam menu..
Kadang-kadang hari ni ada ais krim, kadang-kadang takde..

import React from 'react';
import ReactDOM from 'react-dom';

// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
 favoriteFoods, 
 document.getElementById('app')
);

{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }


..akan keluar kadang-kadang dengan kebarangkalian keluar sebanyak 0.5 atau  50%





My Favorite Foods

Sushi Burrito
Rhubarb Pie
Broiled Grapefruit








{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..tak keluar.







My Favorite Foods

Sushi Burrito
Rhubarb Pie
Nacho Cheez Straight Out The Jar
Broiled Grapefruit






{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..keluar.









Result keluar seperti ini kerana adanya variable 


// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

WBDSGNR - Real Life Implement