Skip to content

Commit

Permalink
[FEAT] 시작하기 및 질문
Browse files Browse the repository at this point in the history
  • Loading branch information
@bestlalala
bestlalala committed Apr 10, 2023
1 parent 81d52f8 commit 086ac90
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 49 deletions.
Binary file added img/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/meditate.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/start_btn_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 18 additions & 26 deletions question.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,55 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
<link rel="stylesheet" href="questionstyle.css">
<title>'오늘의 쉼표'</title>
</head>
<body>

<article class="start">
<article class="q_title">
<h2>'오늘의 쉼표'</h2>
<button type="button" class="btn btn-primary mt-5" onclick='start();'>시작하기</button>
</article>
<article class="question">
<div class="progress mt-5">
<!-- <div class="progress mt-5">
<div class="progress-bar" role="progressbar" style="width: calc(100/12*3%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2 id="title" class="text-center mt-5">문제</h2>
</div> -->
<h2 id="title" class="text-center mt-5">"오늘 기분은 어떤가요?"</h2>

<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" name="answer" id="answer" rows="3"></textarea>
<textarea class="form-control" id="textarea_answer" name="answer" rows="3"></textarea>
</div>
<button onclick="next()">다음으로</button>
<button class="next_btn" onclick="next()">다음으로</button>

</article>

<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
var num = 1;
var num = 2;
var q = {
1: {"title": "오늘 기분은 어떤가요?"},
2: {"title": "오늘 가장 기뻤던 일은 무엇인가요?"},
3: {"title": "오늘 가장 보랍찼던 일은 무엇인가요?"},
4: {"title": "오늘 후회되는 일이 있나요?"},
5: {"title": "내일은 무엇을 하고 싶나요?"}
}

function start() {
$(".start").hide();
$(".question").show();
$("#answer").show();
next();
1: {"title": '"오늘 기분은 어떤가요?"'},
2: {"title": '"오늘 가장 기뻤던 일은<br/>무엇인가요?"'},
3: {"title": '"오늘 가장 보람찼던 일은<br/>무엇인가요?"'},
4: {"title": '"오늘 후회되는 일이<br/>있나요?"'},
5: {"title": '"내일은 무엇을 <br/>하고 싶나요?"'}
}

function next() {
if (num == 6) {
$(".question").hide();
// $("#answer").hide();
$("#textarea_answer").hide();
$(".result").show();

// 답변 모아서 보여주기

} else {
$(".progress-bar").attr('style', 'width: calc(100/5*'+num+'%)');
// $(".progress-bar").attr('style', 'width: calc(100/5*'+num+'%)');
$("#title").html(q[num]["title"]);
var inputValue = $("#answer").val();
// var inputValue = document.getElmentById('#answer');
var inputValue = $("#textarea_answer").val();
console.log(inputValue)
$("#answer").val('');
$("#textarea_answer").val('');
num++;
}
}
Expand Down
121 changes: 121 additions & 0 deletions questionstyle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
* {
font-family: 'Song Myung', serif;
}

article {
display: flex;
flex-direction: column;
}

.result {
display: none;
}

html, body {
min-height: 844px;
max-width: 390px;
}

body {
background-image: url('./img/background.jpg');
background-size: 390px 844px;
background-repeat: no-repeat;
margin: 0 35px;
}

button {
max-width: 320px;
vertical-align: middle;
background-color: #FFC480;
}

.splash_title {
position: absolute;
width: 190px;
height: 91px;
left: 53px;
top: 109px;
font-weight: 400;
font-size: 40px;
line-height: 50px;

color: #000000;
}

.q_title {
position: absolute;
width: 164px;
height: 26px;
left: 67px;
top: 81px;

font-family: 'JejuMyeongjo';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 24px;

color: #000000;
}

#meditate {
position: absolute;
width: 367px;
height: 525px;
left: 14px;
top: 281px;
}
.start_btn {
border: none;
position: absolute;
width: 302px;
height: 59px;
left: 42px;
top: 750px;

background: #FFC480;
border-radius: 30px;
}

.next_btn {
border: none;
position: absolute;
width: 302px;
height: 59px;
left: 42px;
top: 750px;

background: #FFC480;
border-radius: 30px;
}

#title {
position: relative;
top: 185px;

font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
/* or 136% */

display: flex;
align-items: center;
text-align: center;
vertical-align: middle;

color: #000000;
}

#textarea_answer {
position: absolute;
width: 317px;
height: 211px;
left: 35px;
top: 328px;

background: #FFDAAF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 30px;
border: none;
}
28 changes: 28 additions & 0 deletions splash.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Song+Myung&display=swap" rel="stylesheet">
<link rel="stylesheet" href="questionstyle.css">
<title>'오늘의 쉼표'</title>
<style>
body {
position: relative;
height: 844px;
background-repeat: no-repeat;
margin: 0 35px;
background: linear-gradient(180deg, #FFC480 0%, #FCFCFC 89.06%, rgba(233, 254, 236, 0) 99.96%, rgba(255, 255, 255, 0.0885417) 99.97%);
}

</style>
</head>
<body>
<h2 class="splash_title">오늘의<br/>쉼표</h2>
<img id="meditate" src="./img/meditate.png"/>
<button type=button class="start_btn" onclick="location.href='question.html'">시작하기</button>
</body>
</html>
23 changes: 0 additions & 23 deletions style.css
View file

This file was deleted.

0 comments on commit 086ac90

Please sign in to comment.