☺

猫でデザインとプログラミングを学ぶ

—

マレーシア生まれのゴマとパン

全く見た目が同じなマレーシア保護猫カフェメニュー３種３様【Day66 of 100】

—

by

kiyo4810

in

, , ,

本日は計13件のコミットで作業を進めました。内容はその他の実装・CSSの調整です。

①　HTML 　②　JavaScript　③ JavaScript+DB の３バージョン！

全く同じように見える以下の３つのサイト

これはHTMLとCSSだけで書いたサイト

成果物スクリーンショット

👉 https://kiyo4810.github.io/autocal/html_ver/index25.html

そこからデータ部分をJavaScriptでそのJS内に配列でデータを埋め込んだサイト

成果物スクリーンショット

👉 https://kiyo4810.github.io/autocal/html_ver/index26.html

これこそ最強！データベースで商品データを管理しているサイト

https://kiyo4810.github.io/autocal/html_ver/index27.html

index25でudemy二日目開始

変更ファイル：.vscode/settings.json, html_ver/index25.html, html_ver/index25.js


<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Udemy 続Sec. 2 20260305</title>
        <!-- ソース属性をつけると中のjsはすべて無視される -->
        <script src="index25.js"></script>
    </head>
    <body>
        <h1>Udemy 続Sec. 2 20260305</h1>
        <div>
            <a
                href="https://www.udemy.com/course/javascript-complete/learn/lecture/32337078#notes"
                >https://www.udemy.com/course/javascript-complete/learn/lecture/32337078#notes</a
            >
        </div>
        <div>何を学習したかはコンソールログを見てね</div>
    </body>
</html>



'use strict';
const inFunc4 = 'るるる';
const value = addEasy(4, 7);
console.log(value);
function addEasy(num4, num2) {
    console.log(num4 + num2);
    const inFunc2 = 'りりり';

ステージすっ飛ばして一気にコミットのテスト

変更ファイル：html_ver/index25.html

        <!-- ソース属性をつけると中のjsはすべて無視 -->
        <div>何を学習したかはコンソールログを見てチョーよ</div>

保存した。差分見れた。addしてステージに上げた。まだ差分見れた。ここでコミットする。そうするとGit Graphでしか見れなくなるテスト

変更ファイル：html_ver/index25.html, html_ver/index25.js

        <!-- ソース属性をつけると中のjsはすべて無視だよ -->
        <!-- もう一行足したよ -->
function addEasy(num5, num2) {
    console.log(num5 + num2);
    return num5 + num2;

チェックボタンからコミットしてみる（10:26）

変更ファイル：html_ver/index25.html

        <!-- もう一行足したよ。もう一回変更しよ -->

VS CodeのUIからコミットするよ（10:33）

変更ファイル：html_ver/index25.html

        <div>
            addしてステージに上げたもの + はコミットする前なら取り消せる -
        </div>
        <!-- もう一行足したよ。-->

index26js github page 公開確認

変更ファイル：html_ver/index26.html

                    <p class="eng-subtitle">OUR MENU JS Ver.</p>

値段表記小数点２桁の数値型に変更

変更ファイル：html_ver/index26.js

        price: 12.0,
        desc: 'GOMA+PANも大好きな、スパイス香る自家製フィリング。',
        price: 15.39,
    }, // 小数点の例
        price: 10.0,
        price: 14.5,
    if (!menuGrid) return;
            const formattedPrice = item.price.toFixed(2);
                        <span class="price">$ ${formattedPrice}</span>

値段表記小数点２桁の数値型に変更

変更ファイル：html_ver/index26.js

        price: 12.99,
        price: 10.99,
        price: 14.0,

html ver. js ver. 表記追記

変更ファイル：html_ver/index25.html, html_ver/index26.html

        <title>GOMA+PAN Menu HTML Ver.</title>
                    <p class="eng-subtitle">OUR MENU HTML Ver.</p>
        <title>GOMA+PAN Menu JS Ver.</title>

index27 js+DB ver メニュー7つに追加！

変更ファイル：html_ver/index27.html, html_ver/index27.js

        <script type="module" src="index27.js"></script>
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js';
import {
    getFirestore,
    collection,
    getDocs,
} from 'https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js';
const firebaseConfig = {
    apiKey: 'AIzaSyB4m6JxIIBYq2DWtOyVRVw1smCgpAyLGnk',
    authDomain: 'goma-pan-menu.firebaseapp.com',
    projectId: 'goma-pan-menu',
    storageBucket: 'goma-pan-menu.firebasestorage.app',
    messagingSenderId: '437147967378',
    appId: '1:437147967378:web:8a0739fbfc1e16e5886b4b',
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
async function fetchMenu() {
    try {
        const querySnapshot = await getDocs(collection(db, 'menus'));
        const menuData = [];
        querySnapshot.forEach((doc) => {
            menuData.push(doc.data());
        });
        renderMenu(menuData);
    } catch (e) {
        console.error('Error fetching documents: ', e);
    }
}
function renderMenu(data) {

　CSS追加

保護猫カフェメニュー作成（20:15）

変更ファイル：html_ver/images/hogoneko_bg.png, html_ver/images/hogoneko_cafe.png, html_ver/index25.css, html_ver/index25.html, html_ver/index25.js

/* 基本設定 */
:root {
    --main-color: #1a2a2a; /* ロゴの深いネイビー */
    --bg-color: #f2eadd; /* ヴィンテージ感のある背景色 */
    --font-jp: 'Shippori Mincho', serif;
    --font-en: 'Cinzel', serif;
}
body {
    background-color: var(--bg-color);
    color: var(--main-color);
    font-family: var(--font-jp);
    margin: 0;
    line-height: 1.6;
}
/* ロゴエリアを基準点にする */
.logo-area {
    position: relative;
    display: inline-block; /* 中身のサイズに合わせる */
    padding: 0 40px; /* 左右のテキストが入るスペースを確保 */
}
/* --- 追加：四隅の装飾（コーナーフレーム） --- */
/* 1. メニュー全体の枠線を少し調整 */
.menu-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 80px 50px; /* 装飾のために少し余白を広げます */
    border: 1px solid var(--main-color); /* これが一番外側の細い線 */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);

index26保護猫カフェサイトjs 制御化index

変更ファイル：html_ver/index26.css, html_ver/index26.html, html_ver/index26.js

/* 基本設定 */
:root {
    --main-color: #1a2a2a; /* ロゴの深いネイビー */
    --bg-color: #f2eadd; /* ヴィンテージ感のある背景色 */
    --font-jp: 'Shippori Mincho', serif;
    --font-en: 'Cinzel', serif;
}
body {
    background-color: var(--bg-color);
    color: var(--main-color);
    font-family: var(--font-jp);
    margin: 0;
    line-height: 1.6;
}
/* ロゴエリアを基準点にする */
.logo-area {
    position: relative;
    display: inline-block; /* 中身のサイズに合わせる */
    padding: 0 40px; /* 左右のテキストが入るスペースを確保 */
}
/* --- 追加：四隅の装飾（コーナーフレーム） --- */
/* 1. メニュー全体の枠線を少し調整 */
.menu-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 80px 50px; /* 装飾のために少し余白を広げます */
    border: 1px solid var(--main-color); /* これが一番外側の細い線 */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);

index27 js+DB ver 初期型完成

変更ファイル：html_ver/index27.css, html_ver/index27.html, html_ver/index27.js

/* 基本設定 */
:root {
    --main-color: #1a2a2a; /* ロゴの深いネイビー */
    --bg-color: #f2eadd; /* ヴィンテージ感のある背景色 */
    --font-jp: 'Shippori Mincho', serif;
    --font-en: 'Cinzel', serif;
}
body {
    background-color: var(--bg-color);
    color: var(--main-color);
    font-family: var(--font-jp);
    margin: 0;
    line-height: 1.6;
}
/* ロゴエリアを基準点にする */
.logo-area {
    position: relative;
    display: inline-block; /* 中身のサイズに合わせる */
    padding: 0 40px; /* 左右のテキストが入るスペースを確保 */
}
/* --- 追加：四隅の装飾（コーナーフレーム） --- */
/* 1. メニュー全体の枠線を少し調整 */
.menu-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 80px 50px; /* 装飾のために少し余白を広げます */
    border: 1px solid var(--main-color); /* これが一番外側の細い線 */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);

今日の振り返り

コミット13本でまとまった実装ができました。各変更の意図を理解しながら進めることで、コードの構造に対する理解が深まってきています。

今日の成果物 🎉

成果物スクリーンショット

👉 https://kiyo4810.github.io/autocal/html_ver/index25.html

成果物スクリーンショット

👉 https://kiyo4810.github.io/autocal/html_ver/index26.html

最後に究極、FirebaseのFirestoreデータベース連携版

👉 https://kiyo4810.github.io/autocal/html_ver/index27.html

, ,

コメントを残す

猫でデザインとプログラミングを学ぶをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む