구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
e8d62e57 1 parent 41dac5fe

Update Search Option By Calories 

Users can set up search calories limit by checkbox.
Inline Side-by-side
Showing 13 changed files with 78 additions and 137 deletions
/.vscode
/node_modules
/sessions
......@@ -38,11 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
//첫 페이지
app.get('/',(req,res)=>{
<<<<<<< HEAD
let page = getFirstPage(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req));
=======
let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
res.send(page);
});
......@@ -133,8 +129,8 @@ const authInfo = (req)=>{
// naver 로그인
app.get('/naverlogin', passport.authenticate('naver'));
passport.use('naver',new NaverStrategy({
clientID: 'CGVVomc0bhMhzfzbytK2',
clientSecret: 'XHylcjnZxG',
clientID: 'fill your own ID',
clientSecret: 'fill your own secret',
callbackURL: "http://localhost:3000/",
svcType: 0,
authType: 'reauthenticate' // enable re-authentication
......@@ -151,7 +147,7 @@ passport.use('naver',new NaverStrategy({
// kakao 로그인
app.get('/kakaologin', passport.authenticate('kakao-login'));
passport.use('kakao-login', new KakaoStrategy({
clientID: '8a854307a99092b4eeeff5e4a79c0ac0',
clientID: 'fill your own ID',
callbackURL: 'http://localhost:3000/'
},
function (accessToken, refreshToken, profile, done) {
......@@ -323,7 +319,7 @@ const getLoginButton = (auth) =>{
.span-or {
display: block;
position: absolute;
left: 50%;
left: 50%;y
top: -2px;
margin-left: -25px;
background-color: #fff;
......@@ -399,7 +395,6 @@ const getLoginButton = (auth) =>{
//첫 페이지 화면
const getFirstPage =(title, content, auth) =>{
<<<<<<< HEAD
return `
<!DOCTYPE html>
<html lang="en">
......@@ -545,76 +540,3 @@ const getFirstPage =(title, content, auth) =>{
</html>
`;
}
=======
return `
<!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">
<title>Passport Example</title>
<style>
body{
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1614548539924-5c1f205b3747?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
h1 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
text-align: center;
font-size: 5em;
font-family: cursive;;
}
p {
position: relative;
left: 50%;
top: 47%;
transform: translate(-50%, -47%);
font-size: 3em;
text-align: center;
}
div {
position: relative;
font-size: 1.3em;
text-align: center;
}
.box1{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box2{
position: relative;
left: 50%;
top: 54%;
transform: translate(-50%, -54%);
}
</style>
</head>
<body>
<h1>${title}</h1>
<p>${content}</p>
<div class="box1">
${auth}
</div>
<div class="box2">
<input type="button" value="레시피 보러가기" onClick="movepage()"/>
</div>
<script type="text/javascript">
function movepage(){
location.href="main";
}</script>
</body>
</html>
`;
}
>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
......
......@@ -31,21 +31,7 @@ form{
width:100%;
margin-left:265px;
}
/*form input{
width:80%;
padding:10px;
border:none;
outline:none;
font-size:1.8rem;
display:inline-block;
}
form ion-icon{
width:9%;
font-size:3rem;
margin-left:10px;
margin-top:15px;
color:rgb(75,75,75);
}*/
.search-box{
margin-left:-10px;
margin-top:10px;
......@@ -69,12 +55,19 @@ section{
font-size:4rem;
color:black;
margin-bottom:30px;
<<<<<<< HEAD
}
=======
/*form input{
width:80%;
padding:10px;
border:none;
outline:none;
font-size:1.8rem;
display:inline-block;
}
<<<<<<< HEAD
>>>>>>> feature/youtube
=======
>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
>>>>>>> feature/youtube
form ion-icon{
width:9%;
font-size:3rem;
margin-left:10px;
margin-top:15px;
color:rgb(75,75,75);
}*/
\ No newline at end of file
......
......@@ -14,6 +14,34 @@
<input id="name" type="text" placeholder="Search Your Recipe...">
<ion-icon name="search"></ion-icon>
</form>
<p>
<input type='checkbox'
name='animal'
value=800
onclick='getCheckboxValue(event)'/> 800
<input type='checkbox'
name='animal'
value=1200
onclick='getCheckboxValue(event)'/> 1200
<input type='checkbox'
name='animal'
value=1600
onclick='getCheckboxValue(event)'/> 1600
<input type='checkbox'
name='animal'
value=2000
onclick='getCheckboxValue(event)'/> 2000
</p>
<!-- <select id="selectBox">
<option value="800" >800</option>
<option value="1200">1200</option>
<option value="1600" >1600</option>
</select> -->
<div class="search-result">
<!--<div class="item">
<img src="./0.jpg" alt="">
......@@ -26,16 +54,9 @@
</div>
</div>
</section>
<script src="./main.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="./main.js"></script>
</body>
<<<<<<< HEAD
</html>
=======
</html>
<<<<<<< HEAD
>>>>>>> feature/youtube
=======
>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
>>>>>>> feature/youtube
......
var caloriesLimit=9999;
function getCheckboxValue(event) {
if(event.target.checked) {
caloriesLimit = event.target.value;
}else {
caloriesLimit=9999;
}
}
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
const APP_ID = '0a67fbc1';
const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
const APP_ID = 'fill your own ID';
const APP_KEY = 'fill your own key';
searchForm.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('한글자 이상 입력해주세요');
......@@ -30,22 +39,15 @@ function boxinfo(results){
const object = {
cal: result.recipe.calories.toFixed(0)
};
if(result.recipe.calories>=caloriesLimit){}
else{
boxsinfo +=
`
<style>
.item{
display:flex;
flex-wrap:wrap;
margin-left:50px auto;
}
.container{
display:flex;
flex-wrap:wrap;
margin-left:50px auto;
}
<!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
<!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
</style>
<div class="item">
<img src="${result.recipe.image}" alt="">
<div class="flex-container">
......@@ -59,7 +61,7 @@ function boxinfo(results){
return `<p style="color:red">${cal}</p>`;
}
else if(cal >= 1000 && cal < 2000){
return `<p style="color:yellow">${cal}</p>`;
return `<p style="color:black">${cal}</p>`;
}
else {
return `<p style="color:green">${cal}</p>`;
......@@ -67,7 +69,7 @@ function boxinfo(results){
})(object.cal)
}
</div>
`
`}
})
searchResultDiv.innerHTML = boxsinfo;
}
\ No newline at end of file
......
......@@ -6,7 +6,7 @@
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("YCGVVomc0bhMhzfzbytK2", "http://localhost:3000/");
var naver_id_login = new naver_id_login("fill your own ID", "http://localhost:3000/");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
......
......@@ -8,7 +8,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="미국 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="중국 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="프랑스 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="이탈리아 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="일본 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="한국 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let apikey = "fill your own key";
let keyword ="멕시코 음식";
......