Write a function to convert a name into initials. This kata strictly takes two words with one space in between them.

The output should be two capital letters with a dot separating them.

It should look like this:

Sam Harris => S.H

patrick feeney => P.F

Solution

function abbrevName(name){
  return name.split(" ").map(item =>item[0].toUpperCase()).join('.')
}

function abbrevName(name){

  var nameArray = name.split(" ");
  return (nameArray[0][0] + "." + nameArray[1][0]).toUpperCase();
}

function abbrevName(name){
  return name.split(' ').map(x => x.substr(0, 1).toUpperCase()).join('.');
}

const abbrevName = name => name.match(/\b\w/g).join('.').toUpperCase()

function abbrevName(name){
    return name[0].toUpperCase() + "." + name[name.indexOf(" ")+1].toUpperCase();
}

8 kyu - Convert a string to an array

Write a function to split a string and convert it into an array of words.

Examples (Input ==> Output):

"Robin Singh" ==> ["Robin", "Singh"]

"I love arrays they are my favorite" ==> ["I", "love", "arrays", "they", "are", "my", "favorite"]

Solution

function stringToArray(string){
      return string.split(" ");
}

8 kyu - Find the smallest integer in the array

Given an array of integers your solution should find the smallest integer.

For example:

• Given [34, 15, 88, 2] your solution will return 2
• Given [34, -345, -1, 100] your solution will return 345

You can assume, for the purpose of this kata, that the supplied array will not be empty.

Solution

class SmallestIntegerFinder {
  findSmallestInt(args) {
    return Math.min(...args)
  }
}

class SmallestIntegerFinder {
  findSmallestInt(args) {
    return Math.min.apply(null, args);
  }
}

class SmallestIntegerFinder {
  findSmallestInt(args) {
    return args.sort((a,b)=>a-b)[0];
  }
}

class SmallestIntegerFinder {
  findSmallestInt(args) {
    return args.reduce(function(prev, curr, index, array) {
      return prev < curr ? prev : curr;
    });
  }
}

https://deeplify.dev/front-end/js/count-characters-in-string

function XO(str) {
    // 문자열을 소문자로 변환
    str = str.toLowerCase();

    // 'x'와 'o'의 개수를 저장할 변수 초기화
    let countX = 0;
    let countO = 0;

    // 문자열을 반복하며 'x'와 'o'의 개수 세기
    for (let char of str) {
        if (char === 'x') countX++;
        if (char === 'o') countO++;
    }

    // 'x'와 'o'의 개수가 같으면 true, 다르면 false 반환
    return countX === countO;
}

function XO(str) {
    // 문자열을 소문자로 변환
    str = str.toLowerCase();

    // 'x'와 'o'로 문자열을 분리하여 배열 생성
    const xCount = str.split('x').length - 1;
    const oCount = str.split('o').length - 1;

    // 'x'와 'o'의 개수가 같은지 비교
    return xCount === oCount;
}

function XO(str) {
    let xCount = 0;
    let oCount = 0;
    str = str.toLowerCase();

    for (let char of str) {
        if (char === 'x') xCount++;
        else if (char === 'o') oCount++;
    }

    return xCount === oCount;
}

function XO(str) {
    const xMatches = str.match(/x/gi);
    const oMatches = str.match(/o/gi);
    const xCount = xMatches ? xMatches.length : 0;
    const oCount = oMatches ? oMatches.length : 0;

    return xCount === oCount;
}

8 kyu - Remove First and Last Character

It's pretty straightforward. Your goal is to create a function that removes the first and last characters of a string. You're given one parameter, the original string. You don't have to worry about strings with less than two characters.

Solution

function removeChar(str){
 //You got this!
 // 매우 간단합니다. 문자열의 첫 번째 문자와 마지막 문자를 제거하는 함수를 만드는 것이 목표입니다. 
 // 하나의 매개변수, 즉 원본 문자열이 주어집니다. 두 글자 미만의 문자열은 걱정할 필요가 없습니다.

  return str.substring(1, str.length - 1)

};

function removeChar(str) {
  return str.slice(1, -1);
}

const removeChar = str => str.slice(1,-1)

8 kyu - Is it even?

In this Kata we are passing a number (n) into a function.

Your code will determine if the number passed is even (or not).

The function needs to return either a true or false.

Numbers may be positive or negative, integers or floats.

Floats with decimal part non equal to zero are considered UNeven for this kata.

Solution

function testEven(n) {
  return n%2 === 0 ? true : false
}

function testEven(n) {
    return n%2===0;
}

7 kyu - Categorize New Member

The Western Suburbs Croquet Club has two categories of membership, Senior and Open. They would like your help with an application form that will tell prospective members which category they will be placed.

To be a senior, a member must be at least 55 years old and have a handicap greater than 7. In this croquet club, handicaps range from -2 to +26; the better the player the lower the handicap.

Input

Input will consist of a list of pairs. Each pair contains information for a single potential member. Information consists of an integer for the person's age and an integer for the person's handicap.

Output

Output will consist of a list of string values (in Haskell and C: Open or Senior) stating whether the respective member is to be placed in the senior or open category.

Example

input =  [[18, 20], [45, 2], [61, 12], [37, 6], [21, 21], [78, 9]]
output = ["Open", "Open", "Senior", "Open", "Open", "Senior"]

Solution

function openOrSenior(data){
  const result = data.map((item)=>{
    return  item[0] >= 55 && item[1] > 7 ? "Senior" : "Open"
  })
  return result;
}

// Destructuring: [age, handicap] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
// Arrow Functions: () => {} https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

function openOrSenior(data){
  return data.map(([age, handicap]) => (age > 54 && handicap > 7) ? 'Senior' : 'Open');
}

function openOrSenior(data){
  function determineMembership(member){
    return (member[0] >= 55 && member[1] > 7) ? 'Senior' : 'Open';
  }
  return data.map(determineMembership);
}

function openOrSenior(data){
  var result = [];
  data.forEach(function(member) {
    if(member[0] >= 55 && member[1] > 7) {
      result.push('Senior');
    } else {
      result.push('Open');
    }
  })
  return result;
}

function openOrSenior(data){
  return data.map(([age, handicap]) => age >= 55 && handicap > 7 ? 'Senior' : 'Open');
}

function openOrSenior(data){
  return data.map(function(d){
    return d[0] >= 55 && d[1] > 7 ? 'Senior' : 'Open';
  });
}

Your team is writing a fancy new text editor and you've been tasked with implementing the line numbering.

Write a function which takes a list of strings and returns each line prepended by the correct number.

The numbering starts at 1. The format is n: string. Notice the colon and space in between.

Examples: (Input --> Output)

[] --> []
["a", "b", "c"] --> ["1: a", "2: b", "3: c"]

Solution

var number=function(array){
  //your awesome code here
  return array.map((item,index) => {
    return `${index+1}: ${item}`
  })

}

var number = function(array) {
  return array.map(function (line, index) {
    return (index + 1) + ": " + line;
  });
}

let number = (a) => a.map((v, i) => `${i + 1}: ${v}`)

8 kyu - Area or Perimeter

You are given the length and width of a 4-sided polygon. The polygon can either be a rectangle or a square.

If it is a square, return its area. If it is a rectangle, return its perimeter.

Example(Input1, Input2 --> Output):

6, 10 --> 32
3, 3 --> 9

Note: for the purposes of this kata you will assume that it is a square if its length and width are equal, otherwise it is a rectangle.

Solution

const areaOrPerimeter = function(l , w) {
  return l === w ? l * w : (l * 2) + (w * 2)
};

const areaOrPerimeter = (l , w) => l === w ? l*w : 2*(l+w);

const areaOrPerimeter = function(l , w) {
  let area = l * w;
  let perimeter = (l + w) * 2;

  return l === w ? area : perimeter;
};

// const areaOrPerimeter = (l, w) => l === w ? l * w : (l + w) * 2;

8 kyu - Beginner - Lost Without a Map

Given an array of integers, return a new array with each value doubled.

For example:

[1, 2, 3] --> [2, 4, 6]

Solution

function maps(x){ 
 return x.map((i) => {
    return i + i
  })
}

function maps(x){
  return x.map(n => n * 2);
}

maps = x => x.map(e => e * 2);

8 kyu - Beginner Series #1 School Paperwork

Your classmates asked you to copy some paperwork for them. You know that there are 'n' classmates and the paperwork has 'm' pages.

Your task is to calculate how many blank pages do you need. If n < 0 or m < 0 return 0.

Example:

n= 5, m=5: 25
n=-5, m=5:  0

Waiting for translations and Feedback! Thanks!

Solution

function paperwork(n, m) {
  return n < 0 || m < 0 ? 0 : n * m
}

function paperwork(n, m) {
  return n > 0 && m > 0 ? n * m : 0
}

function paperwork(n, m) {
  if (m < 0 || n < 0) {
    return 0;
  }
  return m * n;
}

7 kyu - Anagram Detection

An anagram is the result of rearranging the letters of a word to produce a new word (see wikipedia).

Note: anagrams are case insensitive

Complete the function to return true if the two arguments given are anagrams of each other; return false otherwise.

Examples

• "foefet" is an anagram of "toffee"
• "Buckethead" is an anagram of "DeathCubeK"

Solution

// write the function isAnagram
var isAnagram = function(test, original) {

  // 애너그램은 단어의 글자를 재배열하여 새로운 단어를 만든 결과물입니다(위키백과 참조).
  // 참고: 애너그램은 대소문자를 구분하지 않습니다.

  // 주어진 두 인수가 서로의 애너그램이면 참을 반환하고, 그렇지 않으면 거짓을 반환하는 함수를 완성합니다.
  // 예제
  // "foefet"은 "toffee"의 아나그램입니다.
  // "버킷헤드"는 "DeathCubeK"의 아나그램입니다.

  // 두 문자열을 비교하여 문자가 몇 개 있는지 비교?

  test = test.toLowerCase()
  original = original.toLowerCase()

  // 문자열을 배열로 변환한 뒤 정렬하여 비교합니다.

  return test.split('').sort().join('') === original.split('').sort().join('');


};

// write the function isAnagram
var isAnagram = function(test, original) {
  var t = test.toLowerCase().split('').sort().join('');
  var o = original.toLowerCase().split('').sort().join('');
  return (t==o)?true:false;
};

function isAnagram (test, original) {
    return test.toLowerCase().split("").sort().join("") === original.toLowerCase().split("").sort().join("");
}

This code does not execute properly. Try to figure out why.

Solution

function multiply(a, b){
  return a * b
}

8 kyu - Convert a Number to a String!

We need a function that can transform a number (integer) into a string.

What ways of achieving this do you know?

Examples (input --> output):

123  --> "123"
999  --> "999"
-100 --> "-100"

Solution

function numberToString(num) {
  return `${num}`
}

function numberToString(num) {
  return num.toString();
}

function numberToString(num) {
  // Return a string of the number here!
  return String(num);
}

function numberToString(num) {
  return ''+num;
}

8 kyu - Grasshopper - Debug sayHello

Debugging sayHello function

The starship Enterprise has run into some problem when creating a program to greet everyone as they come aboard. It is your job to fix the code and get the program working again!

Example output:

Hello, Mr. Spock

Solution

function sayHello(name) {
  return `Hello, ${name}`
}

const sayHello = name => `Hello, ${name}`;

7 kyu - Is this a triangle?

Implement a function that accepts 3 integer values a, b, c. The function should return true if a triangle can be built with the sides of given length and false in any other case.

(In this case, all triangles must have surface greater than 0 to be accepted).

Examples:

Input -> Output
1,2,2 -> true
4,2,3 -> true
2,2,2 -> true
1,2,3 -> false
-5,1,3 -> false
0,2,3 -> false
1,2,9 -> false

Solution

function isTriangle(a,b,c)
{
  // 삼각형 성립조건
  // 가장 긴 변의 길이가 나머지 두 변의 길이의 합보다 작아야 함

  // 가장 큰 값을 구하고 나머지 두 값을 더해서 비교

  const arr = [a,b,c];

  let value = 0;

  arr.map((item) => {
    return item > value ? value = item : value
  })


  return value +


}

function isTriangle(a, b, c) {
  return (a + b > c) && (a + c > b) && (b + c > a);
}

function isTriangle(a, b, c) {
  let arr = [a, b, c].sort();
  return arr[2] < (arr[0] + arr[1]);
}

function isTriangle(a, b, c) {
  let max = Math.max(a, b, c);
  return max < (a + b + c - max);
}

function isTriangle(a, b, c) {
  let max = Math.max(a, b, c);
  return max < (a + b + c) / 2;
}

Write a function that removes the spaces from the string, then return the resultant string.

Examples:

Input -> Output
"8 j 8   mBliB8g  imjB8B8  jl  B" -> "8j8mBliB8gimjB8B8jlB"
"8 8 Bi fk8h B 8 BB8B B B  B888 c hl8 BhB fd" -> "88Bifk8hB8BB8BBBB888chl8BhBfd"
"8aaaaa dddd r     " -> "8aaaaaddddr"

Solution

function noSpace(x){
  return x.split(" ").join('')
}

function noSpace(x){
  return x.replace(/\s/g, '');
}

function noSpace(x){return x.split(' ').join('')}

8 kyu - Grasshopper - Messi goals function

Messi goals function

Messi is a soccer player with goals in three leagues:

• LaLiga
• Copa del Rey
• Champions

Complete the function to return his total number of goals in all three leagues.

Note: the input will always be valid.

For example:

5, 10, 2  -->  17

Solution

function goals (laLigaGoals, copaDelReyGoals, championsLeagueGoals) {
  return laLigaGoals + copaDelReyGoals + championsLeagueGoals
}

const goals = (...a) => a.reduce((s, v) => s + v, 0);

const goals = (a,b,c) => a + b + c;

7 kyu - Reverse words

Complete the function that accepts a string parameter, and reverses each word in the string. All spaces in the string should be retained.

Examples

"This is an example!" ==> "sihT si na !elpmaxe"
"double  spaces"      ==> "elbuod  secaps"

Solution

function reverseWords(str) {

  const words = str.split(" ");

  const newWord = words.map((item)=>{
   return item.split("").reverse().join("")
  })

  return newWord.join(" ")


}

function reverseWords(str) {
  return str.split(' ').map(function(word){
    return word.split('').reverse().join('');
  }).join(' ');
}

function reverseWords(str) {
  // Go for it
  //split words into seperate arrays
  return str.split("").reverse().join("").split(" ").reverse().join(" ");
}

function reverseWords(str) {
  return str.split(' ').map( str => str.split('').reverse().join('') ).join(' ');
}

Write a function that always returns 5

Sounds easy right? Just bear in mind that you can't use any of the following characters: 0123456789*+-/

Good luck :)

Solution

function unusualFive() {
  return 'five!'.length
}

8 kyu - Invert values

Given a set of numbers, return the additive inverse of each. Each positive becomes negatives, and the negatives become positives.

invert([1,2,3,4,5]) == [-1,-2,-3,-4,-5]
invert([1,-2,3,-4,5]) == [-1,2,-3,4,-5]
invert([]) == []

You can assume that all values are integers. Do not mutate the input array/list.

Solution

function invert(array) {
  const result = array.map(item=>{
    return item > 0 ? -(item) : -(item)
  });
   return result ;
}

const invert = array => array.map(num => -num);

function invert(array) {
   return array.map( x => x === 0 ? x : -x);
}

8 kyu - Counting sheep...

Consider an array/list of sheep where some sheep may be missing from their place. We need a function that counts the number of sheep present in the array (true means present).

For example,

[true,  true,  true,  false,
  true,  true,  true,  true ,
  true,  false, true,  false,
  true,  false, false, true ,
  true,  true,  true,  true ,
  false, false, true,  true]

The correct answer would be 17.

Hint: Don't forget to check for bad values like null/undefined

Solution

function countSheeps(sheep) {
  let count = 0;

  sheep.map((index)=>{
    return index === true ? count++ : false
  })  
  return count;
}

function countSheeps(arrayOfSheeps) {
  return arrayOfSheeps.filter(Boolean).length;
}

function countSheeps(arrayOfSheep) {
  var count = 0;

  arrayOfSheep.forEach( function (sheep) {
    if (sheep)
      count++;
  });

  return count;
}

function countSheeps(arrayOfSheep) {
  // TODO May the force be with you
  var num = 0;

  for(var i = 0; i < arrayOfSheep.length; i++)
    if(arrayOfSheep[i] == true)
      num++;

  return num;
}

Write function RemoveExclamationMarks which removes all exclamation marks from a given string.

Solution

function removeExclamationMarks(s) {
  // 주어진 문자열에서 모든 느낌표를 제거하는 함수 RemoveExclamationMarks를 작성합니다.

  return s.replaceAll('!','');;
}

function removeExclamationMarks(s) {
  return s.replace(/!/gi, '');
}

function removeExclamationMarks(s) {
  return s.split('!').join('');
}

8 kyu - Calculate average

Write a function which calculates the average of the numbers in a given list.

Note: Empty arrays should return 0.

Solution

function findAverage(array) {
  // 주어진 목록에 있는 숫자의 평균을 계산하는 함수를 작성하세요.
  //참고: 빈 배열은 0을 반환해야 합니다.
  // your code here

  let sum = 0;
  let divide = array.length;

  const result = array.map((item) => {
    return  sum += item
  })


  if(array.length === 0){
    return 0
  } else {
    return sum / divide
  }

}

var find_average = (array) => {  
  return array.length === 0 ? 0 : array.reduce((acc, ind)=> acc + ind, 0)/array.length
}

function find_average(array) {
  if (array.length === 0) {
  return 0;
  }
  var result = 0;
  for (i=0; i<array.length; i++) {
    result +=array[i];
  }
  return result/array.length;
}

function find_average(arr) {
    return arr.length > 0? arr.reduce((a, b) => a + b) / arr.length : 0;
}

8 kyu - Sentence Smash

Write a function that takes an array of words and smashes them together into a sentence and returns the sentence. You can ignore any need to sanitize words or add punctuation, but you should add spaces between each word. Be careful, there shouldn't be a space at the beginning or the end of the sentence!

Example

['hello', 'world', 'this', 'is', 'great']  =>  'hello world this is great'

Solution

function smash (words) {
  // 단어 배열을 받아 한 문장으로 뭉쳐서 문장을 반환하는 함수를 작성합니다. 
  // 단어를 띄어쓰거나 구두점을 추가할 필요는 없지만 각 단어 사이에 공백을 추가해야 합니다. 
  // 문장의 시작이나 끝에 공백이 있으면 안 되니 주의하세요!
  return words.join(" ");
};

// Smash Words
const smash = words => words.join(' ');

Create a function that takes an integer as an argument and returns "Even" for even numbers or "Odd" for odd numbers.

Solution

function evenOrOdd(number) {
  return number % 2 === 0 ? "Even" : "Odd"
}

const evenOrOdd = (number) => number % 2 ? "Odd" : 'Even';

8 kyu - Transportation on vacation

After a hard quarter in the office you decide to get some rest on a vacation. So you will book a flight for you and your girlfriend and try to leave all the mess behind you.

You will need a rental car in order for you to get around in your vacation. The manager of the car rental makes you some good offers.

Every day you rent the car costs $40. If you rent the car for 7 or more days, you get $50 off your total. Alternatively, if you rent the car for 3 or more days, you get $20 off your total.

Write a code that gives out the total amount for different days(d).

Solution

function rentalCarCost(d) {
  // Your solution here
  //하루 렌트비는 $40입니다.
  //7일 이상 렌터카를 대여하면 총 금액에서 $50 할인을 받을 수 있습니다.
  //또는 3일 이상 렌터카를 렌트하면 총 금액에서 $20 할인을 받을 수 있습니다.

  //다른 날짜(d)에 대한 총 금액을 제공하는 코드를 작성하세요.

  if(d >= 7){
   return (d * 40) - 50;
  } else if(d >= 3){
  return (d * 40) - 20;
  } else {
    return d * 40
  }

}

function baseCost(days, rate) {
  return days * rate;
}

function discountRate(days) {
  if ( days >= 7 ) {
    return 50;
  }
  else if ( days >= 3 ) {
    return 20;
  }
  else {
    return 0;
  }
}

function rentalCarCost(days) {
  return baseCost(days, 40) - discountRate(days);
}

const rentalCarCost = d => d * 40 - ((d > 6) ? 50 : ((d > 2) ? 20 : 0));

function rentalCarCost(d) {
  return d * 40 - (d >= 7 ? 50 : (d >= 3 ? 20 : 0));
}

function rentalCarCost(d) {
  if(d<3) return d * 40;
  if(7>d && d>=3) return (d*40 -20);
  if(d>=7) return (d*40 -50);
}

function rentalCarCost(days) {
    var dayCost = 40;

    var discount = 0;
    if(days >= 3) discount += 20;
    if(days >= 7) discount += 30;

    return dayCost * days - discount;
}

8 kyu - L1: Set Alarm

Write a function named setAlarm/set_alarm/set-alarm/setalarm (depending on language) which receives two parameters. The first parameter, employed, is true whenever you are employed and the second parameter, vacation is true whenever you are on vacation.

The function should return true if you are employed and not on vacation (because these are the circumstances under which you need to set an alarm). It should return false otherwise. Examples:

employed | vacation
true     | true     => false
true     | false    => true
false    | true     => false
false    | false    => false

Solution

function setAlarm(employed, vacation){
  return employed === true && vacation === false ? true : false
}

const setAlarm = (employed, vacation) => employed && !vacation;

function setAlarm(employed, vacation){
  return employed && !vacation;
}

function setAlarm(employed, vacation){
  return (employed && !vacation) ? true : false;
}

Write a function that takes a list of strings as an argument and returns a filtered list containing the same elements but with the 'geese' removed.

The geese are any strings in the following array, which is pre-populated in your solution:

  ["African", "Roman Tufted", "Toulouse", "Pilgrim", "Steinbacher"]

For example, if this array were passed as an argument:

 ["Mallard", "Hook Bill", "African", "Crested", "Pilgrim", "Toulouse", "Blue Swedish"]

Your function would return the following array:

["Mallard", "Hook Bill", "Crested", "Blue Swedish"]

The elements in the returned array should be in the same order as in the initial array passed to your function, albeit with the 'geese' removed. Note that all of the strings will be in the same case as those provided, and some elements may be repeated.

Solution

function gooseFilter (birds) {
  var geese = ["African", "Roman Tufted", "Toulouse", "Pilgrim", "Steinbacher"];
  return birds.filter(x=> !geese.includes(x))
};

function gooseFilter (birds) {
  var geese = ["African", "Roman Tufted", "Toulouse", "Pilgrim", "Steinbacher"];
  return birds.filter(b => !geese.includes(b));
};

function gooseFilter (birds) {
  var geese = ["African", "Roman Tufted", "Toulouse", "Pilgrim", "Steinbacher"];
  return birds.filter( bird => geese.indexOf(bird) < 0 );
};

8 kyu - A Needle in the Haystack

Can you find the needle in the haystack?

Write a function findNeedle() that takes an array full of junk but containing one "needle"

After your function finds the needle it should return a message (as a string) that says:

"found the needle at position " plus the index it found the needle, so:

Example(Input --> Output)

["hay", "junk", "hay", "hay", "moreJunk", "needle", "randomJunk"] --> "found the needle at position 5"

Note: In COBOL, it should return "found the needle at position 6"

Solution

function findNeedle(haystack) {

  const index = haystack.findIndex((element, index, arr) => element === 'needle');

  return `found the needle at position ${index}`

}

function findNeedle(haystack) {
  return "found the needle at position " + haystack.indexOf("needle");
}

const findNeedle = haystack => `found the needle at position ${haystack.indexOf('needle')}`;

7 kyu - Binary Addition

mplement a function that adds two numbers together and returns their sum in binary. The conversion can be done before, or after the addition.

The binary number returned should be a string.

Examples:(Input1, Input2 --> Output (explanation)))

1, 1 --> "10" (1 + 1 = 2 in decimal or 10 in binary)
5, 9 --> "1110" (5 + 9 = 14 in decimal or 1110 in binary)

Solution

function addBinary(a,b) {
  // 10진수를 2진수로 변경

  return (a+b).toString(2)

}

자바스크립트에서는 toString() 과parseInt() 를 이용해 손쉽게 숫자 진수들을 변환 할 수 있다.

var decimal = 1023; 

var binary = decimal.toString(2);    // 2진수로
var octal = decimal.toString(8);    // 8진수로
var hex = decimal.toString(16);        // 16진수로

Create a function which answers the question "Are you playing banjo?".

If your name starts with the letter "R" or lower case "r", you are playing banjo!

The function takes a name as its only argument, and returns one of the following strings:

name + " plays banjo"
name + " does not play banjo"

Names given are always valid strings.

Solution

function areYouPlayingBanjo(name) {
  return name[0] === 'R' || name[0] === 'r' ? `${name} plays banjo` : `${name} does not play banjo` ;
}

function areYouPlayingBanjo(name) {
  return name + (name[0].toLowerCase() == 'r' ? ' plays' : ' does not play') + " banjo";
}

function areYouPlayingBanjo(name) {
  if (name[0].toLowerCase() === 'r') {
    return name + ' plays banjo';
  } else {
    return name + ' does not play banjo';
  }
}

8 kyu - Third Angle of a Triangle

You are given two interior angles (in degrees) of a triangle.

Write a function to return the 3rd.

Note: only positive integers will be tested.

https://en.wikipedia.org/wiki/Triangle

Solution

function otherAngle(a, b) {
  return 180 - (a + b);
}

const otherAngle = (a, b) => 180 - a - b

8 kyu - Fake Binary

Given a string of digits, you should replace any digit below 5 with '0' and any digit 5 and above with '1'. Return the resulting string.

Note: input will never be an empty string

Solution

function fakeBin(x){
//숫자 문자열이 주어지면 5 이하의 숫자는 '0'으로, 5 이상의 숫자는 '1'로 바꿔야 합니다. 결과 문자열을 반환합니다.
//참고: 입력은 절대 빈 문자열이 될 수 없습니다.

  const str = x.split("");
  const result = str.map((i)=>{
    return Number(i) >= 5 ? 1:0
  });

return result.join("")
}

function fakeBin(x) {
    return x.split('').map(n => n < 5 ? 0 : 1).join('');
}

function fakeBin(x) {
  return x.replace(/\d/g, d => d < 5 ? 0 : 1);
}

8 kyu - Grasshopper - Personalized Message

Create a function that gives a personalized greeting. This function takes two parameters: name and owner.

Use conditionals to return the proper message:

Solution

function greet (name, owner) {
  return `Hello ${name === owner ? 'boss' : 'guest'}` 
}

function greet (name, owner) {
  return name === owner ? 'Hello boss' :     'Hello guest';
}

8 kyu Grasshopper - Terminal game move function

Terminal game move function

In this game, the hero moves from left to right. The player rolls the dice and moves the number of spaces indicated by the dice two times.

Create a function for the terminal game that takes the current position of the hero and the roll (1-6) and return the new position.

Example:

move(3, 6) should equal 15

Solution

function move (position, roll) {
  // return the new position
  return position + (roll*2)
}

const move = (position, roll) => position + roll * 2

function move (position, roll) {
  return position + roll * 2
}

8 kyu - Grasshopper - Check for factor

This function should test if the factor is a factor of base.

Return true if it is a factor or false if it is not.

About factors

Factors are numbers you can multiply together to get another number.

2 and 3 are factors of 6 because: 2 * 3 = 6

• You can find a factor by dividing numbers. If the remainder is 0 then the number is a factor.
• You can use the mod operator (%) in most languages to check for a remainder

For example 2 is not a factor of 7 because: 7 % 2 = 1

Note: base is a non-negative number, factor is a positive number.

Solution

function checkForFactor (base, factor) {
  return base % factor === 0 ? true : false
}

function checkForFactor (base, factor) {
  return base % factor === 0;
}

const checkForFactor = (base, factor) => base % factor === 0;

Complete the solution so that it reverses the string passed into it.

'world'  =>  'dlrow'
'word'   =>  'drow'

Solution

function solution(str){
  return str.split('').reverse().join('')
}

const solution = s => [...s].reverse().join('')

8 kyu - Convert boolean values to strings 'Yes' or 'No'.

Complete the method that takes a boolean value and return a "Yes" string for true, or a "No" string for false.

Solution

function boolToWord( bool ){
  return bool === true ? "Yes" : "No"
}

function boolToWord( bool ){
  return bool ? 'Yes':'No';
}

let boolToWord = bool => bool ? 'Yes' : 'No';

8 kyu - You Can't Code Under Pressure #1

Code as fast as you can! You need to double the integer and return it.

Solution

function doubleInteger(i) {
  // i will be an integer. Double it and return it.
  return i * 2;
}

function doubleInteger(i) {
  // i will be an integer. Double it and return it.
  return i+i;
}

8 kyu - MakeUpperCase

Write a function which converts the input string to uppercase.

Solution

function makeUpperCase(str) {
  return str.toUpperCase()
}

8 kyu - Grasshopper - Grade book

Grade book

Complete the function so that it finds the average of the three scores passed to it and returns the letter value associated with that grade.

Tested values are all between 0 and 100. Theres is no need to check for negative values or values greater than 100.

Solution

function getGrade (s1, s2, s3) {
  let score = (s1+s2+s3)/3

  if(score >= 90) {
    return 'A'
  } else if (score >= 80){
    return 'B'
  } else if(score >= 70){
    return 'C'
  } else if(score >= 60){
    return 'D'
  } else {
    return 'F'
  }
}

function getGrade (s1, s2, s3) {
     let score = (s1 + s2 + s3) / 3;
     if (score >= 90) {
         return 'A';
     }
     if (score >= 80) {
         return 'B';
     }
     if (score >= 70) {
         return 'C';
     }
     if (score >= 60) {
         return 'D';
     }
     return 'F';
}

function getGrade (s1, s2, s3) {
  avg = (s1+s2+s3)/3;
  if (avg < 60)  return "F";
    else if (avg < 70) return "D";
    else if (avg < 80) return "C";
    else if (avg < 90) return "B";
    else return "A";
}

function getGrade (s1, s2, s3) {
  var s = (s1 + s2 + s3) / 3
  return s >= 90 ? "A" : s >= 80 ? "B" : s >= 70 ? "C" : s >= 60 ? "D" : "F"
}

7 kyu - Number of People in the Bus

There is a bus moving in the city which takes and drops some people at each bus stop.

You are provided with a list (or array) of integer pairs. Elements of each pair represent the number of people that get on the bus (the first item) and the number of people that get off the bus (the second item) at a bus stop.

Your task is to return the number of people who are still on the bus after the last bus stop (after the last array). Even though it is the last bus stop, the bus might not be empty and some people might still be inside the bus, they are probably sleeping there :D

Take a look on the test cases.

Please keep in mind that the test cases ensure that the number of people in the bus is always >= 0. So the returned integer can't be negative.

The second value in the first pair in the array is 0, since the bus is empty in the first bus stop.

Solution

var number = function(busStops){
  // Good Luck!
//  도시에는 각 버스 정류장에서 일부 사람들을 태우고 내리는 버스가 있습니다.
//  정수 쌍의 목록(또는 배열)이 제공됩니다.  각 쌍의 요소는 버스에 타는 사람의 수(첫 번째 항목)와 버스 정류장에서 버스에서 내리는 사람의 수(두 번째 항목)를 나타냅니다.
//  당신의 임무는 마지막 버스 정류장 이후(마지막 배열 이후) 버스에 아직 남아 있는 사람들의 수를 반환하는 것입니다.  
// 마지막 정류장임에도 불구하고 버스가 비어있지 않을 수도 있고, 아직 버스 안에 사람들이 있을 수도 있고, 아마 거기서 자고 있을 수도 있어요 :D

//  테스트 케이스를 살펴보세요.

  console.log(busStops)

  // 배열을 돌면서 첫번째 자릿수를 더하고
  // 배열을 돌면서 두번째 자리수를 더해서

  // 두 값의 차이를 결과로 반환

  let value1 = 0;
  let value2 = 0;
  let a = busStops.map((i)=>{

      value1 += i[0]
      value2 += i[1]
  })

  return value1 - value2
}

const number = (busStops) => busStops.reduce((rem, [on, off]) => rem + on - off, 0);

var number = function(busStops){
    var totalPeople = 0;
  for (var i=0; i<busStops.length; i++) {
      totalPeople += busStops[i][0];
    totalPeople -= busStops[i][1];
  }
  return totalPeople;
}

var number = function(busStops){
  // Good Luck!
  var num=0;
  for(var i=0;i<busStops.length;i++){
      num+=busStops[i][0]-busStops[i][1]
  }
  return num;
}

7 kyu - Mumbling

This time no story, no theory. The examples below show you how to write function accum:

Examples:

accum("abcd") -> "A-Bb-Ccc-Dddd"
accum("RqaEzty") -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt") -> "C-Ww-Aaa-Tttt"

The parameter of accum is a string which includes only letters from a..z and A..Z.

Solution

function accum(s) {

  // 문자열을 입력받고 소문자로 변경한 뒤
  // 배열로 쪼갠 뒤 배열의 자릿수 만큼 문자열을 반복

  const list = s.toLowerCase().split("")
  const newList = list.map((i,z)=>{
    return  i.toUpperCase() + i.toLowerCase().repeat(z)
  })

  return newList.join("-")

}

function accum(s) {
    return s.split('').map((c, i) => (c.toUpperCase() + c.toLowerCase().repeat(i))).join('-');
}

function accum(s) {
    return s.split('').map((x,index) => x.toUpperCase()+Array(index+1).join(x.toLowerCase())).join('-');
}

function accum(str) {
    var letters = str.split('');
  var result = [];
  for (var i = 0; i < letters.length; i++) {
    result.push(letters[i].toUpperCase() + Array(i + 1).join(letters[i].toLowerCase()));
  }
  return result.join('-');
}

CSS로 라디오 버튼을 숨긴 경우에 주로 발생

라디오 버튼 숨김 CSS

.radio_box input {
    position: absolute;
    top: -9999px;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0)
}

.radio_box input {
    position: absolute;
    top: -9999px;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0)
}


// 해결방법들

// 라디오버튼 일 경우
input[type="radio"] {
    display: none
}

// 체크박스 일 경우
input[type="checkbox"] {
    display: none
}

//  visibility: hidden; 추가
//  top 값을 할당하지 않거나 'auto'

.hiddenInput {
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
}

저전력 모드일 때 배터리 잔량이 노란색으로 표시 됨

const video = document.getElementById('myVideo');
video.addEventListener('suspend', () => {
  // We're in low-power mode, show fallback UI
});
video.addEventListener('play', () => {
  // Remove fallback UI if user plays video manually
});

const myVideo = document.getElementById("myVideo");

myVideo
  .play()
  .then(() => {
    console.log("저전력 모드 아님");
  })
  .catch((error) => {
    console.log(error, "저전력모드");
    // do something
  });



var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // 자동 재생 시작!
  }).catch(error => {
     // 자동 재생이 막힘.
     promise.style.display = 'none';
  });
}


const video = document.querySelector("video");
 if (video.paused) {
      video.style.display = 'none';
}

운영 배포 시 코드 video의 poster 속성을 가져와서 img 태그를 만들어서 넣어줌

function handleIOSLowPowerMode(videoTag) {
    videoTag.play()
        .then(() => {
            // 비디오 재생 성공
        })
        .catch((error) => {
            // 비디오 재생 실패 (저전력 모드)
            const posterSrc = videoTag.getAttribute('poster');
            const imgElem = document.createElement('img');
            imgElem.src = posterSrc;
            imgElem.alt = 'alt을 넣어줍니다.';
            imgElem.style.width = '100%';

            // 비디오 요소를 이미지 요소로 대체
            videoTag.parentNode.replaceChild(imgElem, videoTag);
        });
}

// 사용
const videoElem = document.querySelector('.video');
handleIOSLowPowerMode(videoElem);

https://logfetch.com/html-autoplay/

예시 gif는 크림 화면

이미지 크기는 유지하고 간격이 늘어나 도록

<div class="box">
    <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
        </span>
        <p class="name">이미지1</p>
    </a>
      <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지2" />
        </span>
        <p class="name">이미지2</p>
    </a>
      <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지3" />
        </span>
        <p class="name">이미지3</p>
    </a>
      <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지4" />
        </span>
        <p class="name">이미지4</p>
    </a>
      <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지5" />
        </span>
        <p class="name">이미지5</p>
    </a>
      <a href="#">
        <span class="img_wrap">
            <img src="https://dummyimage.com/300x200/000/fff" alt="이미지6" />
        </span>
        <p class="name">이미지6</p>
    </a>
</div>

.box {
    display: flex;
    gap: 12px 6px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 0 12px;
    a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        width: calc((100% - 12px) / 3);
        overflow: hidden;
        .img_wrap {
            width: 52px;
            height: 52px;
            overflow: hidden;
            border-radius: 12px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .name {
            margin-top: 8px;
            font-size: 12px;
            font-weight: $fw-regular;
            line-height: 1.33;
            color: $gray2;
            text-align: center;
        }
    }
}

크림 사이트 화면

간격은 유지하고 이미지 크기 조절

이미지 비율에 따라 padding-bottom 조절 현재 요구사항은 width:100px 일 때 hegith:64px

        <div class="container">
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
               <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
        </div>

    .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px 8px;
        a {
            display: block;
            width: calc((100% - 8px) / 2);
        }
        .img_wrap {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 64%;
            overflow: hidden;
            border-radius: 6px;
            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                z-index: 1;
                object-fit: cover;
            }
            &::before{
                content: "";
                @include thumOverDeem;
            }
        }
        .name {
            margin-top: 8px;
            font-size: 12px;
            font-weight: $fw-regular;
            line-height: 1.33;
            color: $gray2;
            text-align: center;
            @include single-ellipsis;
        }
    }

보통 아래와 같은 형식으로 snippet을 사용했으나

<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

최근에는 아래와 같은 형태로 많이 쓰이고 있음 (공식문서 참고 https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)

<script setup>

</script>

<template>
  <div>

  </div>
</template>

<style scoped>

</style>

작업 폴더 경로에 들어가서 터미널에 입력

mkdir -p .vscode && curl -L https://raw.githubusercontent.com/sdras/vue-vscode-snippets/943ccfc9ba0b3b85d05dfc8b6f9e220db8ebc81e/snippets/vue.json -o .vscode/vue.json.code-snippets

.vscode 경로에 vue.json.code-snippets 파일이 생성되며

vue 파일에서 vbase~를 입력할 때 나오는 추천 snippet에 vbase-3-ts-setup-first 를 선택하면 가 먼저 나오게 된다.

VSCode User Snippets에 관련된 내용을 찾으면 더 세세한 설정이 가능하다.

https://musma.github.io/2019/08/12/vscode-code-snippets.html

// grid-columnizer 믹스인 정의
@mixin grid-columnizer($cols: null, $gaps: null) {

    // grid-cols 처리 시작
    // $cols 값이 null인 경우 에러 메시지 출력
    @if $cols == null {
        @error 'grid-columnizer 믹스인에서 cols 값을 전달해야 합니다.';
    }
    // $cols 값이 'none'인 경우 grid-template-columns를 none으로 설정
    @else if $cols == "none" {
        grid-template-columns: none;
    }
    // $cols 값이 단위 없는 숫자인 경우 grid-template-columns를 repeat 함수로 설정
    @else if type-of($cols) == "number" and unitless($cols) {
        grid-template-columns: repeat($cols, minmax(0, 1fr));
    }
    // 위 조건들을 만족하지 않는 나머지 경우에는 $cols 값을 그대로 사용
    else {
        grid-template-columns: $cols;
    }

    // gap 처리 시작
    // $gaps 값이 null이 아닌 경우
    @if $gaps != null {
        // $gaps 값이 list가 아니고 단위가 px 또는 vw인 경우
        @if type-of($gaps) != "list" {
            @if unit($gaps) == "vw" or unit($gaps) == "px" {
                gap: $gaps;
            }
            // 허용되지 않는 단위인 경우 에러 메시지 출력
            @else {
                @error '간격(gaps)에 대한 단위가 잘못되었습니다. px와 vw만 허용됩니다.';
            }
        }
        // $gaps 값이 두 개의 요소를 갖는 리스트인 경우
        @else if length($gaps) == 2 {
            @if (unit(nth($gaps, 1)) == "vw" or unit(nth($gaps, 1)) == "px") and (unit(nth($gaps, 2)) == "vw" or unit(nth($gaps, 2)) == "px") {
                row-gap: nth($gaps, 1);
                column-gap: nth($gaps, 2);
            }
            // 허용되지 않는 단위인 경우 에러 메시지 출력
            @else {
                @error '간격(gaps)에 대한 단위가 잘못되었습니다. px와 vw만 허용됩니다.';
            }
        }
    }
}

// vw 함수 정의: 특정 픽셀 값을 vw 단위로 변환
@function vw($value) {
    // 1vw의 픽셀 값에 대한 context 설정 (여기서는 750px 기준으로 7.5px)
    $vw-context: (750 * 0.01) * 1px;
    // 입력된 픽셀 값을 vw 단위로 변환하여 반환
    @return ($value/$vw-context) * 1vw;
}



// 사용
.some-element{
    display:grid;
    // 예시
    @include grid-columnizer(2, vw(10px));
    @include grid-columnizer(2, vw(10px) vw(20px));
    @include grid-columnizer(2, 10px);
    @include grid-columnizer(2, 10px 20px);
}

주의 사항 - 빈 공백이나 줄바꿈이 들어가면 적용되지 않음

<!-- 적용가능-->
<div></div>
<!-- 적용가능-->
<div><!--I'm still empty, even with this comment. --></div>

<!-- 줄바꿈으로 적용 안됨 -->
<div>

</div>

<!-- 공백으로 적용 안됨 -->
<div> </div>

.list {
    display: flex;
    &:not(:empty) {
        margin-top: 12px;
        margin-bottom: 7px;
    }
    ...
    &:not(:empty) + .notice {
        display: block;
        font-size: 12px;
        font-weight: $fw-regular;
        line-height: 1.33;
        color: $color-d01f3c;
    }
}