understanding promise and async function using example

working link->https://stackblitz.com/edit/js-it5ura?file=index.js

//passing value to a promise using arrow function

let numberSlover=(x)=>new Promise((resolve, reject)=>{

if(typeof x=="number")

{

resolve("Pass")

}else

{

reject("Fail")

}

})

numberSlover(22).then((data)=>

{

console.log(data);

},(data)=>{

console.log(data);

}

)

//now even better than above using async function which return a promise

async function add(op,one,two)

{

let result;

if(op==="+")

{

result=one+two;

}else if(op==="/")

{

result=one/two;

}else if(op==="*")

{

result=one*two;

}else if(op==="-")

{

result=Math.max(one,two)-Math.min(one,two);

}

return result;

}

add("+",100,200).then(

(data)=>{

console.log(data);

}

)

add("-",100,9200).then(

(data)=>{

console.log(data);

}

)

Passing parameter to a promise using arrow function

//passing value to a promise using arrow function

let numberSlover=(x)=>new Promise((resolve, reject)=>{

if(typeof x=="number")

{

resolve("Pass")

}else

{

reject("Fail")

}

})

numberSlover(22).then((data)=>

{

console.log(data);

},(data)=>{

console.log(data);

}

)

type aliases implementing your own type in typescript

 type aliases or our your own type is one of the most important part of typescript see how you can implement type aliases in typescript using type .

link->https://stackblitz.com/edit/typescript-7barjt

//creating your own type or type alias in typescript is very easy for example

//direction type what only allowed dirction values

export type Direction="north"|"south"|"east"|"west";

//strArray allowed only string and array where array is number of boolean type

export type strArray=string|Array<number|boolean>;

//an interfacce type---------

export type userdd=userDD;

interface userDD

{

userDirection:Direction

username:string

}

class human

{

private direction:Direction;

private myarray:strArray;

private newuser:userdd;

constructor()

{

/*

myarray is string and array type where Array is number or boolean

type so any other value in myarray not allowed

*/

//not allowed

//this.myarray=["manish"]

//allowrd

this.myarray=[true,false];

//newuser is userDD type so both below value allowed because

username is string type and userDirection is direction type

this.newuser={

username:"manish",

userDirection:"east"

}

}

public setDirection(_direction:Direction)

{

this.direction=_direction;

}

public getDirection()

{

return this.direction;

}

public moveMe()

{

switch(this.direction)

{

case "north":

console.log("move north")

break;

case "south":

console.log("move south")

break;

case "east":

console.log("move east")

break;

case "west":

console.log("move west")

break;

}

}

}

//check your type

var h=new human();

h.setDirection("north")//move human to north direction

h.moveMe();

how to create a very simple calculator using reactjs and typescript

https://stackblitz.com/edit/react-ts-pxyzyh  calculator  is not completed is a just a basic idea how to can create a simple calculator in reactjs

changing style of a div in reactjs picking a random color from a array

changing style of a div in reactjs picking a random color from a array
running code->https://stackblitz.com/edit/react-62igcp
code:->

import React, { Component } from 'react';

import { render } from 'react-dom';

import './style.css';

class App extends Component {

constructor() {

super();

this.state = {

color: 'blue'

};

}

getRandomColor()

{

var colorArray=[

"blue","red","grreen","pink","yellow","orange","DodgerBlue","Tomato"

];

var index=Math.round(Math.random()*(colorArray.length-1));

const newColor= colorArray[index];

this.setState({color:newColor});

}

render() {

return (

<div style={{background: this.state.color}}>

<div ></div>

<div>click on button to change background color</div>

<span><button onClick={()=>{

this.getRandomColor();

}}>Click on button to change color</button></span>

</div>

);

}

}

render(<App />, document.getElementById('root'));

Loading data form external api automatically and using some event such as on a button click in reactjs

beginner level- just creating a simple example how to load data from a external api using typescript and reactjs.

running code: link https://stackblitz.com/edit/react-ts-ek3vme

code:-

//calling data from external api

//calling data on event

import React, { Component } from 'react';

import { render } from 'react-dom';

import './style.css';

interface AppProps {

}

//user data interface

interface userData

{

key:string;

body:string;

title:string;

userId:number;

id:number;

}//urldata interface

interface urlData

{

origin:string;

url:string;

}

//app state interface

interface AppState {

name: string;

data:urlData

userdata:Array<userData>;

}

//app code

class App extends Component< AppProps,AppState> {

listName:string="click on button to load list"

load:Function=null;

constructor(props) {

super(props);

this.state = {

name: "loading.....",

data:{

origin:null,

url:null,

},

userdata:new Array<userData>()

};

}

//componentDidMount called immediately after component rendered first time

componentDidMount() {

fetch("https://httpbin.org/get")

.then(res => res.json())

.then(

(result) => {

var data:urlData={

origin:null,

url:null

};

data.origin=result.origin;

data.url=result.url;

this.setState({

name: "auto load data from rest api",

data:data

});

},

(error) => {

console.log(error);

}

)

}

//load data from external url

loadData(url:string)

{

fetch(url)

.then(res => res.json())

.then(

(result) => {

result.map((object, i)=>{

var mydata:userData=

{

key:object.id,

body:object.body,

title:object.title,

userId:object.userId,

id:object.id

}

this.state.userdata.push(mydata);

}

)

this.setState({

name: "load data on button click",

userdata:this.state.userdata

});

},

(error) => {

}

)

}

render() {

return (

<div>

<p>{this.state.name}</p>

<p>{this.state.data.url}</p>

<p>{this.state.data.origin}</p>

<button onClick={this.load=()=>{

//pass api url

this.loadData("https://jsonplaceholder.typicode.com/posts");

}}>Load data from external sources</button>

<p>{this.listName}</p>

<ul>

{this.state.userdata.map(data => (

<li key={data.key}>

<b>Heading:=> {data.title}</b><br></br>

<b>all Data:=></b>{data.body}

</li>

))}

</ul>

</div>

);

}

}

render(<App />, document.getElementById('root'));

creating a Memory game in swift full code available at github

A memory game using swift in ios which saves score based on top ranked player's source code available at below link

https://github.com/manishchauhan/Memory-Game-