1ページのショッピングモール(1-2週間)

ショッピングモールの注文窓口を1ページ作成するプロジェクトを行う際、最初にすることは「どの品物を販売する商品の出所として考えるか」です.単純な課題といってもいいのですが、一つ一つのプロジェクトを頑張って完成させ、自分のものを自分のものに入れて完成させたいと思っていたので、最近興味が湧いてきたり、興味のある分野でプロジェクトを選んだりしています.
だから決めた道具は「肉鶏胸肉」だ!
最近运动を始めた时、自然と鶏の胸肉を见つけました.鶏の胸肉を食べるからには、おいしいものを食べようと思って买いました.それはなぜですか.美味しさに惑わされたのか、今回のプロジェクトとして真っ先に思いついたのがこの全鶏胸肉.
要するに,ウェブページを作成する過程で,以前に学んだhtml,css,javascriptなど多くの言語を用いた.
こうやって作った私のホームページショッピングモール注文窓口画面は!!



こうして完成した👏👏
ここで注意したいのは
1.「発注」ボタンをクリックし、「発注完了」をクリックします.通知ウィンドウを表示します.
2.為替レートAPIを使用してリアルタイムで為替レートを表す
2種類あります.
1.注文ボタン
注文ボタンのhtmlコード

 <div class="btn">
            <button type="button" onclick="order()" class="btn btn-primary">주문하기</button>
        </div>

スタイルコード

.btn {
            display: block;
            width: 80px;
            margin: auto; }

最後にスクリプトコード

function order() {
            alert("주문이 완료되었습니다.")

前述したようにfunctionとして定義されたonclick関数をbuttonラベルに挿入してalert機能を起動します.
2.リアルタイムレートの表示
為替レート部分htmlコード

<h6 class="item_rate"> 원-달러 환율 : <span id ="now_rate">1210</span>원</span></h6>

スタイルコード

.item_rate {
             font-size: 14px;
             color: #5C4A44;
             text-align: right;
             margin: 20px auto 0px auto; }

最後にスクリプトコード

$(document).ready(function () {
            rating()
        });        
function rating() {
     $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {
              let rate = response['rate'];
              $('#now_rate').text(rate)
                }
            })
        }

特に、このセクションではAjaxとjqueryを使用し、APIをロードしてリアルタイムで実行する機能が実装されています.
このプロジェクトを行う過程で、私は初めてAjaxに接触しました.以前よりデザインや機能をアップグレードできるので、喜んで不思議な経験でした.