티스토리 뷰
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grocery Bud</title>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/e561738355.js" crossorigin="anonymous"></script>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="section-center">
<!-- form -->
<form class="grocery-form">
<p class="alert"></p>
<h3>grocery bud</h3>
<div class="form-control">
<input type="text" id="grocery" placeholder="e.g. eggs" />
<button type="submit" class="submit-btn">submit</button>
</div>
</form>
<!-- 추가할 리스트 요소의 양식 -->
<div class="grocery-container">
<div class="grocery-list">
<!--
<article data-id="1700189031812" class="grocery-item">
<p class="title">ㅇㅇㅇ</p>
<div class="btn-container">
<button type="button" class="edit-btn">
<i class="fas fa-edit" aria-hidden="true"></i>
</button>
<button type="button" class="delete-btn">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div>
</article>
-->
</div>
<button class="clear-btn">clear items</button>
</div>
</section>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
CSS
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 35rem;
margin-top: 8rem;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Grocery List
===============
*/
.section-center {
background: var(--clr-white);
border-radius: var(--radius);
box-shadow: var(--light-shadow);
transition: var(--transition);
padding: 2rem;
}
.section-center:hover {
box-shadow: var(--dark-shadow);
}
.alert {
margin-bottom: 1rem;
height: 1.25rem;
display: grid;
align-items: center;
text-align: center;
font-size: 0.7rem;
border-radius: 0.25rem;
letter-spacing: var(--spacing);
text-transform: capitalize;
}
.alert-danger {
color: #721c24;
background: #f8d7da;
}
.alert-success {
color: #155724;
background: #d4edda;
}
.grocery-form h3 {
color: var(--clr-primary-1);
margin-bottom: 1.5rem;
text-align: center;
}
.form-control {
display: flex;
justify-content: center;
}
#grocery {
padding: 0.25rem;
padding-left: 1rem;
background: var(--clr-grey-10);
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
border-color: transparent;
font-size: 1rem;
flex: 1 0 auto;
color: var(--clr-grey-5);
}
#grocery::placeholder {
font-family: var(--ff-secondary);
color: var(--clr-grey-5);
}
.submit-btn {
background: var(--clr-primary-8);
border-color: transparent;
flex: 0 0 5rem;
display: grid;
align-items: center;
padding: 0.25rem;
text-transform: capitalize;
letter-spacing: 2px;
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
cursor: pointer;
content: var(--clr-primary-5);
transition: var(--transition);
font-size: 0.85rem;
}
.submit-btn:hover {
background: var(--clr-primary-5);
color: var(--clr-white);
}
.grocery-container {
margin-top: 2rem;
transition: var(--transition);
visibility: hidden;
}
.show-container {
visibility: visible;
}
.grocery-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
transition: var(--transition);
padding: 0.25rem 1rem;
border-radius: var(--radius);
text-transform: capitalize;
}
.grocery-item:hover {
color: var(--clr-grey-5);
background: var(--clr-grey-10);
}
.grocery-item:hover .title {
color: var(--clr-grey-5);
}
.title {
margin-bottom: 0;
color: var(--clr-grey-1);
letter-spacing: 2px;
transition: var(--transition);
}
.edit-btn,
.delete-btn {
background: transparent;
border-color: transparent;
cursor: pointer;
font-size: 0.7rem;
margin: 0 0.15rem;
transition: var(--transition);
}
.edit-btn {
color: var(--clr-green-light);
}
.edit-btn:hover {
color: var(--clr-green-dark);
}
.delete-btn {
color: var(--clr-red-light);
}
.delete-btn:hover {
color: var(--clr-red-dark);
}
.clear-btn {
text-transform: capitalize;
width: 10rem;
height: 1.5rem;
display: grid;
align-items: center;
background: transparent;
border-color: transparent;
color: var(--clr-red-light);
margin: 0 auto;
font-size: 0.85rem;
letter-spacing: var(--spacing);
cursor: pointer;
transition: var(--transition);
margin-top: 1.25rem;
}
.clear-btn:hover {
color: var(--clr-red-dark);
}
JS
const form = document.querySelector(".grocery-form");
const alert = document.querySelector(".alert");
const grocery = document.getElementById("grocery");
const submitBtn = document.querySelector(".submit-btn");
const container = document.querySelector(".grocery-container");
const list = document.querySelector(".grocery-list");
const clearBtn = document.querySelector(".clear-btn");
let editElement;
let editFlag = false;
let editID = "";
form.addEventListener("submit",addItem);
clearBtn.addEventListener("click",clearItems);
window.addEventListener("DOMContentLoaded",setupItems);
//로딩하면 setupItems 실행
//onload와 다른점 html만 기다렸다 실행함 onload는 전부 다
function addItem(e){
e.preventDefault();
//form에 (action)실행을 취소
const value=grocery.value;
console.log('value값 : ' +value);
//console에 확인함 제대로된 값인지
const id =new Date().getTime().toString();
//년월일 값을 줌 (new date())
//getTime() timeMillis값 받음
//toString() 시간 값을 문자열로 저장
console.log("시간값 : "+id);
if (value!=="" && !editFlag){
// console.log("ddd");
const element =document.createElement("article"); //div같은 상자태그
let attr=document.createAttribute("data-id");
attr.value=id;
element.setAttributeNode(attr);
element.classList.add("grocery-items");
element.innerHTML = `<p class="title">${value}</p>
<div class="btn-container">
<button type="button" class="edit-btn">
<i class="fas fa-edit"></i>
</button>
<button type="button" class="delete-btn">
<i class="fas fa-trash"></i>
</button>
</div>`;
//html 코드 삽입 두가지 방법
list.appendChild(element);
displayAlert("아이템이 추가되엇어요", "success");
container.classList.add("show-container");
//클래스 추가
setBackToDefault();
//함수호출
}
}
function setBackToDefault(){
//input 박스 공백으로 초기화
grocery.value="";
editFlag=false;
editID="";
submitBtn.textContent="submit";
}
function displayAlert(text,action){
alert.textContent=text;
//안에 텍스트 삽입 <p></p> 사이에 삽입함
alert.classList.add(`alert-${action}`);
setTimeout(function(){
//텍스트공백으로 변경
alert.textContent = "";
//해당클래스 삭제
alert.classList.remove(`alert-${action}`);
},1000);
}
function clearItems(){
alert("clearItems 연결");
}
function setupItems(){
alert("setupItems 연결");
}
function createListItem(id, value){
alert("createListItem 연결");
}
결과
변수에 잘들어갔는지 확인
HTML
<!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="shop.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="box">
<input type="checkbox" name="" id="first">
<p id="image">이미지</p>
</div>
<p class="info">상품정보</p>
<p class="sale">판매가</p>
<p class="num">수량</p>
<p class="aa">적립금</p>
<p class="ex">배송구분</p>
<p class="ex_m">배송비</p>
<p class="money">합계</p>
<p class="btn">선택</p>
</div>
<div class="bottom">
<div class="box">
<input type="checkbox" name="" id="second">
<img src="img/dress.jpeg" alt="">
</div>
<p class="info" id="name">상품</p>
<div class="sale">
<strong ><span id="price">13500</span>원</strong>
<p>$11.80</p>
</div>
<div class="num" id="change">
<input type="number" name="" class="c" id="number" value="1">
<!-- default값 지정함 -->
<button id="chch">변경</button>
</div>
<div class="aa">
<p>150원</p>
</div>
<p class="ex">기본배송</p>
<strong class="ex_m">무료</strong>
<div class="money">
<span>13500</span>원
</div>
<div class="btn">
<button class="b" id="b_1">주문하기</button>
<button class="b">관심상품등록</button>
<button class="b">X 삭제</button>
</div>
</div>
</div>
</body>
<script src="shop.js"></script>
</html>
CSS
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
.container{
width: 90%;
margin: 0 auto;
/* border: 1px solid salmon; */
}
div.top{
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
/* border: 1px solid blue; */
padding: 10px;
background-color: #f2f2f2;
}
.box{
width: 13%;
display: flex;
/* border: 1px solid brown; */
}
#first{
margin: 0 5%;
}
p{
/* margin: 5%;
width: 10%; */
text-align: center;
}
div.bottom{
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
/* border: 3px solid green; */
padding: 10px;
}
#image{
padding: 0 25%;
}
#second{
text-align: center;
margin: 0 5%;
}
img{
width: 80%;
}
.info{
width: 13%;
/* border: 1px solid pink; */
}
#name{
text-align: left;
}
.sale{
width: 10%;
/* border: 1px solid black; */
text-align: center;
}
.num{
width: 10%;
text-align: center;
/* border: 1px solid red; */
}
#number{
text-align: center;
width: 100px;
}
#chch{
width: 100px;
}
.aa{
width: 10%;
/* border: 1px solid red; */
}
.ex{
width: 10%;
/* border: 1px solid red; */
}
.ex_m{
width: 10%;
text-align: center;
/* border: 1px solid red; */
}
.money{
width: 10%;
/* border: 1px solid red; */
text-align: center;
}
.btn{
width: 10%;
display: flex;
flex-direction: column;
/* border: 1px solid red; */
}
.b{
margin:0 15%;
padding: 2px 0;
border-radius: 5px;
/* border:1px solid black; */
}
#b_1{
background-color: navy;
color: white;
}
JS
const change = document.querySelector("#chch");
console.log(change);
change.addEventListener("click",a);
function a(){
console.log("연결");
const p=document.querySelector("#price").textContent;
console.log(p);
var n = document.querySelector("#number").value;
console.log(n);
var s=p*n;
console.log(s);
var sp=document.querySelector(".money span");
console.log(sp);
sp.textContent=s;
console.log(s);
}
//textContent 안의 문자만 가져옴
'코딩 > JavaScript' 카테고리의 다른 글
| [JacaScript] 셀렉터 (0) | 2023.12.17 |
|---|---|
| 사이트 클론코딩 (0) | 2023.11.28 |
| [7주 5일차] JavaScript (1) | 2023.11.24 |
| [7주 4일차] JavaScript (1) | 2023.11.23 |
| [7주 3일차] JavaScript (0) | 2023.11.22 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday