#13. Split Landing Page（原生JS版）, #14. RGB to Hex Converter（原生JS版）

#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()
})