구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
e9a522c7 1 parent 310f9a79

Update main.css, main.html, main.js, index.js and Delete index.css

Inline Side-by-side
Showing 5 changed files with 106 additions and 48 deletions
......@@ -156,6 +156,53 @@ const getLoginButton = (auth) =>{
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding-top: 15px;
font-size: 12px
}
.main {
max-width: 320px;
margin-top:300px auto;
margin: 0 auto;
}
.login-or {
position: relative;
font-size: 18px;
color: rgb(7, 7, 7);
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
h3 {
text-align: center;
line-height: 300%;
margin-top:10px auto;
}
img{
width:300px;
height:150px;
object-fit:cover;
margin-bottom:30px;
}
</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>
......@@ -166,10 +213,14 @@ const getLoginButton = (auth) =>{
<div class="container">
<div class="row">
<div class="main">
<img src="https://i.ibb.co/k2zSVcn/142437038-e7b564cb-978a-4018-8834-9984cc3b119e.png" alt=""/>
<!--이미지 아래부분이 살짝 잘림 -->
<!--로그인,회원가입버튼 오른쪽 맞추는게 더 깔끔할거같음 -->
<h3>Login</h3>
<form role="form" method="POST" action="/login">
<div class="form-group">
<label for="userId">ID</label>
<label for="userId">아이디</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<div class="form-group">
......@@ -177,18 +228,17 @@ const getLoginButton = (auth) =>{
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn btn-primary">
Enter
로그인
</button>
<button type="submit" class="btn btn btn-primary">
<a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
</form>
<div>
<a href="/join" style="background : #E5E5E5;padding : 2px; border: 0.5px solid black;cursor:pointer;border-radius:3px;font-size:13px;color:black;text-decoration:none;">회원가입</a>
</div>
</div>
</div>
</div>
</body>
</html>
`;
}
......
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.containter{
width:90%;
height:auto;
max-width:1200px;
margin:0 auto;
}
form{
width:50%;
max-width:400px;
border-radius:4px;
}
form input{
width:100%;
}
form ion-icon{
width:9%;
font-size:3rem;
margin:-15px;
color:rgb(75,75,75);
}
\ No newline at end of file
......@@ -5,14 +5,18 @@
<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>
</div>
<div class="search-result">
<!--<div class="item">
<img src="./0.jpg" alt="">
......@@ -26,5 +30,7 @@
</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>
......
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
const APP_ID = '0a67fbc1';
const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
searchForm.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('한글자 이상 입력해주세요');
......@@ -15,7 +13,6 @@ searchForm.addEventListener('submit', function(event){
fetchAPI();
}
});
async function fetchAPI(){
const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`;
const response = await fetch(recipeURL);
......@@ -23,12 +20,28 @@ async function fetchAPI(){
boxinfo(data.hits);
console.log(data);
}
function boxinfo(results){
let boxsinfo ='';
results.map(result => {
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">
......@@ -40,4 +53,4 @@ function boxinfo(results){
`
})
searchResultDiv.innerHTML = boxsinfo;
}
}
\ No newline at end of file
......
body {
padding-top: 15px;
font-size: 12px
}
.main {
max-width: 320px;
margin: 0 auto;
}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
h3 {
text-align: center;
line-height: 300%;
}
\ No newline at end of file