Created
May 5, 2019 12:50
-
-
Save ababup1192/528ba858d1945f818a627d84a227fd9d to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <input id="name" type="text" placeholder="Name"> | |
| <input id="password" type="password" placeholder="Password"> | |
| <input id="passwordAgain" type="password" placeholder="Re-enter Password"> | |
| <div id="result" style="color: green;">OK</div> | |
| <script> | |
| const passwordInput = document.getElementById("password"); | |
| const passwordAgainInput = document.getElementById("passwordAgain"); | |
| const resultText = document.getElementById("result"); | |
| const checkPassword = () => { | |
| const password = passwordInput.value; | |
| const passwordAgain = passwordAgainInput.value; | |
| if (password === passwordAgain) { | |
| resultText.style = 'color: green;'; | |
| resultText.innerHTML = 'OK'; | |
| } else { | |
| resultText.style = 'color: red;'; | |
| resultText.innerHTML = 'Passwords do not match!'; | |
| } | |
| }; | |
| passwordInput.addEventListener('input', (e) => { | |
| checkPassword(); | |
| }); | |
| passwordAgainInput.addEventListener('input', (e) => { | |
| checkPassword(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| port module Main exposing (Model, Msg(..), init, main, update, view, viewValidation) | |
| import Browser | |
| import Browser.Navigation as Nav | |
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| -- --------------------------- | |
| -- MODEL | |
| -- --------------------------- | |
| type alias Model = | |
| { name : String | |
| , password : String | |
| , passwordAgain : String | |
| } | |
| init : () -> ( Model, Cmd Msg ) | |
| init _ = | |
| ( Model "" "" "", Cmd.none ) | |
| -- --------------------------- | |
| -- UPDATE | |
| -- --------------------------- | |
| type Msg | |
| = Name String | |
| | Password String | |
| | PasswordAgain String | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Name name -> | |
| ( { model | name = name }, Cmd.none ) | |
| Password password -> | |
| ( { model | password = password }, Cmd.none ) | |
| PasswordAgain password -> | |
| ( { model | passwordAgain = password }, Cmd.none ) | |
| -- --------------------------- | |
| -- VIEW | |
| -- --------------------------- | |
| view : Model -> Html Msg | |
| view { name, password, passwordAgain } = | |
| div [] | |
| [ input [ type_ "text", placeholder "Name", value name, onInput Name ] [] | |
| , input [ type_ "password", placeholder "Password", value password, onInput Password ] [] | |
| , input [ type_ "password", placeholder "Re-enter Password", value passwordAgain, onInput PasswordAgain ] [] | |
| , viewValidation password passwordAgain | |
| ] | |
| viewValidation : String -> String -> Html msg | |
| viewValidation password passwordAgain = | |
| if password == passwordAgain then | |
| div [ style "color" "green" ] [ text "OK" ] | |
| else | |
| div [ style "color" "red" ] [ text "Passwords do not match!" ] | |
| -- --------------------------- | |
| -- MAIN | |
| -- --------------------------- | |
| main : Program () Model Msg | |
| main = | |
| Browser.document | |
| { init = init | |
| , update = update | |
| , view = | |
| \m -> | |
| { title = "フォーム" | |
| , body = [ view m ] | |
| } | |
| , subscriptions = \_ -> Sub.none | |
| } |
This file contains hidden or 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
| module Tests exposing (viewTest) | |
| import Expect exposing (Expectation) | |
| import Fuzz exposing (Fuzzer, int, list, string) | |
| import Main exposing (..) | |
| import Test exposing (..) | |
| import Test.Html.Query as Query | |
| import Test.Html.Selector exposing (style, text) | |
| viewTest : Test | |
| viewTest = | |
| describe "viewのテスト" <| | |
| [ describe "passwordとpasswordAgainが一致しているとき" | |
| [ test "緑色でOKと表示される。" <| | |
| \() -> | |
| Query.fromHtml (viewValidation "pass" "pass") | |
| |> Query.has [ style "color" "green", text "OK" ] | |
| ] | |
| , describe "passwordとpasswordAgainが一致していないとき" | |
| [ test "赤色でPassword do not match!と表示される。" <| | |
| \() -> | |
| Query.fromHtml (viewValidation "pass1" "pass2") | |
| |> Query.has [ style "color" "red", text "Passwords do not match!" ] | |
| ] | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment