この問題がわかりません

ボックスに西暦年を入力し、[確認]をクリックすると、「〇〇大学が開校されてから xx 年です」と出力するページを作成せよ。「xx」は入力された西暦年に応じて変化する。〇〇大学は 1882 年に開講されたため、それ以前の西暦年、つまり 1881 以下の数字が入力された場合は「〇〇大学の開校前です」と出力すること。

この問題の<script>の部分がわかりません。

kei344

2016/12/30 08:57

わからないなりに、ご自身で書かれたコードを質問文に追記されたほうが回答を得られやすいと思います。

yuba

2017/01/02 09:22

1882年っていうと早稲田ですか。

行動規範の内容に同意します

回答2件

答えだけが欲しいのならどうぞ。内容の質問は受け付けません。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>大学</title>
7</head>
8<body>
9  <div id="root"></div>
10  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
12  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
13  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.1/react-redux.min.js"></script>
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.0/babel.min.js"></script>
15  <script type="text/babel">
16    const CHECK_YEAR = 'CHECK_YEAR';
17    const OPEN_SCHOOL = 'OPEN_SCHOOL';
18    const initialState = {year: null, openedYear: 0, schoolName: null};
19    const store = Redux.createStore((state = initialState, action) => {
20      switch (action.type) {
21      case CHECK_YEAR:
22        return Object.assign({}, state, action.payload);
23      case OPEN_SCHOOL:
24        return Object.assign({}, state, action.payload);
25      default:
26        return state;
27      }
28    });
29    store.subscribe(() => console.log(store.getState()));
30    store.dispatch({type: OPEN_SCHOOL, payload: {openedYear: 1882, schoolName: '○○大学'}});
31    const CheckYearComponent = ({schoolName, yearAfterOpening, opened, showText, onCheckClick}) => {
32      let input;
33      return (
34        <div>
35          <form onSubmit={e => {
36            e.preventDefault();
37            if (!input.value.trim()) {
38              return;
39            }
40            onCheckClick(Number(input.value));
41          }}>
42            <input type="number" ref={node => {input = node}}/>
43            <button type="submit">
44              確認
45            </button>
46          </form>
47          <p>
48            {showText ? (opened ? `${schoolName}が開校されてから${yearAfterOpening}年です。`
49                                : `${schoolName}の開校前です。`)
50                      : ""}
51          </p>
52        </div>
53      )
54    };
55    const CheckYear = ReactRedux.connect(
56      state => ({
57        schoolName: state.schoolName,
58        yearAfterOpening: state.year - state.openedYear,
59        opened: state.year >= state.openedYear,
60        showText: state.year != null
61      }),
62      dispatch => ({
63        onCheckClick: (year) => dispatch({type: CHECK_YEAR, payload: {year}})
64      })
65    )(CheckYearComponent);
66    const App = () => (
67      <div>
68        <CheckYear />
69      </div>
70    );
71    ReactDOM.render(
72      <ReactRedux.Provider store={store}>
73        <App />
74      </ReactRedux.Provider>,
75      document.getElementById('root')
76    );
77  </script>
78</body>
79</html>