ハートメッセージ

それらのバレンタインのキャンディ会話心を覚えています?このプロジェクトのために、私はそれらをバニラJavaScriptとCSSを使って再現しています.なぜ、私はそれを行うにはアイデアがあった原因.

心臓を引く
心に書くなら、まず心を築く必要がある.これはいくつかの基本的な形、正方形と2つの円で作られています.CSSサークルを作るために、正方形を作り、それに50 %の境界半径を与える.
あなたが個々の形を見ることができるように、私は境界を加えました.

一度図形が使用されるtransform: rotate(45deg)ポイントをまっすぐにダウンするので、心臓を回すために.私は背景から心を際立たせるためにドロップシャドウを追加しました.


ジャバスクリプト
次に、メッセージのリストが必要です.プロジェクトに使用されるメッセージの一部です.私は、彼らに若干のスペースを保存するためにすべてをリストしませんでした.

var messages = [
    "Will you be my variable? ",
    "Be the Fizz to my buzz! ",
    "This ♥",
    "Stickers!",
    "if ( (you + date) < 2) {  </br>   call (me) } ",
    "You\”: \“My heart\" ",
    "I will always write tests",
    "git commit -m \":heart:\" ",
    "01101000 01100101 01100001 <br> 01110010 01110100"
]

次に、リストからランダムなメッセージをプルして、Bigheartの上にある心臓ID DIV(CSS Heart)にそれを置く機能が必要です.

function sweetHeartMsg() {
    var randomNumber = Math.floor(Math.random() * (messages.length));
    document.getElementById('heart').innerHTML = messages[randomNumber];
    heart.style.display = "block";  
}

この関数はボタンをクリックして起動します.

    <div class="login-screen" >
        <h1>"Hello World"</h1>
        Click the button for .random(♥) candy heart message.
                <input type="submit" value="Dev Hearts." class="btn btn-primary btn-large btn-block" id="submit" onclick="sweetHeartMsg();">
    </div>

それは心にメッセージを置きます.


包む
私がバージョン2を作るならば、これは良い運動でした.そして、私はユーザーが心臓に表示するために彼ら自身のメッセージを入力するのを許します.私はまた、メッセージの提案を支援するためのVirtualCoffeeで私の友人、メグとジュリアに感謝したいと思います.
this postに触発される心臓形