돌고래의 초심자 개발 블로그

doctype html>html lang="en">head>    meta charset="utf-8">    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    title>비밀title>    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">    script sr..

1. firebase를 사용하기 위한 기본 세팅을 직접 해보세요.https://firebase.google.com/?hl=kofirebase에 접속한 후 우측 상단의 콘솔로 이동 항목을 클릭합니다.본인이 생성한 프로젝트를 클릭합니다.프로젝트 개요 항목에서 본인이 생성한 웹 앱을 클릭하고, SDK 설정의 firebaseConfig의 설정 값을 복사합니다.food_5주차_실습.html 파일의 script 부분을 확인하여 본인이 등록한 firebase 프로젝트의 설정에 맞게 자신의 데이터베이스를 연결해줍니다.참고 : 4주차 2강파이어베이스의 설정을 완료해주었다. 단, 코드를 여기다가 적어놓으면, 내 api값이 누출되기에 적는 건 패스.  2. firebase 데이터 추가 코드를 완성해보세요.가져온 값을 각각 ..

index.htmlDOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>스타벅스 주문 시스템title>    link rel="stylesheet" href="styles.css">head>body>    h1>스타벅스 메뉴h1>    div id="menu">        h2>메뉴h2>            div>    div id="order-summary">        h2>주문 내역h2>        ul id="order-list">ul>        p>총 가격: ₩span id="total-p..

수정된 코드. 자바스크립트 코드menu.forEach((item, index) => {        let divall = document.createElement('div'); // 커피 이름과 가격, 주문 추가 버튼이 다 들어있는 올인원 영역        divall.classList.add('linebox'); // 올인원 영역 클래스는 linebox        let div1 = document.createElement('div');        div1.classList.add('cofname');         let span1 = document.createElement('span');        span1.textContent = `${item.name}`;        div1.app..

구현해야할 것.1. 메뉴 항목 아래에 들어가야할 메뉴 리스트. 아메리카노, 카페라떼, 카푸치노, 등등. 2. 메뉴 항목과 아래 주문 내역의 테두리.3. 주문 추가 버튼이 눌렸을 때, 주문 내역에 항목 추가.4. 추가된 항목의 삭제 기능.5. 주문 제출 버튼을 눌렀을 때 alert와 더불어 페이지 초기화  메뉴 항목과 주문 내역의 테두리. body {    font-family: Arial, sans-serif;    padding: 20px;    max-width: 600px;    margin: 0 auto;}h1 {    text-align: center;}#menu {    border: solid 1.5px gray;    border-radius: 5px;}#order-summary {    ..

기본 코드를 바탕으로 디버그를 하며 MBTI 테스트를 만들었다. index.html의 코드.DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>MBTI테스트title>    link rel="stylesheet" href="styles.css">head>body>    div class="container">        h1>MBTI 테스트h1>        form id="quiz-form">            div class="question">                p>아침에 일어나자마자 가..