2020-01-01から1年間の記事一覧
実行＆記述日 2020/5/18 参考にしたURL： https://www.youtube.com/watch?v=CvkCjfHts9A この動画だと不十分（2分50秒くらい） firabase uiのログインのコピペ部分 https://firebase.google.com/docs/auth/web/firebaseui firebase ui のコピーして使う部分 …
今回はforEachによるloginとlogoutのレイアウト変更について コードは以下 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <style> .hidden{ display: none; } </style> <body> <form action="" class="form hidden"> </form></body></html>
html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">test</button> <button id="btn2">test2</button> </body></html>
実行結果 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas練習</title> <link rel="stylesheet" href="css/canvas.css"> </head> <body> <canvas width="600" height="240"> Canvas not sapported </canvas></body></html>
やりたいこと ・クリックイベントでハンバーガーメニューをクリックしたらタイトルが消える ・ハンバーガーメニューを閉じたらタイトルが出る 方法 ハンバーガーメニューをクリックイベントをすると、 ・メニューにクラスopenが追加→メニュー表示 ・タイトル…
marginを上手く使って余白と中央揃えをする時の設計の考え marginの管理方法まとめ 続く
Zoomを使用した授業のオンライン化について記事を書きました。 https://note.com/kirikko/n/n99a006db0ac5先日桐生市内で個人塾をしている知人からコロナで仕事が出来ず生徒さんの親御さんと共に困っていると相談を受けました。スマホを使用したことの無い友…
今回はjs操作でimgタグを作るやり方を以下に let img = document.createElement('img'); img.className =`card spade sapde${i} ${i}`; img.id = ''; img.setAttribute ('src','images/front.png'); img.onclick =clickFunc; １。let img document.createEle…
sprit();は()内に入れた引数を区切りとして文字列を配列に変換してくれる。 例）const t = 'aaa9bbb9ccc9ddd';console.log(t.split('9'));これのコンソールの結果は ["aaa", "bbb", "ccc", "ddd"]となる。 上記は文字列を引数である「９」で区切った結果が表…
配列についてググっている時に「...arr〇〇✖︎✖️〜〜〜〜」というように何やら「...」が使われたコードがある。 でもこれ何？ となりました。 ...でググっても出てこなかったのですが。 ドットインストールにて発見 参考：js オブジェクト編＃６スプレット構…
この記事の続きです kirikko-scondcube.hatenablog.com 今回使用したものはFisher–Yatesアルゴリズム 参考：https://qiita.com/komaji504/items/62a0f8ea43053e90555a?fbclid=IwAR2p_kxgQoehQXpfLbMjGXwMYDoWs5ycEjGku52rMAIPHTCcZ6ppLmyjs64 内容は以下 for…
この記事の続きです。 kirikko-scondcube.hatenablog.com 今日のコード html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="palet"></div> </body></html>
現在のコード 現在の結果 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="palet"></div> <div id="result">ここに経過時間が読み込まれるようにする</div></body></html>
以下の続きです 今回は削除について kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com 既存のul-liの要素から指定したli（今回はitem1 ）を削除する記述 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </meta></meta></head></html>
前回の投稿の続きです kirikko-scondcube.hatenablog.com 今回は既存のli要素item0をコピーしてitem2とitem1の間にコピーしたitem0を挿入する処理 挿入前 挿入後 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </meta></meta></head></html>
表題の件 runボタンを押すとitem2が追加されるコード jsの各処理についてコメントしたことを忘れないようにする 要素の追加には １。li要素を作る ２。中身のテキストを設定する ３。DOMツリーに追加する（今回でいうul内のliタグの一覧にセット） 以上の手…
最近キータイピングの練習を改めて始めたので、その記録用ブログです。 始めたのはこちら https://www.typingclub.com/ タイピングクラブ 無料でタイピングを練習出来る。 レベル別で特に数字や記号を練習出来るのがとても良い 苦手だとわかったキー 1と0 続…
先日失敗した以下の記事でのfirebaseのdeployが解決し、無事にアップできました。 kirikko-scondcube.hatenablog.com 結果：https://kirikkohp.web.app/ ↑デプロイしたもの 今回の解決に直結した記事 https://qiita.com/kitikitchen/items/78b526d4a3a2bb14f…
先日成功したfirebaseによるデプロイに今日は失敗した。 やり方はこちらを参考にし前回は出来た 参考：https://webdesign-trends.net/entry/9692 手順は １。node.jsのインストール npm -vでバージョンがターミナルで表示されればOK ２。firebaseのインスト…
ドットインストールの三択クイズを作る動画視聴時にこんな記載が question.textContent = quizSet[currentNum].q; quizSet[currentNum].c.forEach(choice => { const li = document.createElement('li'); li.textContent = choice; choices.appendChild(li);…
以前のブログで記載のジェンケンゲーム ジャンケンゲーム こちらの処理を簡略化する方法をアドバイス頂きましたので記載します。 内容は jsファイルにて相手の手の表示とジャンケンの判定結果をそれぞれif文で記載していたのですが、それを一つにまとめられ…
初めてのジャンケンゲーム ドットインストールのおみくじゲームをベースに作成しました。 cssなしのジャンケンゲーム コードは以下 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ジャンケンゲーム…</h1></body></html>
関数について function 〇〇() {}; 上記で定義すると、呼び出す時は〇〇();で呼び出せる この例では function ad() { console.log("------------Ad----------------") console.log("------------Ad----------------") console.log("------------Ad----------…
参考になるところを箇条書きしました 'use strict'; // これは最初に定型として定義する.エラーチェックしやすくなる //jsは上から順に実行される console.log("hello\n world") // 「\n」で改行 console.log("hello\tworld") // 「\t」でtab挿入 console.lo…
グーチョキパーを選ぶとしたにそれぞれのテキストが出る グーを選んだ場合 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>あなたの手を決めてください</p> <button id="gu">グー</button></body></html>
金額を半角で入れる 1600と記入 注文しましたと表示される （入力値が１５００未満だった時ここには注文できませんでしたと表示される） コード html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>注…</h1></body></html>
ProgateのJSを一周したので実践としてジャンケンアプリを作ろうとした http://kanza.qee.jp/datahtml5/jyanken/jyangken.htm これを真似ようとしたところ、、 挫折。 ググって解説の丁寧なもの発見 https://qiita.com/tsuyopon_xyz/items/ed2e244da8225eb31b…
オブジェクトとは const animal = {cat:"猫", dog: "犬" ・・・・}; 上記のように複数のプロパティ（ここでいうcat, dog )と対応する値（ここでいう猫、犬）を管理しているもののこと 値には関数も使える ーーーーーーーーーーーーーーーーーーーーーーーー…
Progate 上級 レスポンシブ対応 上記画像のレスポンシブ実装の為のまとめ <meta name="viewport" content="width=device-width, initial-scale=1.0"> をhtmlのheadタグ内に記述 通常のstyle.cssの他にレスポンシブようファイルresponsive.cssを作る この時レスポンシブ用ファイルは上記viewportよりも下に配置 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Progate</title> …</meta></meta>
Javasciriptについては ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー let :変数 const : 定数 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ifについて let namber = 10 if(namber > 5){ console.log("5…
