プログラミングを始めるうえでの心構え

勉強しよう！と身構えない

スポーツや料理をするときに、勉強から始めますか？という話。
とにかくやってみる。

失敗して成長が止まったら勉強してみる。

それの繰り返し。

プログラミングも、1+1を表示する　→　何も見ないで出来る
関数を設定して　関数 + 1　を表示する　→　出来る
画像を引き延ばす　→　怪しい

とにかくやってみようという話。

自分がどこまで出来て何が出来ないのか一歩ずつやっていこう。

それが明確化が出来ない、苦手、道しるべがない　

という人がスクールに行って最短距離で一歩ずつ進んでいく、というものだと思う。

詰まる部分は人それぞれだし、どこに疑問を持つかも人それぞれだから、ただカリキュラムをやるってだけでもなくて、

そこに詰まったらどうすればいいのか、ここはまだ早いのか、別の考え方をしてみたらいいのか。

そういうことを教えてくれる先駆者、メンター、先生がいると、悩む時間少なく成長できるよっていうことだと思う。

ね。

昨日学んだJSのコード

CSS

.rotation{
    margin: auto;
    width: 500px;
    height: 500px;
   background-color: #fff;
    transition: transform 0.5s;
}

.rotation.is-active{
    transform:rotate(45deg);
}
#spread{
    position:absolute;
    top: 0;
    width: 100%;
    height: 100%;
   background-color: #fff;
}

JS

$(".rotation").click(function(){
    if($(this).hasClass('is-active')){
        $(this).removeClass('is-active');

    }else{
        $(this).addClass("is-active");
    }
});

window.onload = function(){
    document.getElementById("spread").animate(
        {
        height:0,
        opacity:0.5
        },
        {
            fill:"forwards",
            duration:2000,
            easing:"ease-in"
        }

    );
};

rotationだけだったもにに
js　で　クラス：is-active　を追加している

画像がクリックされたときclassをhasしてたらremove
なかったらadd

結果：is-activeのcssが発動！

spreadのほうは下から上に図形や画像を上げるアニメーション。
閉店ガラガラの逆バージョン。シャッター上げるanimation。

これって画像はまだしも、動くものをnoteに上げるのめんどくさいですよね。
なんか簡単な方法があるのかな。

こうやって書くことで覚えていくんやろな！

頑張るで～