Skip to content

Commit

Permalink
Merge pull request #9 from damyo-scientists/#3_display_on_site
Browse files Browse the repository at this point in the history
치킨 가격 , 국밥가격 페이지에 표시, 확인버튼은 필요가 없어져서 리셋버튼으로 바꿨습니다.
  • Loading branch information
Redrock912 authored Nov 6, 2019
2 parents 3ae8e96 + 0f5050a commit 097b92d
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 34 deletions.
10 changes: 7 additions & 3 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,19 @@ body {
text-align: center;
margin: 0;
padding: 0;

font-weight: normal;
margin-top: 20em;
background-image: url("http://www.powerkoream.co.kr/news/photo/201412/1102039_1308_2456.jpg");
background-repeat: no-repeat;
background-size: 100%;
}

h2 {
h2,
h3 {
font-size: 30px;
font-weight: normal;
color: rgb(187, 187, 255);
-webkit-text-stroke: 1px black;
}

.vignette {
Expand Down Expand Up @@ -50,7 +54,7 @@ label {

input[type="text"] {
width: 20%;
font-size: 50px;
font-size: 40px;
color: white;
border: 1px solid #ccc;
box-sizing: border-box;
Expand Down
26 changes: 20 additions & 6 deletions src/components/Description.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject('userInput')
@inject("userInput")
@observer
class Description extends Component {
constructor(props) {
Expand All @@ -10,9 +10,23 @@ class Description extends Component {
}

render() {
const {userInput} = this.props;
return (<div><h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>
<h3>당신이 알고싶은 국밥가 : {userInput.price}</h3></div>);
const { userInput } = this.props;
let gookbab = userInput.price / 5000;
let chicken = userInput.price / 16000;
return (
<div>
<h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>
<h3>당신이 알고싶은 국밥가 : {gookbab}</h3>
<h3>
고것은{" "}
<font size="40" color="yellow">
{" "}
{chicken}{" "}
</font>{" "}
치킨이구연{" "}
</h3>
</div>
);
}
}

Expand Down
49 changes: 24 additions & 25 deletions src/components/PriceForm.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {userInput} from "../store";
import {inject, observer} from "mobx-react/dist/mobx-react";
import React, {Component} from "react";
import { userInput } from "../store";
import { inject, observer } from "mobx-react/dist/mobx-react";
import React, { Component } from "react";

@inject('userInput')
@inject("userInput")
@observer
class PriceForm extends Component {
constructor(props) {
Expand All @@ -13,36 +13,35 @@ class PriceForm extends Component {
}

handleChange(event) {
const {userInput} = this.props;
const { userInput } = this.props;
userInput.setPrice(event.target.value);
}

handleSubmit(event) {
const {userInput} = this.props;
let gookbabCount = parseInt(userInput.price, 10);

const converted = gookbabCount / 5000;
alert("고것은 " + converted + " 국밥이네요.");
const { userInput } = this.props;
userInput.price = "";

event.preventDefault();
}

render() {
const {userInput} = this.props;
return (<div>
<form onSubmit={this.handleSubmit}>
<label>
가격:
<input
type="text"
value={userInput.price}
onChange={this.handleChange}
/>
</label>
<input type="submit" className="btnClass" value="확인"/>
</form>
</div>)
const { userInput } = this.props;
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
가격:
<input
type="text"
value={userInput.price}
onChange={this.handleChange}
/>
</label>
<input type="submit" className="btnClass" value="리셋" />
</form>
</div>
);
}
}

export default PriceForm;
export default PriceForm;
5 changes: 5 additions & 0 deletions src/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"compilerOptions": {
"experimentalDecorators": true
}
}

0 comments on commit 097b92d

Please sign in to comment.