Skip to content

Instantly share code, notes, and snippets.

@sounisi5011
Last active March 19, 2018 23:35
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save sounisi5011/e682cabfd4d7dad803da506db86606de to your computer and use it in GitHub Desktop.
入力した文字を括弧で囲むだけのクソアプリ(Hyperapp版)
<!doctype html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>入力した文字を括弧で囲むだけのクソアプリ - Hyperapp版</title>
<link rel=stylesheet href="main.css">
<h1>入力した文字を括弧で囲むだけのクソアプリ - Hyperapp版</h1>
<main id=main></main>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es5&amp;flags=always,gated" crossorigin=anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperapp/1.2.0/hyperapp.js" integrity="sha256-nGvSTSqpX5gJdp7Jv5+4FCU1IbclUByINJqDQIbfwNc=" crossorigin=anonymous></script>
<script src="main.js"></script>
body {
text-align: center;
}
#main input {
font-size: 1em;
}
#main input[type=button] {
margin-left: .5em;
}
var h = hyperapp.h;
var app = hyperapp.app;
/**
* 文字列を括弧で囲む関数
* 空文字列の場合は、空文字列を返す
* @param {string} text 括弧で囲む文字列
* @return {string} 括弧で囲まれた文字列。または、空文字列
*/
function wrapBracket(text) {
var newText = '';
if (text !== '') {
newText = '「' + text + '」';
}
return newText;
}
var state = {
inputText: '',
outputText: ''
};
var actions = {
updateValue: function(value) {
/*
* 入力値を取得
*/
return { inputText: value };
},
wrapBracket: function() {
return function(state) {
var inputText = state.inputText;
/*
* 入力値を括弧で囲む
*/
var outputText = wrapBracket(inputText);
/*
* 表示
*/
return { outputText: outputText };
};
}
};
var view = function(state, actions) {
return h('div', {}, [
h('input', {
type: 'text',
placeholder: '文字を打って!!!',
onchange: function(e) {
actions.updateValue(e.target.value);
}
}),
h('input', {
type: 'button',
value: '括弧で囲む',
onclick: actions.wrapBracket
}),
h('p', {}, state.outputText)
]);
};
app(state, actions, view, document.getElementById('main'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment