Ellieで入るElm入門

はじめに

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

デジタル時計

カウントダウン

三択クイズ

おみくじ

4clojure problems

99 lisp problems

zen problems