728x90
모달창을 만들고 나니 글이 랜덤하게 나타나는 백엔드와의 연결이 남았었고,
디자인보단 기능구현이 시급한 상황이었다.
이름과 질문에 내용을 적으면 상단에 글이 구성되게 구현
해결에 쓸법한 내용을 크롤링한 것들이 랜덤으로 송출되게 아래쪽으로 나오게 구현
하나하나 신경써야 될부분이 너무 많았고
결국 팀원들의 도움으로 해결했음.
<script>
$(document).ready(function () {
get_random();
});
<!-- GET 요청하기 ajax 코드 -->
function get_random() {
$.ajax({
type: "GET",
url: "/solution",
data: {},
success: function (response) {
let solution = response['random_solution']
for (let i = 0; i < solution.length; i++) {
let text = solution[i]['solution']
let temp_html = `<div class="que">${text}</div>`
$('#random').append(temp_html)
}
}
})
}
</script><head>안에 들어가야되는 코드 ajax 콜 방식으로 구현 했는데
이 부분은 다시 공부를 많이 해야되는 부분
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--og태그-->
<meta property="og:title" content="해결의 책" /><!--og태그 제목-->
<meta property="og:description" content="고민? 고민하지마!" /><!--og태그 내용-->
<meta property="og:image" content="{{ url_for('static', filename ='ogimage.jpg') }}"<!--og태그 사진 이미지파일은 static폴더 안에-->
<!-- Bootstrap CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--css 링크-->
<link rel="stylesheet" href="/static/style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<title>해결의 책</title>
<script>
$(document).ready(function () {
get_random();
});
<!-- GET 요청하기 ajax 코드 -->
function get_random() {
$.ajax({
type: "GET",
url: "/solution",
data: {},
success: function (response) {
let solution = response['random_solution']
for (let i = 0; i < solution.length; i++) {
let text = solution[i]['solution']
let temp_html = `<div class="que">${text}</div>`
$('#random').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<div class="container"> <!-- 큰 틀 -->
<div class="leftPage"> <!-- 책 왼쪽 페이지 -->
<div class="leftleft"> <!-- 책 왼쪽페이지의 책갈피 부분 -->
<header>
<p class="solutionTitle"></p> <!-- 책갈피 -->
<p class="solutionText">해결의 책</p> <!-- 책갈피 위 글씨 -->
</header>
</div>
<div class="leftright"> <!-- 책 왼쪽 페이지의 글씨 부분 -->
<div class="leftup font1"> <!-- 책 왼쪽 페이지의 글씨 부분 중 맨 위 -->
내 마음을<br> 나도<br> 모를 때
</div>
<div class="leftmid font1"> <!-- 책 왼쪽 페이지 글씨 부분 중 중간 -->
고민에<br> 답이<br> 필요할 때
</div>
<div class="leftdown"> <!-- 책 왼쪽 페이지 글씨 부분 중 맨 아래 -->
무엇이든<br> 물어보세요
</div>
</div>
</div>
<div class="rightPage"> <!-- 책 오른쪽 페이지 -->
<main>
<div class="textBox"> <!-- 이름, 고민 입력 부분에 적용될 스타일 -->
<div class="textName"> <!-- 책 오른쪽페이지 이름 입력하는 부분 -->
<p class="q-color">이름:</p>
<p><input type="text" class="inputName" id="inputName"></p> <!-- 이름 입력칸 -->
</div>
<div class="textGomin"> <!-- 책 오른쪽페이지 고민 입력하는 부분 -->
<p class="q-color">질문:</p>
<p>
<div class="form-group"> <!-- 고민 입력칸 -->
<textarea type="text" class="form-control inputGomin" id="inputGomin" rows="3"></textarea>
</div>
</p>
</div>
</div>
<div class="right-up font1"> <!-- 책 오른쪽페이지 오른쪽 끝 글씨 부분 -->
당신의 마음이<br> 편안해지길 바랍니다
</div>
<!-- 고민해결 버튼 -->
<button type="button" onclick="btnClick()" class="btn" id="modal_btn"><span class="btnText">결과보기</span></button>
</main>
</div>
</div>
<!-- The Modal -->
<div class="modal">
<div class="modal_content"
title="클릭하면 창이 닫힙니다.">
<div class="popup_box"> <!--팝업 박스를 감싸는 부분-->
<!--"(이름)님의 생각"이 들어가는 부분-->
<p class="name_box_name"><span class="name_box" id="name_modal"></span> 님의 생각</p>
<!--해답 부분들을 감싸는 부분-->
<div class="main_box">
<!--"(질문)에 대한 해답"이 들어가는 부분-->
<div class="que_wrap">
<p class="question_modal" id="question_modal"></p>
<div class="question_que">에 대한 해답</div>
</div>
<!--img 삽입구간-->
<div class="img_box"><img src="https://picsum.photos/420/250" class="img_box_1" alt="해답"></div>
<!--해답을 넣을 구간-->
<div id="random" class="que"></div>
</div>
</div>
<script type="text/javascript">
function btnClick() {
let name = document.getElementById("inputName").value; <!-- 이름 입력한 것 가져오기 -->
let question = document.getElementById("inputGomin").value; <!-- 고민 입력한 것 가져오기 -->
document.getElementById("name_modal").innerText = `${name}`; <!-- 가져온 이름 모달창에 띄우기 -->
document.getElementById("question_modal").innerText = `${question}`; <!-- 가져온 고민 모달창에 띄우기 -->
}
$(function () {
<!-- 고민해결 버튼 눌렀을 때 모달 나타나면서 실행될 코드들 -->
$("#modal_btn").click(function () {
$(".modal").fadeIn(); <!-- 모달 나타남 -->
});
<!-- 모달 창 눌렀을 때 -->
$(".modal_content").click(function () {
$(".modal").fadeOut(); <!-- 모달 사라짐 -->
location.reload(); <!-- 전부 새로고침 -->
});
});
</script>
</div>
</div>
</body>
</html>전체 코드는 위와 같다.
다들 엄청 고생고생하고 만든 소중한 결과물
이번에 챌린지를 끝내면서 공부의 필요성을 다시한번 느끼게 되었고
"와 나 좀 하는듯?" 하고 느꼈던 얇팍한 생각도 다 박살내버리는 그런 챌린지였던듯 하다.
위 영상은 완성된 영상임
728x90
'개발 교육' 카테고리의 다른 글
| ChatGPT야 프로그램 좀 만들어줄래? (2) | 2023.12.03 |
|---|---|
| 스파르타 코딩 메이킹챌린지 개발일지-1 (0) | 2021.12.14 |
| [왕초보]비개발자를 위한 웹개발 종합반(프로그래밍실무, 풀스택) (0) | 2021.11.04 |
| 스파르타 코딩 웹개발 7일차 (0) | 2021.10.31 |
| 스파르타 코딩 웹개발 6일차 (0) | 2021.10.30 |
