Skip to content

Instantly share code, notes, and snippets.

@HuanxinHu

HuanxinHu/index.html

Created April 23, 2018 06:18
Show Gist options
  • Save HuanxinHu/36bfc44258532dd1dad43d53c1367f7d to your computer and use it in GitHub Desktop.
Save HuanxinHu/36bfc44258532dd1dad43d53c1367f7d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xewojaxite
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.heart, .diamond {
color: red;
}
.club, .spade {
color: black
}
.heart {
font-size: 22px;
}
.diamond, .spade {
font-size: 28px;
}
.club {
font-size: 16px;
}
.card {
height: 200px;
width: 150px;
border: 1px solid;
position: relative;
}
.suit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div style="margin-bottom: 12px">
<span class="heart">❤</span>
<span class="diamond">♦</span>
<span class="club">♣️</span>
<span class="spade">♠</span>
</div>
<div id="app"></div>
<script id="jsbin-javascript">
const suitsMap = {
'heart': '❤',
'diamond': '♦',
'club': '♣️',
'spade': '♠'
};
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
class CardsGame extends React.Component {
constructor(props) {
super(props);
const cards = this.generateCards();
this.state = { cards };
}
generateCards() {
const cards = [];
const keys = Object.keys(suitsMap);
for(let i=0; i< keys.length; i++){
for(let j=0; j<values.length; j++){
const card = {
suit: keys[i],
suitValue: suitsMap[keys[i]],
cardValue: values[j]
}
cards.push(card);
}
}
return cards;
}
render() {
const { cards } = this.state;
return (
React.createElement("div", null,
cards.map((card, index) => {
return React.createElement(Card, {card: card, key: index})
})
)
)
}
}
class Card extends React.Component {
render() {
const {suit, suitValue, cardValue} = this.props.card;
return (
React.createElement("div", {className: "card"},
React.createElement("span", null, cardValue),
React.createElement("span", {className: `${suit} suit`}, suitValue)
)
)
}
}
ReactDOM.render(React.createElement(CardsGame, null), document.querySelector("#app"))
</script>
<script id="jsbin-source-css" type="text/css">.heart, .diamond {
color: red;
}
.club, .spade {
color: black
}
.heart {
font-size: 22px;
}
.diamond, .spade {
font-size: 28px;
}
.club {
font-size: 16px;
}
.card {
height: 200px;
width: 150px;
border: 1px solid;
position: relative;
}
.suit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const suitsMap = {
'heart': '❤',
'diamond': '♦',
'club': '♣️',
'spade': '♠'
};
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
class CardsGame extends React.Component {
constructor(props) {
super(props);
const cards = this.generateCards();
this.state = { cards };
}
generateCards() {
const cards = [];
const keys = Object.keys(suitsMap);
for(let i=0; i< keys.length; i++){
for(let j=0; j<values.length; j++){
const card = {
suit: keys[i],
suitValue: suitsMap[keys[i]],
cardValue: values[j]
}
cards.push(card);
}
}
return cards;
}
render() {
const { cards } = this.state;
return (
<div>
{cards.map((card, index) => {
return <Card card={card} key={index} />
})}
</div>
)
}
}
class Card extends React.Component {
render() {
const {suit, suitValue, cardValue} = this.props.card;
return (
<div className="card">
<span>{cardValue}</span>
<span className={`${suit} suit`}>{suitValue}</span>
</div>
)
}
}
ReactDOM.render(<CardsGame />, document.querySelector("#app"))</script></body>
</html>
Raw
jsbin.xewojaxite.css
.heart, .diamond {
color: red;
}
.club, .spade {
color: black
}
.heart {
font-size: 22px;
}
.diamond, .spade {
font-size: 28px;
}
.club {
font-size: 16px;
}
.card {
height: 200px;
width: 150px;
border: 1px solid;
position: relative;
}
.suit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Raw
jsbin.xewojaxite.js
const suitsMap = {
'heart': '❤',
'diamond': '♦',
'club': '♣️',
'spade': '♠'
};
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
class CardsGame extends React.Component {
constructor(props) {
super(props);
const cards = this.generateCards();
this.state = { cards };
}
generateCards() {
const cards = [];
const keys = Object.keys(suitsMap);
for(let i=0; i< keys.length; i++){
for(let j=0; j<values.length; j++){
const card = {
suit: keys[i],
suitValue: suitsMap[keys[i]],
cardValue: values[j]
}
cards.push(card);
}
}
return cards;
}
render() {
const { cards } = this.state;
return (
React.createElement("div", null,
cards.map((card, index) => {
return React.createElement(Card, {card: card, key: index})
})
)
)
}
}
class Card extends React.Component {
render() {
const {suit, suitValue, cardValue} = this.props.card;
return (
React.createElement("div", {className: "card"},
React.createElement("span", null, cardValue),
React.createElement("span", {className: `${suit} suit`}, suitValue)
)
)
}
}
ReactDOM.render(React.createElement(CardsGame, null), document.querySelector("#app"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment