Last active
March 19, 2018 23:35
Star
You must be signed in to star a gist
入力した文字を括弧で囲むだけのクソアプリ(Hyperapp版)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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&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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
text-align: center; | |
} | |
#main input { | |
font-size: 1em; | |
} | |
#main input[type=button] { | |
margin-left: .5em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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