Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[3주차] velog 클론코딩 (JS) #2

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[3주차] velog 클론코딩 (JS) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5a2cb0a
initial commit : 벨로그 클론코딩
JaeHyun137 Oct 6, 2023
4f91986
feat : dropdown 구현
JaeHyun137 Nov 1, 2023
c764330
feat : 카드 클릭시 이미지 원본이 나오는 모달창 구현
JaeHyun137 Nov 1, 2023
e63a2f5
feat
JaeHyun137 Nov 1, 2023
f7487f1
feat : 새 글 작성 아이콘 클릭시 연결되는 태그 추가/삭제 페이지 구현
JaeHyun137 Nov 2, 2023
1f02963
chore : modal창 이미지 변경 + 포스팅 수 늘림
JaeHyun137 Nov 3, 2023
59fae14
feat : 메뉴 클릭 시 글자색 변화 구현
JaeHyun137 Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 261 additions & 0 deletions index.html
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

web 파트 한승연입니다! 저도 드롭박스 클릭 할 때 리스트가 기존 포스팅들을 밀어버려서 재현님이 어려웠다고 올리신 점에 공감이 되었습니다 ㅜㅜ

Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="main1.js"></script>
<script defer src="modal.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/688ec50e73.js" crossorigin="anonymous"></script>

</head>
<body>
<header>

<h1>velog </h1>
<button><i class="fa-solid fa-magnifying-glass"></i>

</button>
<button> <i class="fa-solid fa-user"></i>
</button>
<!--새 글 작성 아이콘 클릭시 새 html 파일로 이동!-->
<button><i class="fa-solid fa-pen-nib" onclick="location.href='write.html'"></i>
</button>
</header>
<nav>
<div class="dropdown-label">

<span ></span>
</div>
<div class="dropdown">
<button class="dropbtn">
<span class="dropbtn_icon"></span>
<span class="dropbtn_content">오늘</span>
<span class="dropbtn_click" style="font-family: Material Icons; font-size : 16px; color : #3b3b3b; float:right;"
onclick="dropdown()">arrow_drop_down</span>
</button>
<div class="dropdown-content">
<span class="dropdown_click">
<div class="date" onclick="showMenu(this.innerText)">오늘</div>
<div class="date" onclick="showMenu(this.innerText)">이번주</div>
<div class="date" onclick="showMenu(this.innerText)">이번달</div>
<div class="date" onclick="showMenu(this.innerText)">올해</div>
</span>
</div>
</nav>
<main>
<article>
<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image" src = "모달이미지.PNG">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>


</ul>

<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>

</ul>
<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image" src = "모달이미지.PNG">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>


</ul>
</article>

</main>

</body>
</html>
63 changes: 63 additions & 0 deletions main1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
window.onload=()=>{
document.querySelector('.dropbtn_click').onclick = ()=>{
dropdown();
}
document.getElementsByClassName('date').onclick = ()=>{
showMenu(value);
};
dropdown = () => {
var v = document.querySelector('.dropdown-content');
var dropbtn = document.querySelector('.dropbtn')
v.classList.toggle('show');
dropbtn.style.borderColor = 'rgb(94, 94, 94)';
}

showMenu=(value)=>{
var dropbtn_icon = document.querySelector('.dropbtn_icon');
var dropbtn_content = document.querySelector('.dropbtn_content');
var dropbtn_click = document.querySelector('.dropbtn_click');
var dropbtn = document.querySelector('.dropbtn');

dropbtn_icon.innerText = '';
dropbtn_content.innerText = value;
dropbtn_content.classList.contains('clicked');

dropbtn.style.borderColor = '#3992a8';

}
window.onclick= (e)=>{
if(!e.target.matches('.dropbtn_click')){
var dropdowns = document.getElementsByClassName("dropdown-content");

var dropbtn_icon = document.querySelector('.dropbtn_icon');
var dropbtn_content = document.querySelector('.dropbtn_content');
var dropbtn_click = document.querySelector('.dropbtn_click');
var dropbtn = document.querySelector('.dropbtn');


var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}



}
}

const dateElements = document.querySelectorAll('.dropdown_click .date');

function select(liEl) {
dateElements.forEach((el) => el.classList.remove('click'));
liEl.classList.add('click');
}

dateElements.forEach((dateElement) => {
dateElement.addEventListener('click', (e) => {
select(e.target);
});
});
18 changes: 18 additions & 0 deletions modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
function openModal() {
var modal = document.getElementById("modal");
var modalImage = document.getElementById("modal-image");
var image = document.getElementById("modal-image"); //

modal.style.display = "block";
modalImage.src = image.src;


// 스크롤을 막기 위한 추가
document.body.style.overflow = "hidden";
}

function closeModal() {
var modal = document.getElementById("modal");
modal.style.display = "none";
document.body.style.overflow = "auto";
}
1 change: 1 addition & 0 deletions parkJaeHyun
Open in desktop
Submodule parkJaeHyun added at d9e77b
Loading