• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
.
イイね!
2022年01月05日

JavaScript で動的WEBを作成

今日の課題だった、JavaScript で日付毎に表示を切り替える処理、一応完成。

当初は、地図の横に単純なフォームを作成して、動かす予定でしたが、HTML+CSSで少し手の込んだWEBを作成。

見た目が出来たところで、JavaScript でコードを書いて、完成。



kotlinの地図ソフトもそうですが、ちゃんと動いて、形を整えると見栄えが良くなって、人にも見せられる作品になりますね。。

デザインは、一般的な、2カラムレイアウトで、CSS主体で作成。
ヘッダー画像は、クラウドサービスを使って作成。

HTMLソースはこれだけ。

<body>
<div class="wrapper">
<header></header>
<div class="container">
<div class="main" id="gmap"></div>
<div class="side">
日付:
<select name="ListDate" id="ListDate">
</select>
<input type="button" value="送信" onclick="clickButtonDate()"/>
<textarea class="DateText" id="DateText"></textarea>
</div>
</div>
<footer><center><b>Copyright (C) fix All Rights Reserved.</b></center></footer>
</div>
</body>


あとは、グラフ作成するとか。
やりたいことは、ほぼやってしまったかも…。


qiita書いて意味あるのかなあと…。
自分のスキルアピールになるかもですが、逆に醜態を晒す結果にもなりそうな気がしますね。。


WEBをゼロからタグの手打ちで制作したのは物凄く久しぶり。
そんなに時間かけてないので、1時間ぐらい。

エディターは、VScodeで便利なプラグインのお陰で、楽に入力。
カラーコードとか、色表示できたり、クリックするとGUI画面で色を選択できたりとか、何かと便利。

現在は、Android Studio + VScode + vim の三刀流。
EmEditorは、永久ライセンス登録済みだけど、ほぼメモ帳代わり…

昔みたいに、またゼロからWEBを作ってみようかと思ったり。

今日みたいなWEBサービスを作る場合は、自分で全部コード書いた方が、かゆいところに手が届くので、思い通りのサイトが作れるかなと。
ただ、レスポンシブとか考えると、物凄く手間がかかりそうですが…

今日、作ったサイトは、画面サイズを変更すると、伸び縮みするようにしてるので、スマホからでもそこそこ見えるはず。
複雑なサイトになると、そう簡単にはいないと思うけど。



ブログ一覧 | 日記
Posted at 2022/01/05 18:16:53

イイね!0件



タグ

今、あなたにおすすめ

ブログ人気記事

超撥水・滑水、うるツヤ感✨
ESQUIRE6318さん

田子の浦漁港近くの 富士山スポット ...
pikamatsuさん

みんカラ:モニターキャンペーン【C ...
インギー♪さん

今日は呑み会「やきとり 河童」
zx11momoさん

町屋DEカフェに行ってきました😊
菜っちゃんさん

みんカラ:モニターキャンペーン【C ...
なつこの旦那さん

この記事へのコメント

コメントはありません。

プロフィール

「Lei05 夏服の開放条件を考察。 http://cvw.jp/b/2807746/46164818/
何シテル?   06/08 09:45
パソコンとアニメオタク。 PCは、WinXPからWin10までと、FreeBSDを、12ぐらいまで愛用してましたが、今は、Linux系のUbuntu使い。 ...
みんカラ新規会員登録

ユーザー内検索

<< 2024/6 >>

      1
2345678
9101112131415
16171819202122
23242526272829
30      

ブログカテゴリー

愛車一覧

トヨタ アクア トヨタ アクア
トヨタ アクアに乗っています。DIY好き。車載PC。Lei02、Lie03。カッティング ...

過去のブログ

2022年
01月02月03月04月05月06月
07月08月09月10月11月12月
2021年
01月02月03月04月05月06月
07月08月09月10月11月12月
2017年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ利用規約サイトマップ

あなたの愛車、今いくら?

複数社の査定額を比較して愛車の最高額を調べよう!

あなたの愛車、今いくら?
メーカー
モデル
年式
走行距離(km)
© LY Corporation