# teamB
<!-- TODOリスト
1.挿入するtargetのセレクタ名を決める
2.テキストフィールドの後に挿入するコードを調べる
3.そのコードで問題ないか確認する
4.コードで変更してページを確認する
#enquete_post > div:nth-child(11) > input[type=text]
<script>
$(function(){
$('input[name="text4[1]"]').after('人');
})
</script>
$('input[name="text4[1]"]').after('人');
https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24 -->
<!-- $('input[name="text4[1]"]') -->
## TODOリスト
- 書き換えるtargetのセレクタ名を確認する
- 書き換えるコードを調べる
- そのコードで問題ないか確認する
- コードで変更してページを確認する
## script
```javascript=
<script>
$(function(){
var str1 = $('.question').eq(5).html().replace(/Q6/g, 'Q6-1');
$('.question').eq(5).html(str1);
var str2 = $('.question').eq(6).html().replace(/Q7/g, 'Q6-2');
$('.question').eq(6).html(str2);
});
</script>
```
<script>
$(function(){
var str1 = $('.question').eq(5).html().replace(/Q6/g, 'Q6-1');
$('.question').eq(5).html(str1);
var str1 = $('.question').eq(6).html().replace(/Q7/g, 'Q6-2');
$('.question').eq(6).html(str1);
})
</script>
Q6
講演会の希望する曜日をお聞かせください。
var h1 = $('.question').eq(5).text();
var result = h1.replace("Q6", "Q6-1");
$('.question').eq(5).text(result);
var h1 = $('.question').eq(6).text();
var result = h1.replace("Q7", "Q6-2");
$('.question').eq(6).text(result);
https://www.sejuku.net/blog/31821
var str1 = $('.question').eq(5).html().replace(/Q6/g, 'Q6-1');
$('.question').eq(5).html(str1);
var str1 = $('.question').eq(6).html().replace(/Q7/g, 'Q6-2');
$('.question').eq(6).html(str1);
## TODOリスト③
- 変更するtargetのセレクタ名を確認する
- なぜ縦並びになっているのかを確認する
- 変更するコードを調べる
- そのコードで問題ないか確認する
- コードで変更してページを確認する
https://csshtml.work/html_div_sidebyside/#1displayflexdiv
<script>
$(function(){
$('.answer').eq(0).css('display','flex');
})
</script>
.css('color', 'Blue');
問題２ Todo
1．問題1を使ってローディングを1秒に設定する
2．表示したいコンテンツ１，２，３のセレクタを取得する
3．背景を黒色にするコードを調べる
4．特定のコンテンツの背景を黒色にする
5．クリックで発火するコードを調べる
6．クリックして背景を黒色にする
7．1秒後にコンテンツ１，２，３をもとに戻す
$('#green').css('background', 'black');
$('#green').css('background', 'green');
$('#red')
$('#blue')
$('#green').click(function() {
setTimeout(function(){
$('#green').css('background', 'black');
setTimeout(function(){
$('#green').css('background', 'green');
}, 1000);
}, 1000);
})
$('#red').click(function() {
setTimeout(function(){
$('#red').css('background', 'black');
setTimeout(function(){
$('#red').css('background', 'red');
}, 1000);
}, 1000);
})
$('#blue').click(function() {
setTimeout(function(){
$('#blue').css('background', 'black');
setTimeout(function(){
$('#blue').css('background', 'blue');
}, 1000);
}, 1000);
})
問題2 Todo
1．問題1を使ってローディングを1秒に設定する
2．表示したいコンテンツ１，２，３のセレクタを取得する
3．背景を黒色にするコードを調べる
4．特定のコンテンツの背景を黒色にする
5．クリックで発火するコードを調べる
6．クリックして背景を黒色にする
7．1秒後にコンテンツ１，２，３をもとに戻す
問題3 Todo
1．Promiseを利用して問題1を使ってローディングを1秒に設定する
2．Promiseを利用して表示したいコンテンツ１，２，３のセレクタを取得する
3．Promiseを利用して特定のコンテンツの背景を黒色にする
4．Promiseを利用してクリックして背景を黒色にする
5．Promiseを利用して1秒後にコンテンツ１，２，３をもとに戻す
問題③ Todo
1. Promiseを調べる
---
問題1 TODO
1. ページを更新するコードを調べる
2. 適用する
3. チェック
<script>
function doReload() {
// reloadメソッドによりページをリロード
window.location.reload();
}
window.addEventListener('load', function () {
// ページ表示完了した5秒後にリロード
setTimeout(doReload, 10000);
});
</script>
---
問題2 TODO
1. JSONのデータ使い方を調べる
2. アンケートボタンのオープンクローズの時間を取得
3. アンケートボタンのセレクタを取得する
4. アンケートボタンのCSSを変更する
5. 現在時刻を取得
6. オープンクローズ時刻と現在時刻を比較する
7. 比較した結果に基づいて、ボタンのＣＳＳを変更
8. 10秒更新を適用する
let url = 'https://evesys-hands-on.3esys.jp/api/v1/handsonapi/2';
var open = '0';
var close = '0';
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data['open_time']);
console.log(data['close_time']);
open = data['open_time'];
close = data['close_time'];
console.log(open);
console.log(close);
});
let now = Date.now();
var date = new Date();
open = new Date(open);
close = new Date(close);
console.log('open: ' + open.getTime());
console.log('close: ' + close.getTime());
console.log('date: ' + date.getTime());
// オープン前
if(open.getTime() > date.getTime()){
$("#enquete_button").removeClass();
$("#enquete_button").addClass("button gray");
console.log(111);
}
// クローズ
else if(close.getTime() < date.getTime()){
$("#enquete_button").removeClass();
$("#enquete_button").addClass("button gray");
console.log(222);
}
// オープン中
else{
$("#enquete_button").removeClass();
$("#enquete_button").addClass("button green");
console.log(333);
}
<script>
$(function(){
$('#contents').children("div:contains('ご視聴の方')").css({'color': 'blue', 'border-bottom': 'solid 1px blue'});
})
</script>
$("#enquete_button").removeClass();
$("#enquete_button").addClass("button green");
let entryTime = Date.now(); // 現在の時刻をタイムスタンプで用意
// Dateオブジェクトを作成
var date = new Date() ;
// UNIXタイムスタンプを取得する (ミリ秒単位)
var a = date.getTime() ;
---
問題1 TODO
1. テキストボックスを有効/無効するコードを調べる
2. 適用したいチェックボックスのセレクタを調べる
3. 適用させるテキストボックスが合っているか確認する
4. 1.で調べたコードを3.に適用させる
5.
$("input[name=\"text2[2]\"]").prop('disabled', false);
$("input[name=\"text2[3]\"]").prop('disabled', false);
$("input[name="text2[2]"]").prop('disabled', false);
text2[2]
text2[3]
$("input[name=\"text2[2]\"]").prop('disabled', true);
$("input[name=\"text2[3]\"]").prop('disabled', true);
$('#checkbox2_2').change(function() {
if($(this).prop('checked')){ $("input[name=\"text2[2]\"]").prop('disabled', false);
}else{
$("input[name=\"text2[2]\"]").prop('disabled', true);
}
});
$('#checkbox2_3').change(function() {
if($(this).prop('checked')){
$("input[name=\"text2[3]\"]").prop('disabled', false);
}else{
$("input[name=\"text2[3]\"]").prop('disabled', true);
}
});
---
To do
1. Q1とQ2のセレクタを調べる
2. チェックされた状態とチェックされてない状態の判別方法を調べる（実質：ラジオボタン）
3. チェックされた時のイベントを調べる
4. Q2をチェックするコードを調べる
5. Q2をコードを利用してチェックを付ける・外す
6. Q1がチェックされた時に4のコードが動くようにする
7. 確認
#radio1_1
#checkbox2_3
$('#checkbox2_3').prop('checked', true);
$('#checkbox2_3').prop('checked', false);
<script>
$(function(){
$("input[name=\"radio1\"]").click(function() {
if($('#radio1_1').prop('checked')){
$('#checkbox2_3').prop('checked', true);
}else{
$('#checkbox2_3').prop('checked', false);
}
});
});
</script>
"input[type=\"radio\"]"
$('input[name="text2[2]"]').prop('disabled', true)
$('input[name="text2[3]"]').prop('disabled', true)
$('input[name="checkbox2[]"]').on('change', function(){
let target = $(this).val()
if((target == '2' || target == '3') && $(this).prop('checked')) {
$('input[name="text2[' + target + ']"]').prop('disabled', false)
}else if((target == '2' || target == '3') && !$(this).prop('checked')) {
var checked_target =
$('input[name="text2[' + target + ']"]').prop('disabled', true)
}
})
---
問題③ Todo
1. Q3のセレクタ名を調べる
2. 文字数のカウントのコードを持ってくる
3. フォーカスのイベントを調べる
4. フォーカスが外れた時に文字を表示する
5. 条件分岐で51文字以上の時に表示する
6. 確認
textarea3[3]
<script>
$(function(){
$(".question:contains(今後聞きたい講演内容があればご記入ください。)").append("現在の文字数<span id='text_counter'>0</span>文字");
$('textarea[name="textarea3[3]"]').focusout(function() {
console.log('フォーカスが外れました');
if ($('textarea[name="textarea3[3]"]').val().length >= 50){
$("#text_counter").text($(this).val().length);
}
});
});
</script>
$('textarea[name="textarea3[3]"]').on('keyup', function(){
if ($(text_counter).val().length >= 50){
$("#text_counter").text($(this).val().length);
}
});
$('form').focusout(function() {
console.log('フォーカスが外れました');
});
---
``` javascript
window.kit
[
{
"pref": "佐賀県",
"branch": "佐賀本社",
"studio": ""
},
{
"pref": "北海道",
"branch": "札幌支店",
"studio": "KIT STUDIO-キットスタジオ- 札幌スタジオ"
},
{
"pref": "東京都",
"branch": "東京第1支店",
"studio": "東京第1スタジオ"
},
{
"pref": "東京都",
"branch": "東京第1支店",
"studio": "東京第3スタジオ"
},
{
"pref": "東京都",
"branch": "東京第1支店",
"studio": "東京第4スタジオ"
},
{
"pref": "東京都",
"branch": "東京第2支店",
"studio": "東京第2スタジオ"
},
{
"pref": "東京都",
"branch": "東京第2支店",
"studio": "東京第5スタジオ"
},
{
"pref": "東京都",
"branch": "東京第2支店",
"studio": "東京第6スタジオ"
},
{
"pref": "愛知県",
"branch": "名古屋支店",
"studio": "名古屋スタジオ"
},
{
"pref": "大阪府",
"branch": "大阪支店",
"studio": "大阪第1スタジオ"
},
{
"pref": "大阪府",
"branch": "大阪支店",
"studio": "大阪第2スタジオ"
},
{
"pref": "福岡県",
"branch": "福岡支店",
"studio": "福岡スタジオ"
}
]
```
## todo
- 連想配列の利用の仕方を調べる
- コンソール上で連想配列の'pref'に佐賀県を入力した場合にブランチの値が取得できるようにする
- 都道府県で選択された情報を取得する
- セレクトボックスの内容を変更できるようにする
- 都道府県で選択された情報に基づいて、window.kitの配列の支店情報をセレクトボックスの選択肢に表示させる
<script>
$(function(){
$('#pref').change(function() {
var num = 0;
var sumida = 0;
var uarr = new Array();
var select_text = $('option:selected').text();
for(num=0;num<window.kit.length;num++){
if(window.kit[num]['pref']== select_text){
console.log(window.kit[num]['branch']);
uarr[sumida] = window.kit[num]['branch'];
sumida++;
}
}
var hato = $.unique(uarr);
console.log(hato); //重複を取り除いた後を出力する
$('#branch > option').remove();
$('#branch').append($('<option>').html('').val(0));
for(num=0;num<hato.length;num++){
$('#branch').append($('<option>').html(hato[num]).val(num + 1));
}
});
});
</script>
$('#select > option').remove();
for(num=0;num<hato.length;num++){
$('#branch').append($('<option>').html("hato[num]").val("num"));
}
var uarr = new Array();
var uarr = $.unique(arr);
console.log(uarr); //重複を取り除いた後を出力する
$('#branch').append($('<option>').html("hato[num]").val("num"));
$("#pref").click(function() {
// value値を取得
const str1 = $("#color1").val();
$("#span1").text(str1);
});
<script>
$(function() {
$('select[name="select7"]').change(function() {
var select_text = $('option:selected').text();
//その他が一致していたら
if (select_text == other) {
$('input[name="text7[1]"]').show();
} else {
$('input[name="text7[1]"]').hide();
}
})
});
</script>
TODO
1. removeプルダウンの中身消す
2. 配列の中身の初めの2文字を持ってこれるようにする
3. 配列の中身の中身のデータを昇順にソートする
4. プルダウンにぶちこむ
pref
$('select#pref option').remove();
<script>
$('select#pref option').remove();
var kit = window.Prefectures;
kit.sort();
var optionTag = '';
kit.forEach(function (item) {
optionTag += `<option value="${item}">${item}</option>`;
});
$("select#pref").append(optionTag);
</script>
<script>
$(function() {
$('select#pref option').remove();
var kit = window.Prefectures;
kit.push('06:山形県');
kit.push('41:佐賀県');
kit.sort();
var optionTag = '';
kit.forEach(function (item) {
optionTag += `<option value="${item}">${item}</option>`;
});
$("select#pref").append(optionTag);
});
</script>
kit.sort();
console.log(str);
$(function () {
// 文字数カット処理-------
var $setElm = $('.cutText'); // cutTextとついたクラスの要素を取得
var cutFigure = '5'; // カットする文字数
$setElm.each(function () { // cutTextとついたクラスのすべての要素に対して文字カットの処理を行う
var textLength = $(this).text().length; // 各要素の長さを取得
var textTrim = $(this).text().substr(0, 2)
if (cutFigure < textLength) { $(this).html(textTrim + afterTxt).css({ visibility: 'visible' }); } else if (cu２tFigure >= textLength) {
// cssで初期表示は非表示にしているので、カット処理後に表示する
$(this).css({
visibility: 'visible'
});
}
})
});
TODO：
1. 配列に山形県と佐賀県を追加する。
2. 1番の問題にそってやる
kit.push('06:山形県');
kit.push('41:佐賀県');
TODO：
1. cookieの保存方法、利用の仕方
2. 送信ボタンが押されたときのイベントでcookieに保存する
3. cookieにデータがあったときにデータを表示
4. 終わり
<script>
$(function() {
$('#register').on('click', function() {
$.cookie('pref', $('select[name="pref"]').val(), { expires: 7 });
$.cookie('age', $('input[name="age"]').val(), { expires: 7 });
$.cookie('name', $('input[name="name"]').val(), { expires: 7 });
$.cookie('email', $('input[name="email"]').val(), { expires: 7 });
});
$('select[name="pref"]').val($.cookie('pref'));
$("input[name='age']").val($.cookie('age'));
$("input[name='name']").val($.cookie('name'));
$("input[name='email']").val($.cookie('email'));
});
</script>
cookieの情報は暗号化するのが一般的
TODO
1.スライド3枚目のセレクタ確認
2.URLを変更する
3.変更の仕方を確認（.html .text）
4.
var h1 = $("carousel-item").eq(2).text();
var result = h1.replace("004-polished-wood.png", "007-dark-loom.png");
$("carousel-item").eq(2).text(result);
var nakahama = $('.carousel-item').eq(2).children('img').attr('src');
$('.carousel-item').eq(2).children('img').attr('src','//live-static.3esys.jp/kit/test/007-dark-loom.png');
$('.carousel-item').eq(2).children('img').attr('src');
<script>
$(function() {
$('.carousel-item').eq(2).children('img').attr('src','//live-static.3esys.jp/kit/test/007-dark-loom.png');
});
</script>
$.ajax({
type: "get",
url: "https://evesys-hands-on.3esys.jp/api/v1/handsonapi/5",
data: {name: 'jsonString'},
dataType: "json",
success: function(data){
console.log(data);
console.log(data['text']);
}
});
console.log(data['text']);
TODO
1.textキーのデータを確認する
2.「イベントシステム部勉強会」のフォーマットを確認、持ってくる
3.1件コピー追加
4.100件繰り返す
5.ソート
6.1件目削除
<div class="col">
<div class="card mb-1" style="width: 18rem; max-width: 100%;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false" style="height: 77.6194px;"><title>イベントシステム部勉強会</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<p><small>2022-1-24<br>14:00 ～ 16:00</small></p>
<h5 class="card-title">イベントシステム部勉強会</h5>
<p class="card-text"><a href="https://evesys-hands-on.3esys.jp/">ems： https://evesys-hands-on.3esys.jp/</a></p>
<p class="card-text">営業さん：杉本さん</p>
<p class="card-text">備考：みっちりスパルタ講習</p>
<a href="#" class="btn btn-primary w-100">編集</a>
</div>
</div>
</div>
const from_json = JSON.parse(json_string);
$.ajax({
type: "get",
url: "https://evesys-hands-on.3esys.jp/api/v1/handsonapi/5",
data: {name: 'jsonString'},
dataType: "json",
success: function(data){
console.log(data);
console.log(typeof data['text']);
from_json = JSON.parse(data['text']);
console.log(from_json);
console.log(typeof from_json);
}
});
-----
$.ajax({
type: "get",
url: "https://evesys-hands-on.3esys.jp/api/v1/handsonapi/5",
data: {name: 'jsonString'},
dataType: "json",
success: function(data){
console.log(data);
console.log(typeof data['text']);
from_json = JSON.parse(data['text']);
console.log(from_json);
console.log(typeof from_json);
name = from_json[0]['name'];
yamada = '<div class="col">';
yamada += '<div class="card mb-1" style="width: 18rem; max-width: 100%;">';
yamada += '<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false" style="height: 77.6194px;"><title>イベントシステム部勉強会</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>';
yamada += '<div class="card-body">';
yamada += '<p><small>2022-1-24<br>14:00 ～ 16:00</small></p>';
yamada += '<h5 class="card-title">' + name + '</h5>';
yamada += '<p class="card-text"><a href="https://evesys-hands-on.3esys.jp/">ems： https://evesys-hands-on.3esys.jp/</a></p>';
yamada += '<p class="card-text">営業さん：杉本さん</p>';
yamada += '<p class="card-text">備考：みっちりスパルタ講習</p>';
yamada += '<a href="#" class="btn btn-primary w-100">編集</a>';
yamada += '</div>';
yamada += '</div>';
yamada += '</div>';
$('#contents-box').append(yamada);
}
});
<script>
$(function(){
new Promise((resolve) => {
$.ajax({
type: "get",
url: "https://evesys-hands-on.3esys.jp/api/v1/handsonapi/5",
data: {name: 'jsonString'},
dataType: "json",
success: function(data){
from_json = JSON.parse(data['text']);
resolve();
}
});
}).then(() => {
display_div = "";
/*連想配列のソート*/
from_json.sort(function(a,b){
if(a.date > b.date) {
return 1;
}
if(a.date < b.date) {
return -1;
}
return 0;
});
from_json.forEach(function (item,index) {
name = from_json[index]['name'];
date = from_json[index]['date'];
time = from_json[index]['time'];
sales_name = from_json[index]['sales_name'];
ems = from_json[index]['ems'];
remarks = from_json[index]['remarks'];
display_div += divCreate(name,date,time,sales_name,ems,remarks);
});
function divCreate(name,date,time,sales_name,ems,remarks){
yamada = '<div class="col">';
yamada += '<div class="card mb-1" style="width: 18rem; max-width: 100%;">';
yamada += '<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false" style="height: 77.6194px;"><title>' + name + '</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>';
yamada += '<div class="card-body">';
yamada += '<p><small>' + date + '<br>' + time + '</small></p>';
yamada += '<h5 class="card-title">' + name + '</h5>';
yamada += '<p class="card-text"><a href="https://evesys-hands-on.3esys.jp/">ems： ' + ems + '</a></p>';
yamada += '<p class="card-text">営業さん：' + sales_name + '</p>';
yamada += '<p class="card-text">備考：' + remarks + '</p>';
yamada += '<a href="#" class="btn btn-primary w-100">編集</a>';
yamada += '</div>';
yamada += '</div>';
yamada += '</div>';
return yamada;
}
$('#contents-box').html(display_div);
});
});
</script>
----
TODO
1.iframe埋め込みとは調べる
2.どこに埋め込むか調べる
3.埋め込む
4.
<iframe src="https://chat-system-staging.3esys.jp/chat/c7189a69-f6e6-4d0d-a0a2-b9d649b7f866?room_id=af15178e-e4b0-4627-a1cb-3bf13c49ac0f&room_type=study" width="100%" height="100"></iframe>
https://chat-system-staging.3esys.jp/chat/c7189a69-f6e6-4d0d-a0a2-b9d649b7f866?room_id=af15178e-e4b0-4627-a1cb-3bf13c49ac0f&room_type=study
TODO
1.レスポンシブのウィンドウサイズのcssを調べる
2.なぜ横並びになっているか調べる
3.
4.
22/11/30(角田sublimeメモ)
$('.question-container').html('<iframe src="https://chat-system-staging.3esys.jp/chat/c7189a69-f6e6-4d0d-a0a2-b9d649b7f866?room_id=af15178e-e4b0-4627-a1cb-3bf13c49ac0f&room_type=study" width="100%" height="360"></iframe>');
<iframe src="https://chat-system-staging.3esys.jp/chat/c7189a69-f6e6-4d0d-a0a2-b9d649b7f866?room_id=af15178e-e4b0-4627-a1cb-3bf13c49ac0f&room_type=study" width="100%" height="100"></iframe>
#video_container {
grid-template-rows: 354px 354px 65px 65px 65px;
grid-template-columns: 630px;
}
#st_video {
grid-row: 1/2;
grid-column: 1/2;
}
#st_question {
grid-row: 2/3;
grid-column: 1/2;
}
#bunner_info {
grid-row: 3/4;
grid-column: 1/2;
}
#bunner_link {
grid-row: 4/5;
grid-column: 1/2;
display: flex;
align-items: center;
justify-content: center;
}
#bunner_reload {
grid-row: 5/6;
grid-column: 1/2;
display: flex;
align-items: center;
justify-content: center;
}
<script>
$(window).resize(sampleEvent);
function sampleEvent() {
if (window.matchMedia('(max-width: 960px)').matches) {
$('#video_container').css({'grid-template-rows': '354px 354px 65px 65px 65px', 'grid-template-columns': '630px'});
$('#st_video').css({'grid-row': '1/2', 'grid-column': '1/2'});
$('#st_question').css({'grid-row': '2/3', 'grid-column': '1/2'});
$('#bunner_info').css({'grid-row': '3/4', 'grid-column': '1/2'});
$('#bunner_link').css({'grid-row': '4/5', 'grid-column': '1/2'});
$('#bunner_reload').css({'grid-row': '5/6', 'grid-column': '1/2'});
}else{
$('#video_container').css({'grid-template-rows': '354px 65px', 'grid-template-columns': '315px 315px 315px'});
$('#st_video').css({'grid-row': '1/2', 'grid-column': '1/3'});
$('#st_question').css({'grid-row': '1/2', 'grid-column': '3/4'});
$('#bunner_info').css({'grid-row': '2/3', 'grid-column': '1/2'});
$('#bunner_link').css({'grid-row': '2/3', 'grid-column': '2/3'});
$('#bunner_reload').css({'grid-row': '2/3', 'grid-column': '3/4'});
}
};
</script>
$(window).resize(sampleEvent);
function sampleEvent() {
console.log('サイズが変更されました！');
}
### 便利だったメソッド
- forEach($.each(index, value))
- 連想配列を扱っていく中で、使うとスマートなことが分かった
- 使い方も単純でよかった
- .cssメソッド
- スタイル変更
- .attrメソッド
- display:none;（.show, .hide）
- removeはなるべく使わない方がいい
- 検証モードでセレクタをコピーできる機能
- typeof（属性・propertyの確認）
- コンソールモードでのデバック（コンソールログや、実際に関数を動かすなど）
### 難しかった、よくわからなかったメソッド
- map
- promise
- grid (レスポンシブ)
- 使い方が分からなくて難しかった
- ajax 使い方が難しい
### コード記述MVP（記述がよかった、短くかけた、みやすかったなど..）
- 北原さん
### 検索MVP
- 勝又さん
Google Drive
Gist
Clipboard
Sign in with Wallet
