Javascript小型專案練習7 羅馬數字與阿拉伯數字轉換器(input,copy,clear)

在之前AC的期末考中，曾經有個題目是需要將數字轉為羅馬字，剛好在codewar中也碰到了相同的題目，複習之餘便做了這個專案，學到了不少東西!我們先看一下程式碼

HTML

<div class="container">
    <nav class="text-center">
      <div class="nav_pics"></div>
    </nav>
    <div class="headline text-center mb-5">
      <h1>羅馬字與阿拉伯數字的轉換器</h1>
    </div>
    <form>
      <!-- 羅馬字輸入欄位 -->
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">羅馬數字</span>
        </div>
        <input type="text" class="form-control" placeholder="請輸入羅馬字" id='roman-input'>
      </div>
      <br>
      <!-- 按鈕列 -->
      <div class="nav_icon mr-2 d-flex justify-content-between">
        <button type="button" class='btn btn-secondary' id='clear'>
          <i class="fas fa-trash-alt"></i>
          清空
        </button>
        <button type="button" class='btn btn-secondary' id='copy'>
          <i class="fas fa-copy"></i>
          複製結果
        </button>
      </div>
      <br>
      <!-- 數字結果 -->
      <div class="input-group mt-3">
        <div class="input-group-prepend">
          <span class="input-group-text">阿拉伯數字</span>
        </div>
        <input type="text" class="form-control" placeholder="請輸入阿拉伯數字" id='number-input'>
      </div>
    </form>
  </div> 

CSS

 body {
  margin: 0;
  padding: 0;
  min-width: 100vw;
}

* {
  box-sizing: border-box;
}

.nav_pics {
  background-image: url('https://upload.cc/i1/2019/05/27/JLgbfF.png');
  /* background-size: cover; */
  background-repeat: no-repeat; 
  height: 20vh;
  position: relative;
  left:30%;
} 

Javascript

 //變數管理
const roman_input = document.getElementById('roman-input')
const number_input = document.getElementById('number-input')
const copy_btn = document.getElementById('copy')
const clear_btn = document.getElementById('clear')
const roman_numeral = {
  'M': 1000, 'CM': 900, 'D': 500, 'CD': 400, 'C': 100, 'XC': 90, 'L': 50, 'XL': 40, 'X': 10, 'IX': 9, 'V': 5, 'IV': 4, 'I': 1
}
// 事件管理
roman_input.addEventListener('input', display)
number_input.addEventListener('input', display)
copy_btn.addEventListener("click", copy)
clear_btn.addEventListener('click', clear)


// 功能管理
function display(e) {
  e.target.id === 'roman-input' ? number_input.value = roman_to_number(this.value) : roman_input.value = number_to_roman(this.value)
}

function roman_to_number(roman) {
  let number = 0
  roman = roman.toUpperCase()
  for (let item in roman_numeral) {
    let regrex = new RegExp(`${item}`)
    while (roman != '' && roman.slice(0, item.length) === item) {
      roman = roman.replace(regrex, '')
      number += roman_numeral[item]
    }
  }
  return number
}

function copy() {
  number_input.select();
  document.execCommand("copy");
}

function clear() {
  roman_input.value = '';
  number_input.value = '';
}

function number_to_roman(number) {
  let result = ''
  for (let i in roman_numeral) {
    while (number >= roman_numeral[i]) {
      number -= roman_numeral[i]
      result += i
    }
  }
  return result
} 

學習重點

• 利用document.execCommand 做出簡單的複製功能(會另外開一篇文章說明)
• 利用事件input 讓結果能立刻同步顯現
• 加入unit-test的概念，這個要點進github看才看得到了

最終成品

https://windate3411.github.io/Roman_exchanger/