Skip to content

Instantly share code, notes, and snippets.

@harlyon

harlyon/Hide Show

Last active July 28, 2020 17:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harlyon/226916255c34f323913db6350541e5bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harlyon/226916255c34f323913db6350541e5bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Hide Show
state = {
show: false,
}
showParagraph = () => {
const {show} = this.state
this.setState({show: !show})
}
render() {
const {show} = this.state
return (
<React.Fragment>
<a onClick={this.showParagraph} href="#">Want to buy a new car?</a>
{show &&
(<p>Call +11 22 33 44 now!</p>)
}
</React.Fragment>
);
}
coderbyte
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
const Toggle = () => {
const [on, setOn] = useState(true);
return (
<button onClick={() => setOn(!on)}>{ on ? 'ON' : 'OFF' }</button>
);
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
coderbyte tictactoe
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props) {
const className = 'square' + (props.highlight ? ' highlight' : '');
return (
<button
className={className}
onClick={props.onClick}>
{props.value}
</button>
);
}
class Board extends React.Component {
renderSquare(i) {
const winLine = this.props.winLine;
return (
<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
highlight={winLine && winLine.includes(i)}
/>
);
}
render() {
// Use two loops to make the squares
const boardSize = 3;
let squares = [];
for (let i = 0; i < boardSize; ++i) {
let row = [];
for (let j = 0; j < boardSize; ++j) {
row.push(this.renderSquare(i * boardSize + j));
}
squares.push(<div key={i} className="board-row">{row}</div>);
}
return (
<div>{squares}</div>
);
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null)
}
],
stepNumber: 0,
xIsNext: true,
isAscending: true
};
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares).winner || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
history: history.concat([
{
squares: squares,
// Store the index of the latest moved square
latestMoveSquare: i
}
]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}
handleSortToggle() {
this.setState({
isAscending: !this.state.isAscending
});
}
render() {
const history = this.state.history;
const stepNumber = this.state.stepNumber;
const current = history[stepNumber];
const winInfo = calculateWinner(current.squares);
const winner = winInfo.winner;
let moves = history.map((step, move) => {
const latestMoveSquare = step.latestMoveSquare;
const col = 1 + latestMoveSquare % 3;
const row = 1 + Math.floor(latestMoveSquare / 3);
const desc = move ?
`Go to move #${move} (${col}, ${row})` :
'Go to game start';
return (
<li key={move}>
{/* Bold the currently selected item */ }
<button
className={move === stepNumber ? 'move-list-item-selected' : ''}
onClick={() => this.jumpTo(move)}>{desc}
</button>
</li>
);
});
let status;
if (winner) {
status = "Winner: " + winner;
} else {
if (winInfo.isDraw) {
status = "Draw";
} else {
status = "Next player: " + (this.state.xIsNext ? "X" : "O");
}
}
const isAscending = this.state.isAscending;
if (!isAscending) {
moves.reverse();
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={i => this.handleClick(i)}
winLine={winInfo.line}
/>
</div>
<div className="game-info">
<div>{status}</div>
<button onClick={() => this.handleSortToggle()}>
{isAscending ? 'descending' : 'ascending'}
</button>
<ol>{moves}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(<Game />, document.getElementById("root"));
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return {
winner: squares[a],
line: lines[i],
isDraw: false,
};
}
}
let isDraw = true;
for (let i = 0; i < squares.length; i++) {
if (squares[i] === null) {
isDraw = false;
break;
}
}
return {
winner: null,
line: null,
isDraw: isDraw,
};
}
coderbyte react counter
import React, { Component } from 'react';
import {Button} from './Button';
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 1
}
}
handleCount(value) {
this.setState((prevState) => ({ count: prevState.count + value }));
}
render() {
return (
<div>
Current count: {this.state.count}
<hr />
<Button sign="+" count={this.state.count} updateCount={this.handleCount.bind(this)} />
<Button sign="-" count={this.state.count} updateCount={this.handleCount.bind(this)} />
</div>
);
}
}
export default App;
coder byte phone book
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(){
super();
this.state={
name:"",
number:"",
phoneBook:[
{name: "Abc", number: "+7898378532"},
{name: "Xyz", number: "+9399452757"}
],
showForm:false
}
this.handleInputChange1=(event)=>{
this.setState({
name:event.target.value
})
}
this.handleInputChange2=(event)=>{
this.setState({
number:event.target.value
})
}
this.addContact=()=>{
const newContact={
name:this.state.name,
number:this.state.number
}
if(this.state.name==="" || this.state.number==="")
{
alert('Both fields are required.');
return;
}
this.setState( (prevState)=>({
phoneBook:prevState.phoneBook.concat(newContact),
name:"",
number:""
}))
}
this.toggleShowForm=()=>{
this.setState(
{ showForm: !this.state.showForm}
)
}
}
render() {
let form=null;
if(this.state.showForm)
{
form=
(
<div className="container">
<form className="form">
<div class="form-group">
<input type="text" className="form-control" onChange={this.handleInputChange1} value={this.state.name} placeHolder="Name" />
</div>
<div class="form-group">
<input type="text" className="form-control" onChange={this.handleInputChange2} value={this.state.number} placeHolder="Number"/>
</div>
<button type="button" className="btn btn-primary" onClick={this.addContact}>Add</button>
</form>
</div>
)
}
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-4">
<div className="App">
<h2 className="header">PhoneBook</h2>
<span style={{cursor:"pointer",color:"blue",textDecoration:"underline"}} onClick={this.toggleShowForm}>Create New Contact</span>
{form}
{this.state.phoneBook.map(contact =>
<div className="contacts">
<h5>{contact.name}</h5>
<p>{contact.number}</p>
<hr/>
</div>
)}
</div>
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
export default App;
MaxSum Arrray
function maxSubarray(array) {
if (!array instanceof Array || array.length === 0) {
return 0;
}
let maxSum = 0, currentSum = 0;
array.forEach(value => {
currentSum = Math.max(0, currentSum + value);
maxSum = Math.max(maxSum, currentSum);
});
return maxSum;
}
module.exports = {
maxSubarray
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment