어제한 작업을 이어서 하기로 했다. 먼저, 더보기 버튼을 눌렀을때 카드가 보였다 안보였다 하는걸 만드려고 했는데, 그게 toggle란걸 알고 있어서 하려 했는데 안되는게 아닌가? 그런데 알고보니
function openclose{} 이렇게 ()를 넣지 않았다는걸 깨달았다. 어제 있었던 일도 그렇고 하나를 빼먹고 안되는 일이 코딩의 세계에선 정말 비일비재한것 같다.
그리고 이런식으로 버튼 눌러쓰을때 사이트가 변한다! 이런걸 하려면 타이틀 밑에 제이쿼리도 넣어야 작동한다.
이게 제이쿼리다.
버튼 눌렀을 때 사라지게 하는법
<script>
function openclose(){
$('#cards').toggle();
}
</script>
이렇게 하면 오픈클로즈를 누르면 카드가 토글, 즉, 사라진다.
<button onclick="openclose()" type="button" class="btn btn-outline-primary">더보기</button>
그리고 오픈클로즈를 버튼에 oneclick 뒤에 집어넣는다.
<div class="mycards" id="cards">
카드에 id를 부여한다. 그럼 이제 버튼 누르면 사라졌다 나타난다. 기억해 두자.
그런데 이러면 원래 존재하는걸 버튼을 눌럿을때 사라지게 하는것이고, 안보이다가 버튼을 눌렀을때 보게 하려면
$(document).ready(function () {
$('#cards').hide();
});
이걸 토글 위에 넣어야 한다고 한다. 처음알았다.
$(document).ready(function ()
이 부분이 바로 자동으로 실행하라는 명령어다. 그래서 자동으로 숨기는것이다.
그리고 카드를 눌렀을때 새로운 페이지가 뜨게해야 한다고 한다. 그것도 각각! 그건, 확실히 어려운 일인것 같아 보인다.
그러면 카드 갯수만큼 펑션을 만들고 각각 카드에 onclick를 추가하면 될것같다.
각 카드의 시작인 col 뒤에 onclick를 추가해봤는데...
안됬다! 역시 다른 버튼을 추가해야만하나? 카드 전체를 버튼으로 반드는것부터 해야할것같다.
<div class="col" button class="btn btn-outline-info" onclick="openCardDetails(1)"></button>
역시 버튼을 만들고 그 뒤에 onclick를 했더니 됬다!!
그리고, 다른사이트 url가져와서 합치는건 이걸 오픈api라고 한다고 하는데, 아마도 그걸 이용해서 열린 사이트의 정보를 다시 카드에 붙여넣는걸 만들어야 할것같다. 어렵다...
그리고 등록하기 버튼을 눌렀을때 새 창이 뜨게 하려면,
<button onclick="openwindow()" type="button" class="btn btn-outline-info">등록하기</button>
구역설정하고 스타일 수정할거 하고
function openwindow() {
window.open('주소 넣기html', '_blank');
}
이러면 등록하기 눌렀을때 해당 주소로 이동한다.
오픈 api 그걸 이용하려면 예시로,
function hey() {
fetch(url).then(res => res.json()).then(data)}
이걸 타이틀 밑에 박아놔야 작동을 한다고 한다.
한줄에 두개의 칸을 만드려면,
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="이름" value="">
<label for="floatingInputGrid">이름</label>
</div>
</div>
<div class="col-md">
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="MBTI"
value="">
<label for="floatingInputGrid">MBTI</label>
</div>
</div>
</div>
</div>
이것을 쓰면 된다.
그리고 아무리 편집을 해도 새로고침만 하면 다 사라지기 때문에 그걸 막으려면 파이어베이스를 이용해서
<script type="module">
// Firebase SDK 라이브러리 가져오기
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDzEZ_ReCXEh_90-ptWchHb9SJs8RWEvhk",
authDomain: "spartaproject-1ecec.firebaseapp.com",
projectId: "spartaproject-1ecec",
storageBucket: "spartaproject-1ecec.appspot.com",
messagingSenderId: "313832348507",
appId: "1:313832348507:web:7ec5e6cc415a897c8f187e",
measurementId: "G-E7DHMQWS2X"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
이래야만이 이제 서버에 저장이 되서 편집할수 있게된다. 문제는 module이 있으면 onclick이 먹통이 된다는 것이다.
그것을 해제하는것은 바로
$("#id").click(async function () {
let doc = {};
await addDoc(collection(db, "콜렉션이름"), doc);
})
비주얼 스튜디오에 새 파일을 추가했는데 웬지 알트 비를 눌러도 화면이 안떠서 고생했는데 ㅋㅋㅋㅋ
.html이 아니라 그냥 html을 써섴ㅋㅋㅋㅋㅋ 코딩은!! 오타가!!!! 중요하다고!!!!!!
어쨋든 module 안에서 다시 버튼을 작동시켜야한다.
<button onclick="openclose()" type="button" class="btn btn-outline-primary">더보기</button>
이것을
<button id="firstbtn" type="button" class="btn btn-outline-primary">더보기</button>
이렇게 바꾸고,
$("#firstbtn").click(async function () {
})
위에있던 저녀석을 이렇게
function openclose() {
$('#cards').toggle();
}
에서 이놈은 이제 쓸모 없으니 내용물을 달러녀석 안에 넣는다.
$("#firstbtn").click(async function () {
$('#cards').toggle();
})
그럼 완료!
다른 온클릭에도 반복한다.
$("#secbtn").click(async function () {
window.open('file:///C:/Users/%ED%99%8D%EC%84%B1%ED%98%84/Desktop/%EB%91%90%EB%A3%A8%EB%AF%B8/sparta/%EC%83%88%EB%A1%9C%20%EC%8B%9C%EC%9E%91/%EC%A7%84%EC%A7%9C%EB%93%B1%EB%A1%9D.html', '_blank');
})
<button id="secbtn" type="button" class="btn btn-outline-info">등록하기</button>
이렇게 등록하기 버튼을 눌렀을떼 링크가 정상적으로 작동하게 만든다.
<div class="col" button class="btn btn-outline-info" onclick="openCard(1)"></button>
이것도
<div class="col" button class="btn btn-outline-info" id="tribtn"></button>
$("#tribtn").click(async function () {
window.open('카드상세페이지.html', '_blank');
})
이걸로 모든 버튼은 정상 작동하게 되었다.