Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 0315452d by Yutaka Kobayashi
Options

Co-authored-by: McTex <McTex@users.noreply.github.com>

1 parent 04565349
Expand all
Inline Side-by-side
Showing with 335 additions and 35 deletions
develop/.tmp/index.html
......@@ -70,19 +70,22 @@
<div class="novelList__content">
<h2 class="novelList__title">吾輩は猫である</h2>
<p class="novelList__author">夏目漱石</p>
</div><a class="novelList__button" href="">詳細を見る</a>
</div>
<button class="novelList__button" type="button">詳細を見る</button>
</li>
<li class="novelList__item">
<div class="novelList__content">
<h2 class="novelList__title">銀河鉄道の夜</h2>
<p class="novelList__author">宮沢賢治</p>
</div><a class="novelList__button" href="">詳細を見る</a>
</div>
<button class="novelList__button" type="button">詳細を見る</button>
</li>
<li class="novelList__item">
<div class="novelList__content">
<h2 class="novelList__title">風の歌を聴け</h2>
<p class="novelList__author">村上春樹</p>
</div><a class="novelList__button" href="">詳細を見る</a>
</div>
<button class="novelList__button" type="button">詳細を見る</button>
</li>
</ul>
</div>
......
develop/src/assets/js/home.js
import { Modal } from "./Modal.js";
import { Fade } from "./fadeIn.js";
const modal = new Modal();
modal.openModal();
// const modal = new Modal();
// modal.openModal();
const fade = new Fade();
fade.fadeIn();
// const fade = new Fade();
// fade.fadeIn();
// const variables1 = "e";
// const variables1 = "e";
class Home {
constructor() {
// 初期化時に必ず実行される関数
new Modal();
// new Fade();
}
}
document.addEventListener("DOMContentLoaded", () => {
new Home();
});
// // グローバル汚染をしないようにする
// class Home1 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// class Home2 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// $(function () {
// const variables1 = 1;
// });
// window.addEventListener("DOMContentLoaded", () => {
// const variables1 = 1;
// });
develop/src/assets/js/modal copy.js 0 → 100644
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
button: document.querySelectorAll(".novelList__button"),
modalBack: document.querySelector(".modalBackground"),
modal: document.querySelectorAll(".modal"),
closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
}
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
// openModal() {
// // モーダルを非表示にする
// closeButton.addEventListener("click", () => {});
// function menuClick() {
// body.classList.remove(this.openClassName);
// modalBack.classList.remove(this.openClassName);
// const modalElements = document.querySelector(".modal");
// modalElements.forEach((item) => {
// item.classList.remove(this.openClassName);
// });
// }
// closeTrigger.forEach((item) => {
// item.addEventListener("click", menuClick);
// });
// }
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal.js
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
openModal() {
const body = document.querySelector("body");
const button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelector(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", (e) => {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
button: document.querySelectorAll(".novelList__button"),
modalBack: document.querySelector(".modalBackground"),
modal: document.querySelectorAll(".modal"),
closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
});
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
openModal() {
// モーダルを非表示にする
closeButton.addEventListener("click", () => {});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
body.classList.remove(this.openClassName);
modalBack.classList.remove(this.openClassName);
const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => {
item.classList.remove("open");
item.classList.remove(this.openClassName);
});
}
const closeTrigger = document.querySelector(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal_.js 0 → 100644
export class Modal {
openModal() {
const body = document.querySelector("body");
const button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelector(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", (e) => {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
});
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
develop/src/assets/js/second.js 0 → 100644
import { Fade } from "./fadeIn.js";
// クラス
class Second {
constructor() {
new Fade();
}
}
// 関数
const second = () => {
new Fade();
};
document.addEventListener("DOMContentLoaded", () => {
// クラス
new Second();
// 関数
second();
});
develop/src/html/index.pug
......@@ -40,19 +40,19 @@ block main
.novelList__content
h2.novelList__title 吾輩は猫である
p.novelList__author 夏目漱石
a(href="").novelList__button 詳細を見る
button(type="button").novelList__button 詳細を見る
li.novelList__item
.novelList__content
h2.novelList__title 銀河鉄道の夜
p.novelList__author 宮沢賢治
a(href="").novelList__button 詳細を見る
button(type="button").novelList__button 詳細を見る
li.novelList__item
.novelList__content
h2.novelList__title 風の歌を聴け
p.novelList__author 村上春樹
a(href="").novelList__button 詳細を見る
button(type="button").novelList__button 詳細を見る
.content
.contentBox.--music
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!