アメリカ人が有名大学に合格する方法【Day67 of 100】

を皮肉も込めて作ってみた。

デザインもいれてコードの学習

バニラJSで書いたけど、なるほど、これが大変だからState管理ができるReactが人気なんだな。

成果物スクリーンショット

中のJavaScriptファイルをフェッチして、画面上に配色のデザインとともに登場させるのは面白いかと。

RICH_FAMILY_MONEYなどを定数で設定しているところがいいでしょ?

👉 https://kiyo4810.github.io/autocal/html_ver/index28.html


これがコードの一部、CSSは職人の世界だな

アメリカ人が有名大学に合格する方法

変更ファイル:.vscode/launch.json, html_ver/images/960px-Harvard_square_harvard_yard.jpeg, html_ver/index28.css, html_ver/index28.html, html_ver/index28.js

            "url": "http://127.0.0.1:3000/html_ver/index28.html",
            "webRoot": "${workspaceFolder}"
:root {
    --bg-speed: 3s;
    /* 初期値(カフェカラー) */
    --c1: rgba(44, 26, 18, 0.4);
    --c2: rgba(141, 64, 36, 0.1);
    --c3: rgba(224, 122, 95, 0.3);
    --c4: rgba(61, 44, 37, 0.9);
}
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,
html {
    min-height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    padding-top: 50px;
    padding-bottom: 120px; /* コントロールと被らないよう少し広めに */
}
/* 1. 写真レイヤー */

今日の振り返り

|| や??はホント意味不明である、、、。出てきたときに読めるようにしておけばいいかな


今日の成果物 🎉

成果物スクリーンショット

👉 https://kiyo4810.github.io/autocal/html_ver/index28.html

👉 https://kiyo4810.github.io/autocal/html_ver/index21.html


コメントを残す

猫でデザインとプログラミングを学ぶをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む