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

🌿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を利用して最初から作り直したほうがいいです.

今度の機会に尾風を勉強したほうがいいかもしれません.

アニメーションではなく、他のブラウザアプリケーションを最初から最後までクローン化することも考えられます.反応型ネットワークを学べたらもっと良かったです.

残念ですが、もっとよく発展して、もっと見やすく、創意的なものを作ります.🔥🔥🔥