구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
Heeyeon
b256d819 1 parent ccd72f86

Making files to show various foreign foods videos and Modifying intro page

Expand all
Inline Side-by-side
Showing 15 changed files with 510 additions and 88 deletions
......@@ -6,7 +6,7 @@ const fs=require('fs');
const router = express.Router()
const fileStore = require('session-file-store')(session);
const app = express();
var flash = require('connect-flash');
var flash = require('connect-flash');
var NaverStrategy = require('passport-naver').Strategy;
var KakaoStrategy = require('passport-kakao').Strategy;
......@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
//첫 페이지
app.get('/',(req,res)=>{
let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req));
let page = getFirstPage(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req));
res.send(page);
});
......@@ -51,13 +51,18 @@ app.get('/main',(req,res)=>{
res.sendFile(__dirname+'/main/main.html')
})
//youtube html
app.use(express.static(__dirname + '/youtube'));
/*--------------------로그인 처리---------------------- */
//로그인 페이지
app.get('/login',(req,res)=>{
let page = getLoginButton(`<a href="/">뒤로가기</a>`);
res.send(page);
res.send(page);
});
......@@ -75,7 +80,7 @@ passport.use(new LocalStrategy({
console.log(user);
//아이디가 다를때
if (id !== user.email){
if (id !== user.email){
//alert("존재하는 아이디가 없습니다.")
return done(null, false, { message: '아이디가 다르다' });}
//비밀번호가 다를때
......@@ -89,18 +94,18 @@ passport.use(new LocalStrategy({
//로그인 처리 (Passport)
app.post('/login',
passport.authenticate('local', {
passport.authenticate('local', {
//성공시, 메인페이지 이동
//실패시 로그인 페이지 이동
successRedirect: '/',
failureRedirect: '/login',
badRequestMessage : 'Missing username or password.',
failureFlash: true
failureFlash: true
}));
//로그 아웃 처리
app.get('/logout',(req,res)=>{
//passport 정보 삭제
req.logout();
//서버측 세션 삭제
......@@ -124,20 +129,20 @@ const authInfo = (req)=>{
// naver 로그인
app.get('/naverlogin', passport.authenticate('naver'));
passport.use('naver',new NaverStrategy({
clientID: 'CGVVomc0bhMhzfzbytK2',
clientSecret: 'XHylcjnZxG',
clientID: 'CGVVomc0bhMhzfzbytK2',
clientSecret: 'XHylcjnZxG',
callbackURL: "http://localhost:3000/",
svcType: 0,
authType: 'reauthenticate' // enable re-authentication
},
function(accessToken, refreshToken, profile, done) {
},
function(accessToken, refreshToken, profile, done) {
var _profile = profile._json;
console.log(_profile.id);
console.log(_profile.properties.nickname);
}
}
));
// kakao 로그인
app.get('/kakaologin', passport.authenticate('kakao-login'));
......@@ -230,7 +235,7 @@ app.get('/join',(req,res)=>{
</style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
......@@ -254,12 +259,13 @@ app.get('/join',(req,res)=>{
</button>
</form>
</html>
`,'<a href="/login">뒤로가기</a>');
res.send(page);
});
//포트 연결
app.listen(3000,()=>console.log(`http://localhost:3000`));
......@@ -280,17 +286,9 @@ const getPage = (title, content, auth) =>{
${auth}
<h1>${title}</h1>
<p>${content}</p>
<div>
<input type="button" value="page move" onClick="movepage()"/>
</div>
<script type="text/javascript">
function movepage(){
location.href="main";
}</script>
</body>
</html>
`
`;
}
//로그인 버튼
......@@ -378,7 +376,7 @@ const getLoginButton = (auth) =>{
<button type="submit" class="btn btn btn-primary">
<a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
</form>
</div>
</div>
</div>
......@@ -387,8 +385,8 @@ const getLoginButton = (auth) =>{
<a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
<a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
</div>
</body>
</html>
`;
......@@ -404,14 +402,135 @@ const getFirstPage =(title, content, auth) =>{
<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>
<title>Food_recipe_Info</title>
<style>
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
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;
}
.hey {
position: relative;
left: 50%;
top: 33%;
transform: translate(-50%, -47%);
text-align: center;
font-size: 8em;
font-family: 'Nanum Pen Script', cursive;
}
p {
position: relative;
left: 50%;
top: 31%;
transform: translate(-50%, -47%);
font-size: 4em;
text-align: center;
font-family: 'Nanum Pen Script', cursive;
}
div {
position: relative;
font-size: 1.3em;
text-align: center;
}
.box1{
position: relative;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.box2{
position: absolute;
left: 50%;
top: 77%;
transform: translate(-50%, -54%);
}
</style>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
${auth}
<h1>${title}</h1>
<!-- 네비게이션(nav) 컨트롤에 사요하는 드롭다운. -->
<div style="margin:20px;">
<nav id="navbar-example" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<!-- 네비게이션(nav)의 기본 설정으로 모바일일 때, 메뉴 버튼이 나온다. -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 타이틀임. -->
<a class="navbar-brand" href="#">카테고리</a>
</div>
<!-- 메뉴 설정 -->
<div class="collapse navbar-collapse">
<!-- 메뉴는 왼쪽으로 두개 설정 -->
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Asian Food
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Japan.html">Japanese Food</a></li>
<li><a href="China.html">Chinese Food</a></li>
<li><a href="Korea.html">Korean Food</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
American Food
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="America.html">US Food</a></li>
<li><a href="Mexico.html">Mexican Food</a></li>
</ul>
</li>
</ul>
<!-- 메뉴를 오른쪽 정렬로 설정 가능 -->
<ul class="nav navbar-nav navbar-right">
<!-- 메뉴 이름은 Right!로 서브 옵션은 Test5와 Test6가 있다. -->
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
European Food
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Italy.html">Italian Food</a></li>
<li><a href="France.html">French Food</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="hey">${title}</div>
<p>${content}</p>
<div>
<input type="button" value="page move" onClick="movepage()"/>
<div class="box1">
${auth}
</div>
<div class="box2">
<input type="button" value="레시피 보러가기" onClick="movepage()"/>
</div>
<script type="text/javascript">
function movepage(){
......@@ -420,6 +539,4 @@ const getFirstPage =(title, content, auth) =>{
</body>
</html>
`;
}
}
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -4,23 +4,69 @@
box-sizing:border-box;
}
.containter{
position:relative;
width:90%;
height:auto;
max-width:1200px;
margin:0 auto;
margin:0;/*auto*/
color:black;
}
form{
width:50%;
max-width:400px;
width:90%;
border-radius:4px;
margin-top:-10px;
margin-left:10px;
background-color:white;
}
form{
display:inline-block;
}
form input{
.search-result{
/*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
/*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
display:grid;
grid-gap:25px;
grid-template:auto/repeat(auto-fit,minmax(300px,1fr));
margin-top:50px;
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:-15px;
margin-left:10px;
margin-top:15px;
color:rgb(75,75,75);
}*/
.search-box{
margin-left:-10px;
margin-top:10px;
}
img{
width:80%;
height:80%;
object-fit:cover;
}
html{
font-size:12px;
}
section{
min-height:10vh;
width:100%;
display:flex;
padding:100px 0;
}
.brand{
margin-top:-70px;
font-size:4rem;
color:black;
margin-bottom:30px;
}
\ No newline at end of file
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="style sheet" href="main.css">
</head>
<body>
<section>
<div class="container">
<h1 class="brand">Recipe APP</h1>
<div class="serach-box">
<form>
<input id="name" type="text" placeholder="Search Your Recipe...">
<ion-icon name="search"></ion-icon>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section>
<div class="container">
<h1 class="brand">Recipe APP</h1>
<form>
<input id="name" type="text" placeholder="Search Your Recipe...">
<ion-icon name="search"></ion-icon>
</form>
<div class="search-result">
<!--<div class="item">
<img src="./0.jpg" alt="">
<div class="flex-container">
<h1 class="title">This is a recipe</h1>
<a href="#">View Recipe</a>
</div>
<div class="search-result">
<!--<div class="item">
<img src="./0.jpg" alt="">
<div class="flex-container">
<h1 class="title">This is a recipe</h1>
<a href="#">View Recipe</a>
</div>
<p class="item-data">Calories: 120</p>
</div>-->
</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>
</body>
</html>
<p class="item-data">Calories: 120</p>
</div>-->
</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>
</body>
</html>
\ No newline at end of file
......
......@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){
event.preventDefault();
}
else{
event.preventDefault();
event.preventDefault();
searchQuery = event.target.querySelector('input').value;
fetchAPI();
}
......@@ -27,6 +27,9 @@ async function fetchAPI(){
function boxinfo(results){
let boxsinfo ='';
results.map(result => {
const object = {
cal: result.recipe.calories.toFixed(0)
};
boxsinfo +=
`
<style>
......@@ -34,25 +37,35 @@ function boxinfo(results){
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">
<h1 class="title">${result.recipe.label}</h1>
<a href="${result.recipe.url}" target="_blank">View Recipe</a>
<!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
<a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
</div>
<p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p>
${(cal => {
if (cal >= 2000) {
return `<p style="color:red">${cal}</p>`;
}
else if(cal >= 1000 && cal < 2000){
return `<p style="color:yellow">${cal}</p>`;
}
else {
return `<p style="color:green">${cal}</p>`;
}
})(object.cal)
}
</div>
`
})
......
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"passport":{"user":"rndus0819@khu.ac.kr"},"__lastAccess":1638718630697}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"passport":{"user":"hoho@naver.com"},"__lastAccess":1638877179279}
\ No newline at end of file
......
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password."]},"__lastAccess":1638870919590}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password."]},"__lastAccess":1638876058479}
\ No newline at end of file
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<!DOCTYPE html>
<html>
<body>
<div><h1>미국 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="일식";
let keyword ="미국 음식";
......@@ -31,4 +35,6 @@ $.ajax({
</script>
\ No newline at end of file
</script>
</body>
</html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<body>
<div><h1>중국 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="중국 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<body>
<div><h1>프랑스 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="프랑스 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<body>
<div><h1>이탈리아 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="이탈리아 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<body>
<div><h1>일본 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="일본 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<body>
<div><h1>한국 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="한국 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div><h1>멕시코 음식</h1></div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
let keyword ="멕시코 음식";
$.ajax({
url:'https://www.googleapis.com/youtube/v3/search',
type:'get',
dataType:'json',
data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
success:function (data){
console.log(data);
data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
},
complete:function(data){},
error:function(xhr,status,error){}
});
</script>
</body>
</html>