私の最初のプロジェクトとダークモードにダイブ

こんにちは、世界!私の名前はトレヴァー、私はFlatiron学校のソフトウェア工学の学生です.私はちょうど“世界的な天気予報”と呼ばれる私の最初のプロジェクトを包んだと私はかなりどのようにプロジェクトが判明興奮している!
このプロジェクトでは、私たちの要件は、HTML、CSS、およびJavaScriptを使用して、フロントエンド、また、外部APIを利用して1つのページのアプリを作成することでした.加えて、我々は少なくとも3つの異なるタイプのイベントリスナーを組み込む必要があって、双方向性の若干のレベルを考慮に入れます.
私は天気アプリを構築することを決めました、私が私が私の犬を散歩に連れて行くならば、私が毎日外に出る時から、私が定期的に予想を捜しなければならないとわかるので.私はサンフランシスコに住んでいます、そして、人々がここの天気が同じ年であると言う間、私はそれが風がどれくらい速く吹いていて、どの方向から吹いているかに関して非常に依存しているとわかります.これは、世界にベンチャーにアパートを離れる前に、要件を予測を知ることができます.
私も旅行して、新しい場所について学ぶのが本当に好きです.それで、2つを結合するために、私はユーザーが捜して、予想に加えてページにそれを加える場所のWikipedia概要を引くために、第2のAPIを利用したかったです.さらに、この利点を活用するには、ユーザーが新しい都市について学ぶことができるように23000都市以上のリストからプル“ランダム”ボタンを追加したり、潜在的に彼らは冒険を感じている場合、彼らの次の休暇のためのランダムな宛先を提案するアプリケーションを使用します.
私は深さで議論したい機能の一つは、私はアプリのために作成した暗いモードです.スーパークイック背景に-私はダークモードのすべてが大好きです.オプションの場合は、常に暗いモードを選択します.私のラップトップ、私の電話、毎回.アプリに戻る.
私はダークモードのボタンに私の必須のイベントリスナーのいずれかを使用したい.具体的には、ブートストラップを使っていたので、ページの一番上にスイッチを入れました.これは本当にチェックボックスですが、もっと滑らかに見えます.私は、このスイッチがトグルされたとき、ページの変更に多くの要素を持っていたが、シンプルさのために、私はスイッチを利用する方法を示すためにそれらのうちの1つをハイライトします.
まず最初に、私がブートストラップを使用しているので、ここでは、HTML自体がスイッチ自体のように見えます.

      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
      <label class="form-check-label" for="flexSwitchCheckDefault">Dark Mode</label>

以下のスクリーンショットでは、私は“ランダムな場所があることに気づくでしょう!”ボタン

例を挙げましょう.HTMLでは、このボタンの内容は以下の通りです.

<button id="random-btn" type="button" class="btn btn-dark">Random location!</button>

上記のクラスに注意してください.btn btn-dark , ページが最初にロードされるとき、デフォルトボタンが黒いとして見えることは何ですか.
JavaScriptの中で次のいくつかを行う必要があります.

ダークモードスイッチとランダムボタンの両方の変数を作成する

スイッチが変更されたときに、ボタンをデフォルトの黒、黒から白にするために、ランダムボタンのクラスを切り替える

上記の機能を確実にするには、どちらの方法で動作しますか(ボタンが2回目に切り替えられ、暗黒モードが「オフ」になったときに戻る)ようになります

そこで、暗モードスイッチの値を格納する変数を作成しました.const darkSwitch = document.getElementById("flexSwitchCheckDefault")それから、ランダムボタンを使いました.const randomBtn = document.getElementById("random-btn")追加したイベントリスナーには3つの主要コンポーネントがあります.ここにコードがあり、それからそれを壊します.

darkSwitch.addEventListener("change", () => {
  if (darkSwitch.checked) {
    // remove and set attributes for dark mode
    randomBtn.removeAttribute("class")
    randomBtn.setAttribute("class", "btn btn-light")
  } else {
    // set attributes back to light mode
    randomBtn.setAttribute("class", "btn btn-dark")
  }
})

私が最初にしたことは、イベント・リスナーをダーク・モード・スイッチに追加し、変更イベントを検出することでした.変更イベントは、要素が現在の状態から変更されるたびにこの関数を実行します.この場合、スイッチはユーザーによってトグルされます.
私がする必要があったもう一つの1つは、ボタンが2回目のトグルでライトモードに戻ることを保証することでした.私の関数の中で、私はif 文.
関数はif 文.まず、スイッチがダークモードに切り替えられているかどうかを確認します(この場合、チェックされた場合は、スイッチは実際にスイッチとして表示されます).
もしあれば、実際にはrandomBtn 使用.removeAttribute そして、属性Iの型を通過します..setAttribute これは、元の暗い色から淡色にボタンの色を変更します.最初にクラス(“class”)を追加していることを指定します.このように暗いボタンからそれを変更すると、現在の暗いページを対照的にホワイトボタンにページが読み込まれたときに表示されます.
注意してください.この場合、属性を削除する必要はありませんが、他の似たような要素がトラブルを起こしているので追加されました.
スイッチがもうチェックされないならば、コードはelse 声明それはrandomBtn ページを最初にロードしたときに見た暗いスイッチに戻るsetAttribute 上述の方法.
は、ページの他の要素にそのプロセスを外挿し、機能ダークモードを取得!アクションの暗いモードを参照してください下のGIFを参照してくださいWorldwide Weather's GitHub page そして、アプリをダウンロードして自分でそれを再生します.

このアプリは小さかったので、私自身で機能ダークモードを構築するにはあまりにも多くのトラブルではなかった.しかし、選択肢があります!例えば、Cookwind CSSはダークモードを内蔵しています.私はこのプロジェクトのブートストラップを使用することを決めたので、ブートストラップに含まれるナイトモードがないので、私はそれを自分で構築する必要がありました.だから、お客様のニーズに応じて、アプリケーションのサイズに応じて、暗いモードでは、自分で取り組むか、または組み込みのダークモードオプションを持っている別のフレームワークを使用したい場合は何かのオプションがあります.
私はあなたが特にこのプロジェクトとダークモードについて読んで楽しんでほしい.何か質問があれば、私に手を差し伸べることを躊躇しないでください.
-トレヴァー