#13. Split Landing Page

今日的挑戰比較偏向CSS，是做出一個有滑動效果的Landing Page。滑鼠Hover上去的時候就會改變width。實際效果請看CodePen

實作邏輯
規劃HTML結構：最外層的container中包含left、right兩個區塊，當滑鼠hover到left，就在外層container加上選擇器hover-left，而hover-left選擇器會重新調整left、right的寬度比例。

html

    <div class="container hover-left">
      <div class="split left">
        <h1>Playstation 5</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
      <div class="split right">
        <h1>XBox Series X</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
    </div>

javascript

const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

SCSS
這次用SCSS撰寫樣式，這樣對CSS的結構會比較清楚。

:root {
  --left-bg-color: rgba(87, 84, 236, 0.4);
  --right-bg-color: rgba(43, 43, 43, 0.5);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --speed: 1000ms;
  --hover-width: 75%;
  --other-width: 25%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #333;

  .split {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all var(--speed) ease-in-out;

     h1 {
       font-size: 4rem;
       color:white;
       position: absolute;
       left: 50%;
       top: 20%;
       transform: translateX(-50%);
       white-space: nowrap;
     }

     .btn {
      position: absolute;
      left: 50%;
      top: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateX(-50%);
      text-decoration: none;
      color: white;
      border: 1px solid white;
      font-size: 1rem;
      font-weight: bold;
      text-transform: uppercase;
      width: 15rem;
      padding: 1.5rem;
     }
  }

  .left {
    left: 0;
    background-image: url('https://unsplash.com/photos/Xn4g9aHY4ao/download?force=true&w=2400');
    background-repeat: no-repeat;
    background-size: cover;

    .btn:hover {
      background-color: var(--left-btn-hover-color);
      border-color: var(--left-btn-hover-color);
    }
  }

  .left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--left-bg-color);
  }

  .right {
    right: 0;
    background-image: url('https://unsplash.com/photos/3XMP10gBuMw/download?force=true');
    background-repeat: no-repeat;
    background-size: cover; 

    .btn:hover {
      background-color: var(--right-btn-hover-color);
      border-color: var(--right-btn-hover-color);
    }
  }

  .right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--right-bg-color);
  }
}

.hover-left {
  .left {
    width: var(--hover-width);
  }
  .right {
    width: var(--other-width);
  }
}

.hover-right {
  .left {
    width: var(--other-width);
  }
  .right {
    width: var(--hover-width);
  }
}

@media (max-width: 880px) {
  .container {
    .split {
      h1 {
        top: 30%;
        font-size: 2rem;
      }
      .btn {
        padding: 1.2rem;
        width: 12rem;
      }
    }
  }
}

#14. RGB to Hex Converter

今日第二個要分享的是RGB色碼到HEX的轉換器（不然內容太貧乏.. Orz）。實際效果請看CodePen

實作邏輯

1. 規劃HTML結構：需要規劃四個，前面三個是要用來做slider撥桿，第四個是顯示HEX色碼。
2. 將RGB code轉成Hex code的核心是將0~255的色碼轉成16進位。相關演算法可以參考StockOverflow

html（樣式主要使用Bootstrap來切版）

<div id="container">
  
  <!-- Red Slider -->
  <div class="d-flex justify-content-center my-3">
    <span class="font-weight-bold mr-2" style="color: red;  width: 20px">R</span>
    <div class="sliderContainer w-250">
      <input type="range" class="custom-range" step="1" min="0" max="255" value="125" id="redSlider">
    </div>
    <span id="redRange" class="ml-2" style="color: red; width: 40px">125</span>
  </div>
 
 
  <!-- Green Slider -->
  <div class="d-flex justify-content-center my-3">
    <span class="font-weight-bold" style="color: rgb(60, 90, 8); width: 30px; ">G</span>
    <div class="w-250">
      <input type="range" class="custom-range" step="1" min="0" max="255" value="125" id="greenSlider">
    </div>
    <span id="greenRange" class="ml-2" style="color: rgb(60, 90, 8); width: 42px">125</span>
  </div>


  <!-- Blue Slider -->
  <div class="d-flex justify-content-center my-3">
    <span class="font-weight-bold mr-2" style="color: rgb(8, 16, 90);  width: 20px">B</span>
    <div class="w-250">
      <input type="range" class="custom-range" step="1" min="0" max="255" value="125" id="blueSlider">
    </div>
    <span id="blueRange" class="ml-2" style="color: rgb(8, 16, 90); width: 40px">125</span>
  </div>
  
  <!-- show Hex code -->
  <div id="hexColor">
    #7d7d7d
  </div>
</div>

javascript

// 宣告變數 = slider, HexCode
const redSlider = document.querySelector('#redSlider')
const greenSlider = document.querySelector('#greenSlider')
const blueSlider = document.querySelector('#blueSlider')
const hexColorCode = document.querySelector('#hexColor')

// rgb轉成Hex
function componentToHex (color) {
  const hexCode = Number(color.value).toString(16)
  return hexCode.length === 1 ? '0' + hexCode : hexCode
}

// 更新RGB數值，並將它轉換成Hex碼，置入HTML當中
function showColorCode (r, g, b) {
  document.querySelector('#redRange').innerHTML = r.value
  document.querySelector('#greenRange').innerHTML = g.value
  document.querySelector('#blueRange').innerHTML = b.value
  hexColorCode.innerHTML = '#' + componentToHex(r) + componentToHex(g) + componentToHex(b)
  return hexColorCode.innerHTML
}

// 取得Hex色碼後，改變背景顏色
function bgColor () {
  document.body.style.backgroundColor = hexColorCode.innerText
  return document.body.style.backgroundColor
}

// 監聽器觸發後，更新RGB數值
container.addEventListener('input', (e) => {
  showColorCode(redSlider, greenSlider, blueSlider)
  bgColor()
})