[#4]バニラJSを使用したWebページの実装

6204 ワード
CSS 学習ログ JavaScript html テキストリンク

🌿1. index.html

<form action="https://www.google.com/search" method="get">
	<input type="search" id="search" name="q" placeholder="Search in Google">
</form>
検索ウィンドウが入っていますが、ベースの中のベースなので、追加するのは難しいと思います.
Google検索エンジンに接続するだけでgetメソッドを使用し、プレースホルダを設定します.
<form id="todo">
	<input type="text" placeholder="What is your main focus?">
</form>
<div id="focus" class="hidden">
	<p>TODAY</p>
	<span></span>
	<button id="focusBtn">X</button>
</div>
formを利用して2つの機能も加わった.
レッスンでは、いくつかのステップでlocalStorageにアレイを格納する方法で投票リストを作成しましたが、トピックのmainfocus機能を実現するために、当日集中する主な目標を1つだけ設定しました.
javascriptを使用してXボタンを押し、入力した値を空のspanにします.

🌿2. todo.js


todoはloginと同様に実現される.
  • inputウィンドウに
    • と入力.
  • 入力値はlocalStorageに
    • 格納.
  • で保存する値を読み込み、空のspanの
    • に挿入します.
  • フォームを非表示にし、入力値のspanタグ
    • を挿入します.
  • Xボタンを押すと、ローカルストレージに格納値を削除し、
    • を再生成する.
    5日にはloginも入っていて、簡単にログアウトできます.

    🌿3.完了したページ



    gifで作ってみたかったのでしばらくWebカメラの録画機能を見ていましたが、思ったより簡単でした...空っぽだけど?結果は自分の思いで作ったOK

    🌿4.KTP回顧

  • KEEP
  • は初めて結果物を創造した.
  • は、これまで学んだHTML、CSS、JavaScriptの知識をすべて活用しています.
  • jQueryやBootstrapなどのヘルプはなく、基本機能のみが使用されています.
  • PROBLEM
    アプリケーション
  • ライブラリを考慮していないため、コードはかなり読みにくい.
  • HTMLを使用してスケルトンを作成する際にCSSスタイルを考慮すると、より柔らかく、よりきれいな画面が生成される可能性があります.
  • クローンコードなので、クローン対象の画面設計に集中するのは良いのですが、独創性を発揮するのも良いです.
  • 反応型ネットワークは実現されなかった.
  • TRY
  • BootstrapとjQueryを利用して最初から作り直したほうがいいです.
    • 今度の機会に尾風を勉強したほうがいいかもしれません.
  • アニメーションではなく、他のブラウザアプリケーションを最初から最後までクローン化することも考えられます.反応型ネットワークを学べたらもっと良かったです.
    • 残念ですが、もっとよく発展して、もっと見やすく、創意的なものを作ります.🔥🔥🔥
    C#深入浅出キーワード(一)
    簡単なlisence生成プロセス_自分用