💐 花屋ページ

📝 課題の説明

Vanila JavaScriptのみで実現する課題.

ビデオ、動画、ポップアップなど多様な機能を実現できる課題.

技術スタック

HTML5, SCSS, JavaScript

Git & GitHub

💻 機能実装

バナー、ポップアップウィンドウ

🗂 バー

ホームページ下部バナー左、右背景-画像、マウスサスペンション
textは、背景画像を移動せずに拡大する機能を実現しています.

	<section id="banner-section">
        <article class="left-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <p class="banner-name">꾸까 브랜드 이야기</p>
            <span class="banner-desc">
              꽃으로 라이프스타일을 만들어가는 <br />
              kukka의 문화를 소개해요.
            </span>
            <p class="banner-more">Brand story</p>
          </div>
        </article>
        <article class="right-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <button class="banner-name">꾸까 오프라인 쇼룸</button>
            <span class="banner-desc">
              꽃을 가까이서 만져보고 향기도 맡아보고, <br />
              꽃 속에서 작은 휴식을 누릴 수 있는 kukka의 오프라인 쇼룸
            </span>
            <button class="banner-more">꾸까 쇼룸 안내</button>
          </div>
        </article>
      </section>

SCSSにより、以下のようなbgPositionの名称で画像の形状が決定される.scssにインポートして使用します.

@mixin bgPosition($position, $url) {
  background-size: cover;
  background-position: $position;
  background-repeat: no-repeat;
  background-image: url($url);
}

🔐 ポップアップウィンドウ

レンダリング時にポップアップウィンドウを一番前にして閉じるか、表示されなくなったウィンドウを選択して閉じる
Cookie値を保存するかどうかによって、再表示と非表示機能を実現します.

document.addEventListener('DOMContentLoaded', function () {
  checkCookie();
});    // 화면을 불러올 때 checkCookie 함수를 실행시킨다.

Cookieに値が含まれている場合は、レンダリング時にnoneが表示されます.
そうでなければ、「block」でポップアップウィンドウが画面に表示され続けます.

function checkCookie() {
  if (getCookie('maindiv') == 'done') {
    document.getElementById('modal').style.display = 'none';
  } else {
    document.getElementById('modal').style.display = 'block';
  }
}

X表示時の関数を押してライブラリベースに保存し、関数をインポートすることで機能を実現します.

function closeWin() {
  if (document.getElementById('popup_close_check').checked) {
    setCookie('maindiv', 'done', 1);
  }
  document.getElementById('modal').style.display = 'none';
}

function setCookie(name, value, expiredays) {
  const todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);
  document.cookie =
    name +
    '=' +
    escape(value) +
    '; path=/; expires=' +
    todayDate.toGMTString() +
    ';';
}

function getCookie(name) {
  const nameOfCookie = name + '=';
  let x = 0;
  while (x <= document.cookie.length) {
    const y = x + nameOfCookie.length;
    let endOfCookie = '';
    if (document.cookie.substring(x, y) == nameOfCookie) {
      if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
        endOfCookie = document.cookie.length;
      return unescape(document.cookie.substring(y, endOfCookie));
    }
    x = document.cookie.indexOf(' ', x) + 1;
    if (x == 0) break;
  }
  return '';
}

🌅 最終実施

Vanila JavaScriptのみを使用してプロジェクトを実装するのは、今回の入門コースで初めてで最後です.
今の勉強の方向を正確に再質問し、考えることができる時間です.
彼は最先端技術の基本であるJavaScriptに安易な考えを持っているようだ.
目の前の反応に集中するだけで、基本的な仕事にもっと集中したいという項目が感じられます.🖋