解答 – 株式会社TerraceTech(テラステック) https://terracetech.jp ~人と技術で未来をテラス~ Sat, 31 Jul 2021 07:08:59 +0000 ja hourly 1 https://terracetech.jp/wp-content/uploads/2019/11/cropped-1657-1-32x32.png 解答 – 株式会社TerraceTech(テラステック) https://terracetech.jp 32 32 jestハンズオン正解例 https://terracetech.jp/2021/08/01/jesthandon-ansewer/ Sun, 01 Aug 2021 07:00:25 +0000 https://terracetech.jp/?p=923 jestハンズオン正解例

あくまでも例です。

]]> 【もりけん塾】 JS課題「利用規約をopenにしてスクロールが下まで行ったことのチェク回答例」 https://terracetech.jp/2021/06/05/riyoukiyaku-scrolltop-or-intersectionobserver/ Sat, 05 Jun 2021 01:33:47 +0000 https://terracetech.jp/?p=793 【もりけん塾】 JS課題「利用規約をopenにしてスクロールが下まで行ったことのチェク回答例」

最近では利用規約をユーザーが実際に見たかという実装が必要になるケースがあります。ただのcheckboxをtrueにする実装だけだと法律上意思を持っていないとみなされるのかもしれないです。
機能的にそれを「見た」とするためには…

今回の課題仕様は
利用規約リンクを押したらモーダルをopenにして、その中で利用規約を表示、スクロールして下まで行った or 一番下が現れた場合 checkboxをtrueにします
これを実装するにはどうしたらいいでしょう(下記コードは @GT0b4 さんのにscroll箇所だけ修正を加えたものです)

1. scrollで判定する場合

2. intersectionObserverで判定する場合

検証は、デバイスを変えて、trueになる瞬間がコンテンツ下が画面に含まれていることを確認します

scrollの場合

interSectionObserverの場合

https://medium.com/@jbbpatel94/difference-between-offsetheight-clientheight-and-scrollheight-cfea5c196937

]]> 課題10の答え https://terracetech.jp/2021/03/14/kadai10/ Sat, 13 Mar 2021 23:53:12 +0000 https://terracetech.jp/?p=590 課題10のMさんの答え「問題9に追加で try-catch-finaliy を書いてください」

https://codesandbox.io/s/romantic-chaplygin-dey8j

]]> 解答【独学でフロントエンドエンジニアになる!】学習ロードマップに対応した課題練習 https://terracetech.jp/2021/02/07/kaitou/ Sat, 06 Feb 2021 15:00:41 +0000 https://terracetech.jp/?p=546 解答【独学でフロントエンドエンジニアになる!】学習ロードマップに対応した課題練習

12問目あたりのfetch

https://codesandbox.io/s/infallible-wright-hf6b7?file=/main.js

]]> 【解答】resolveが呼ばれるまでローディングを表示させよう https://terracetech.jp/2020/10/22/resolve-loading-a/ Thu, 22 Oct 2020 09:33:34 +0000 https://terracetech.jp/?p=402 【解答】resolveが呼ばれるまでローディングを表示させようの答えです。

(答えはあくまで一例です)

  • resolveより前にinnerHTMLに対してimgタグの文字列を入れます。
  • ulがあるのでそこに入れます
  • 終わったら空文字を入れてloadingを削除します

もちろんbodyに対していれても良いですし、createElementでimgを作ってappendChildしてもokです。

 

]]> もりけん塾 フロントエンド エンジニア養成課題5の解答zipフィル https://terracetech.jp/2020/10/18/kaitou5/ Sat, 17 Oct 2020 23:18:25 +0000 https://terracetech.jp/?p=376

もりけん塾 フロントエンド エンジニア養成課題5の回答zipフィル

解答を得る前に本当に考え尽くしましたか?

– わからなくて悩むことはかなりあります。1,2日かかることもあります。
– 解答ではなくやったことのプロセスやいろいろなアプローチの発見が大事だったりします

チェックシート
– すでにどこかにエラーが表示されていませんか？ -> 答えを言ってくれています。そのままググればよいこともあります
– 何がわからなかったか言語化しましたか？
– 分からないことを誰かに伝えましたか？(誰かに伝えることで論理的になり自分で気づくこともあります)
– 仕様を見にいった？
– 英語記事も調べた?

こちらからどうぞ

役に立ったなと思っていただけたら是非フォロー、広めていただけたら嬉しいです。

]]>