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

조국현
Commit e9a522c7f13ec3d00b37b45505aec6e4f8577eae e9a522c7 1 parent 310f9a79
Showing 5 changed files with 106 additions and 48 deletions
index.js
main/main.css
main/main.html
main/main.js
public/css/index.css
--- a/index.js
View file @e9a522c
+++ b/index.js
View file @e9a522c
@@ -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>
-    
     `;
 }
--- a/main/main.css 0 → 100644
View file @e9a522c
+++ b/main/main.css 0 → 100644
View file @e9a522c
+*{
+    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
--- a/main/main.html
View file @e9a522c
+++ b/main/main.html
View file @e9a522c
@@ -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>
--- a/main/main.js
View file @e9a522c
+++ b/main/main.js
View file @e9a522c
 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
--- a/public/css/index.css deleted 100644 → 0
View file @310f9a7
+++ b/public/css/index.css deleted 100644 → 0
View file @310f9a7
-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