はじめに
Elmが0.19から0.19.1になって、以下のリンク先のElmプログラムが全滅してしまいました。
moduleの命名法が間違っているって。なるほど。
作り直しますのでしばらくお待ち下さい。
Learn Elm 0.19 through ellie-app.com and problems
簡単な課題をElmで解いて、Ellieに載せていくという方法でElmの勉強をする、というアイデアです。
Ellieはsaveすると、urlができるので問題と解答のセットをはてなに書いておけばいつでも見ることができます。
やってみよう。
ハローワールドを表示する
Write a program to print "Hello world" without using Elm Architecture. Solution is here => https://ellie-app.com/5PbTQXnR23wa1
Browser.sandboxを使ってハローワールドを表示する
Write a program ot print "Hello world" using Elm Architecure. Solution => https://ellie-app.com/5Pxh2BFHDMca1
フォントサイズを指定する
How to change the font size => https://ellie-app.com/5PT2rD3dwjma1
1から100000の間のランダムな数字を表示する
Show a random number between 1 and 100000. => https://ellie-app.com/5PCxLNQcgxDa1
ランダムな数字を作成して素数かどうか判断する
Generate a random number and see if it is a prime => https://ellie-app.com/6MggWMZNFw5a1
名前を入力するとハロー++名前 !!! で答える
Write a program to answer by Hello , yurname!!! => https://ellie-app.com/5PJvSjxtkJPa1
ハローワールドのバックに色をつける。文字をh1にする。中央揃えにする
Put background-color, h1 size, font-color, text-align to center , etc. => https://ellie-app.com/5PKBH2dX79va1
文章を書く。たとえば、今日はいい天気です。を10回続けて書く
Write a paragraph where texts are wrapped. => https://ellie-app.com/5PLxYvHWhJFa1
上下左右センタリング
Draw a blue box , text skyblue, centering X, Y => https://ellie-app.com/5PSNpNngPYna1
数当てゲーム
Simple number guessing game => https://ellie-app.com/5YMYFRVGGTZa1
しりとりゲーム
Shiritori , a Japanese word game => https://ellie-app.com/6MDXpy62q29a1
SVGのサンプル。rectとcircle
SVG sample, rect and circle => https://ellie-app.com/5PTPhjhTKHNa1
SVGのサンプル。polygonやpathなど
SVG shapes rect, circle, ellipse, polygon, line, polyline, polygon => https://ellie-app.com/5RRbrHYHC4Xa1
SVG viewBoxの使い方
Understanding SVG viewBox and positioning => https://ellie-app.com/5Q74fMkFV8ra1
SVG fill, stroke, strokeWidthなどの使い方
How to use fill, stroke, strokeWidth, etc => https://ellie-app.com/5Q9sMv77RV8a1
SVG text_, textAnchorの使い方
How to use text_, textAnchor => https://ellie-app.com/5QFR4ZDQtCra1
SVG ベジエ曲線の描き方
How to draw bezier lines =>
https://ellie-app.com/5Twh3LSdD2Ga1
https://ellie-app.com/5TwhNGHXVSWa1
https://ellie-app.com/5TwjxkPVHnza1
SVG 弧の描き方
How to draw arcs =>
https://ellie-app.com/5Twp2Pw5T4ta1
https://ellie-app.com/5TwptpJ9N4Ca1
https://ellie-app.com/5TwpRZ27hypa1
SVG fillとstrokeの使い方
SVG fill and stroke => https://ellie-app.com/5Tw3W3Wb5zFa1
SVG stroke-linecap, butt, square, roundの使い方
SVG stroke-linecap, butt, square and round => https://ellie-app.com/5Tw6R7XsmS5a1
SVG stroke-linejoin, miter, round, bevelの使い方
SVG stroke-linejoin , miter, round and bevel => https://ellie-app.com/5Tw9yvcqRWca1
SVG stroke-dasharray(点線)の使い方
How to use stroke-dasharray for dotted line => https://ellie-app.com/5TzcKnRcf6Sa1
SVG style attributeの使い方
How to use style attrobite => https://ellie-app.com/5TCnpnWNvhFa1
SVG linearGradientの使い方
How to use Linear Gradient => https://ellie-app.com/5TMTXFYx9wwa1
SVG radialGradientの使い方
How to use Radial Gradient =>
https://ellie-app.com/5Z6p82PsZJ9a1
https://ellie-app.com/623ngzqtV6ba1
https://ellie-app.com/623pctB58xTa1
SVG patternの使い方
How to use Pattern =>
https://ellie-app.com/623PT2J8Vyfa1
https://ellie-app.com/625KNHSs3hLa1
https://ellie-app.com/625LtxZmsq3a1
SVG textの使い方
How to use text =>
https://ellie-app.com/625VH9CyYBva1
https://ellie-app.com/628fRrSYMZca1
SVG transform, translate, rotateの使い方
How to use transform，translate, rotate =>
https://ellie-app.com/62hTXwYJM6fa1
https://ellie-app.com/62nwQn4wcgDa1
SVG clipPathの使い方
How to use clipPath => https://ellie-app.com/63qL6TPZCpFa1
SVG maskの使い方
How to use mask => https://ellie-app.com/63qJSgLmgtxa1
サイコロを一度に2個振る(svg画像つき)
Two Dice at a time with svg => https://ellie-app.com/63BmX88rS5Fa1
SVG styleの使い方
How to use style =>
https://ellie-app.com/63GH2kHVnZCa1
https://ellie-app.com/63GJbXfrrxba1
SVG アイコンの大きさを変える
How to scale, resize svg icon => https://ellie-app.com/6cDD8ZkFJNqa1
四則演算をする
Arithmetic Operators => https://ellie-app.com/647NBR7YSW9a1
関数を作って使ってみる
Make a function and use it => https://ellie-app.com/648Ddz7fPCQa1
カウンタープログラム リセットボタン付き
counter program with addtional reset button => https://ellie-app.com/64JDgZZnDgNa1
文字列を逆順にする
Reverse the contents of a text field => https://ellie-app.com/64LCGXVP5jWa1
formを使って名前とパスワードチェック
form to validate name and password => https://ellie-app.com/64N9csz2R6ka1
直角三角形の斜辺の長さを求める
Calculate the hypotenuse of a triangle => https://ellie-app.com/64NKb35nPmwa1
単位変換 摂氏、華氏、インチ、メートル
Convert Fahrenheit, Celsius, inches, meter. Solution to elm guide exercise => https://ellie-app.com/657KBFDSFrsa1
Result typeの使い方
How to use Result type => https://ellie-app.com/65r8bCvNGzxa1
SPA スケルトンを作ってうまく行ったのですが、ellie-app.com上では動かない
I made a SPA Single Page Application skeleton. It won't work on ellie-app.com
but it worked on local server and github.io => https://kalz2q.github.io/elm-examples/index.html
Source file is https://github.com/kalz2q/elm-examples/src/spa003.elm
Ellieでflagの実験 javascriptからelmにデータを送る
send data to elm from html through flag => https://ellie-app.com/6th9S6qYJqFa1
send data and time to elm through flag => https://ellie-app.com/6tncDw6HBNya1
Ellieでportの実験 elmからjavascriptにデータを送る
very very simple example of port => https://ellie-app.com/6sTFfkTbbXKa1
LocalStorageを使ったTodo
Todo application using LocalStorage with Remove buttons => https://ellie-app.com/6vGQCyLhkP6a1
Firestore(Firebase)を使ったTodo
Todo application using Firestore(Firebase) , flags and ports => https://ellie-app.com/6D8hKZwjy5ja1
マス目を作るカウンター
Kind of n x n board maker => https://ellie-app.com/6LMsMM6HKD3a1
ClickMeおもちゃ
Toy to click => https://ellie-app.com/6LQd3wQbzK8a1
MouseHoverおもちゃ
Toy to simulate mouse hover => https://ellie-app.com/6LWgD5x8p9Za1
素数判定機
Enter a number and see if it's a prime number or not => https://ellie-app.com/6M9JWSz3MRza1
箱を並べる
色付き聖杯
ボタンを押すたびに文章が長くなるボタンを作る
文章の中に他のサイトに飛ぶhrefを入れる
一度に10個のランダムな数字を得る
Get 10 random numbers at once
