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-

binary search using typescript

interface node {

index: number;

value: any;

}

class Search {

public data: Array<any> = new Array();

constructor() { };

}

//notBinary Search needs shorted data while LinearSearch works on unshorted datae:

class BinarySearch extends Search {

private startIndex: number;

private endIndex: number;

constructor(_data: Array<any>) {

super();

this.data = _data;

}

public search(_value) {

this.startIndex = 0;

this.endIndex = (this.data.length - 1)

while (this.startIndex <= this.endIndex) {

let mid = Math.round(this.startIndex + (this.endIndex - this.startIndex) / 2)

if (this.data[mid] === _value) {

return { index: mid, value: this.data[mid] };

}

(this.data[mid] < _value) ? this.startIndex = (mid + 1) : this.endIndex = (mid - 1);

}

return { index: -1, value: "no value" };;

}

}

var binarySearch = new BinarySearch([1, 2, 3, 4, 5, 6, 17, 18]);

console.log(binarySearch.search(18).index)

Linear search in typescript ( Data structure)

A simple linear search using typescript.....

//create a node object (interface) which hold's index and any type of data

interface node {

index: number;

value: any;

}

//base class which hold's array of nodes inside data array

class Search {

public data: Array<any> = new Array();

constructor() { };

}

//extend Search class

class LinearSearch extends Search {

constructor(_data: Array<any>) {

super();

this.data = _data;

}

public search(_value) {

for (var i = 0; i < this.data.length; i++) {

if (this.data[i] === _value) {

return { index: i, value: this.data[i] };

}

}

}

}

var linearSearch = new LinearSearch([4, 5, 11, 23, 12]);

//get search index

console.log(linearSearch.search(23).index);