よさこい祭り２０２３参加チーム一覧
https://yosakoi-video.com/yosakoi2023/ JSONデータ有り🐜
//yosakoi-2023
let hasData = async()=>{
let response = await fetch("./assets/yosakoi2023.json");
if(!response.ok){
throw new Error("E");
}
let data = await response.json();
return data;
};
(async()=>{
let data = await hasData();
var str = "<table class='table table-striped'>"
str+= `<tr><th>チーム名</th><th>受付番号</th></tr>`;
str+= data.map(d=>{
return `<tr><td>${d.name}</td><td>${d.no}</td></tr>`;
}).join("");
str = str + "</table'>";
document.getElementById("yosakoi-2023").innerHTML = str;
})();wordpressにも記載していきます。
wordpressにも記載していきます。このコードはnoteにも記載したコードになります。即時関数を使用した形のプログラミングコードです。
document.getElementById("rectangle").innerHTML = (() => {
let color = ["#17dad1", "#2199ff", "#ff215e", "#21ffeb", "#21ff5b", "#8ba091", "#dab017", "#da17cb", "#ffffff"];
let str = "";
for (key in color) {
str += "<span style='color:" + color[key] + ";' class='color' data-color='" + color[key] + "'>■</span> ";
}
return str;
})();
let object = document.querySelectorAll(".color");
for (const key in object) {
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
element.addEventListener("mouseover", function(e) {
document.body.style.backgroundColor = this.getAttribute("data-color");
});
}
}RSS