SCSS

by Timar

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  
  button {
    background: $blue-darker;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  &:hover {
    background: $blue-darker;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  &:hover button {
    background: #fff;
    color: #000;
  }
}

JavaScript

// A = 0 .... Z = 25

// AA => 11 => parseInt => CORRECT ANSWER
// A = > 1
const charMap = {
  A: 1,
  B: 2,
  C: 3,
  D: 4,
  E: 5,
  F: 6,
  G: 7,
  H: 8,
  I: 9,
  J: "A",
  K: "B",
  L: "C",
  M: "D",
  N: "E",
  O: "F",
  P: "G",
  Q: "H",
  R: "H",
  S: "I",
  T: "J",
  U: "K",
  V: "L",
  W: "M",
  X: "N",
  Y: "O",
  Z: "Q",
};

var columnName = 'AA'

var base26 = columnName.split('').map(char=> charMap[char]).join('')

function columnToNumber(column){
var base25 = column.split('').map(char=> charMap[char]).join('')
console.log(column,'base25:',base25)
return parseInt(base25, 25)
}
console.log(columnToNumber('A')-1)
console.log(columnToNumber('B')-1)
console.log(columnToNumber('C')-1)
console.log(columnToNumber('J')-1)
console.log(columnToNumber('Z')-1)
console.log(columnToNumber('AA'))
console.log(columnToNumber('AB'))
console.log(columnToNumber('AC'))

console.log('25',parseInt('q', 25))