DEV Community

Cover image for My #javascriptmas experience and solutions
Francesco Luppi
Francesco Luppi

Posted on

My #javascriptmas experience and solutions

#javascript #javascriptmas #scrimba

Oh Oh Oh Merry Christmas to all!
This past few days I followed and practiced for 24 days with this beautiful series of challenges.

I'm talking about the 24 Days of Jascriptmas on Scrimba!

If you want to know more and try it yourself to see how well prepared you are on Javascript I'm suggesting you to take a chance on that and don't go further on this article just yet, so you don't spoil yourself the solutions ;)

In order to get the certificate to complete my journey, I have to create this post with my solutions, and if you want you can use it to compare them with the ones that you came up with.
Here we go!

Day 1: Candies 

function candies(children, candy) {
    //  write code here.
    return result = Math.floor(candy/children) * children
}
Enter fullscreen mode Exit fullscreen mode

Day 2: Deposit Profit 

function depositProfit(deposit, rate, threshold) {
    //  write code here.
    let years = 0
    while (deposit < threshold){
        deposit += (deposit*20)/100
        years++
    }
    return years
}
Enter fullscreen mode Exit fullscreen mode

Day 3: Chunky Monkey 

function chunkyMonkey(values, size) {
    //  write code here.
    let result = []
    result.push(values.slice(0, size), values.slice(size, values.length+1))
    return result
}
Enter fullscreen mode Exit fullscreen mode

Day 4: Century From Year 

function centuryFromYear(num) {
    //  write code here.
    const r = num % 100, century = num / 100
    return (r === 0) ? century : Math.floor(century) + 1
}
Enter fullscreen mode Exit fullscreen mode

Day 5: Reverse A String 

function reverseAString(str) {
    //  write code here.
    return str.split('').reverse().join('')
}
Enter fullscreen mode Exit fullscreen mode

Day 6: Sort by Length 

function sortByLength(strs) {
    //  write code here.
    return strs = strs.sort((a, b)=> a.length - b.length)
}
Enter fullscreen mode Exit fullscreen mode

Day 7: Count Vowel Consonant 

function countVowelConsonant(str) {
  // write code here
  let vowels = ['a','e','i','o','u','y']
  return str.split('').reduce((acc,cur)=> vowels.includes(cur) ? acc + 1 : acc + 2, 0)
}
Enter fullscreen mode Exit fullscreen mode

Day 8: The Rolling Dice 

// Write your code here 👇
const dice = document.querySelector('.dice')
const num = document.querySelector('.num p')
dice.addEventListener('click',()=>{
    let numDice = Math.floor(Math.random() * (7 - 1)) + 1
    num.textContent = numDice
    dice.textContent = ''
    for(let i=1; i<=numDice;i++){
        let dot = document.createElement('div')
        dot.classList = 'dot'
        dice.appendChild(dot)
    }
})
Enter fullscreen mode Exit fullscreen mode 
body {
    background-color: #AEB8FE;
    height: 100vh;
    display: grid;
    place-content:center;
}

.dice {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background-color: #EFE5DC;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(30px, 2fr) );
    grid-gap: 8px;
    place-content:center;
    padding: 5px;
}

.dot {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    border-radius: 15px;
    background-color: black;
    place-content: center;
    margin: 0 auto;
}

p{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Day 9: Sum Odd Fibonacci numbers 

function sumOddFibonacciNumbers(num) {
    //  write code here.
    if(num <= 0){
        console.error('Invalid input!')
        return NaN;
    }
    let answer = 2
    let a = 1, b = 1, c = 0
    while(a+b <= num){
        c = a+b
        a = b
        b = c
        if(c%2)
            answer += c
    }
    return answer
}
Enter fullscreen mode Exit fullscreen mode

Day 10: Adjacent Elements Product 

function adjacentElementsProduct(nums) {
    //  write code here.
    let pro = 0, max = 0
    for (let i=0; i<nums.length; i++){
        pro = nums[i]*nums[i+1]
        if(pro>max) max=pro
        console.log(pro)
    }
    return max
}
Enter fullscreen mode Exit fullscreen mode

Day 11: Avoid Obstacles 

function avoidObstacles(nums) {
    //  write code here.
    let numSorted = nums.sort((a, b) => a - b)
    for (let i=1; i<numSorted[numSorted.length-1]; i++) {
        if(numSorted.every((n) => n % i !== 0)) {
            return i;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Day 12: Valid Time 

function validTime(str) {
    //  write code here.
    let hm = str.split(':')
    return ((parseInt(hm[0])>=0&&parseInt(hm[0])<=24) && (parseInt(hm[1])>=0&&parseInt(hm[1])<=60)) ?  true : false
}
Enter fullscreen mode Exit fullscreen mode

Day 13: Extract Each Kth 

function extractEachKth(nums, index) {
    //  write code here.
    return nums.filter(num=>num%index!=0)
}
Enter fullscreen mode Exit fullscreen mode

Day 14: Maximal Adjacent Difference 

function arrayMaximalAdjacentDifference(nums) {
    //  write code here.
    let dif = 0, max = 0
    for (let i=0; i<nums.length; i++){
        dif = Math.abs(nums[i]-nums[i+1])
        if(dif>max) max=dif
    }
    return max
}
Enter fullscreen mode Exit fullscreen mode

Day 15: Carousel 

const gallery = document.querySelector('.gallery')
const prev = document.querySelector('.previous')
const next = document.querySelector('.next')
let photos = document.querySelectorAll('.card')
let position = 0, current, i = 0

next.addEventListener('click', ()=>{
    if(i!=(photos.length-1)){
        gallery.style.transform  = 'translateX(' + (position-=220) + 'px)'
        ++i
    }else{
        next.style.opacity = 0.3
        prev.style.opacity = 1
    }
})
prev.addEventListener('click',()=>{
    if(i!=0){
        --i
        gallery.style.transform  = 'translateX(' + (position+=220) + 'px)'
    }else{
        prev.style.opacity = 0.3
        next.style.opacity = 1
    }
})
Enter fullscreen mode Exit fullscreen mode

Day 16: Insert Dashes 

function insertDashes(arr) {
    // write code here
    let newArr = arr.split(' ')
    return newArr[0].split('').join('-')+' '+newArr[1].split('').join('-')
}
Enter fullscreen mode Exit fullscreen mode

Day 17: Different Symbols Naive 

function differentSymbolsNaive(str) {
    //  write code here.
    let s = new Set(str.split(''))
    return s.size
}
Enter fullscreen mode Exit fullscreen mode

Day 18: Array Previous Less 

function arrayPreviousLess(nums) {
    //  write code here.
    let result = []
    for(let i = 0; i < nums.length; i++){
        if(nums[i] > nums[i-1]){
            result.push(nums[i-1])
        }else{
            result.push(-1)
        }
    }
    return result
}
Enter fullscreen mode Exit fullscreen mode

Day 19: Alphabet Subsequence 

function alphabetSubsequence(str) {
    //  write code here.
    for(let i=1; i<=str.length; i++){
        if (str.charCodeAt(i) >= str.charCodeAt(i+1) && str[i]!=str[i-1]) return false
        else return true
    }
}
Enter fullscreen mode Exit fullscreen mode

Day 20: Domain Type 

function domainType(domains) {
    //  write code here.
    let result = domains.map(domain=>{
        domainSingle = domain.split('.')
        if (domainSingle[(domainSingle.length-1)] === "org") return 'organization'
        else if (domainSingle[(domainSingle.length-1)] === "net") return 'network'
        else if (domainSingle[(domainSingle.length-1)] === "info") return 'information'
        else if (domainSingle[(domainSingle.length-1)] === "com") return 'commercial'
    })
    return result
}
Enter fullscreen mode Exit fullscreen mode

Day 21: Sum Of Two 

function sumOfTwo(nums1, nums2, value) {
    //  write code here.
    let result = false
    for(let i = 0; i<nums1.length; i++){
        for(let j=0; j<nums2.length; j++){
            console.log(nums1[i]+nums2[j])
            if((nums1[i]+nums2[j])===42){
                result = true
            }
        }
    }
    return result
}
Enter fullscreen mode Exit fullscreen mode

Day 22: Extract Matrix Column 

function extractMatrixColumn(matrix, column) {
    //  write code here.
    let result = []
    matrix.map(mat => result.push(mat[column]))
    return result
}
Enter fullscreen mode Exit fullscreen mode

Day 23: Social Media Input 

let counter = document.querySelector('#counterFooter')
let tweet = document.querySelector('#string')
let btn = document.querySelector('#btn')
tweet.addEventListener('keydown', (e)=>{
    let chr = 140 - tweet.value.length
    counter.textContent = chr + '/140'
    if(chr > 20)counter.classList.remove('ending')
    if(chr <= 20) counter.classList.add('ending')
    if(chr<=0) {
        btn.classList.add('buttonDisabled')
        if(e.key != 'Backspace'){
            tweet.blur()
        }
    }else{
        btn.classList.remove('buttonDisabled')
    }
})
Enter fullscreen mode Exit fullscreen mode 
.ending{
    color: red !important;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Day 24: Test Your Agility 

//EDIT THIS FUNCTION
const spin = async () => {
  for (var i=0;i<101;i++) {
    if(i==100){
        i=0;
    }
    if(pushed == true){
        stop(i); //Trigger this function when the STOP button has been pushed
        break;
    }else{
        spinningElem.innerHTML = i;
        await sleep(75) //Paste this 
    }  
  }
}

//EDIT THIS FUNCTION
function stop(i){
    //WRITE YOUR CODE HERE
    var result = document.getElementById('result'); //display your result message here
    if(i===targetInt) result.textContent = 'Y E S! You did it'
    else if(i < targetInt) result.textContent =`Oh no! You missed it by ${targetInt-i}`
    else result.textContent =`Oh no! You missed it by ${i-targetInt}`

}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ninjasoards profile image

Setup PostgreSQL w/ pgvector in a docker container

David Y Soards -

jeremycmorgan profile image

How to Make a Retro 2D JavaScript Game Part 1

Jeremy Morgan -

eddiegulay profile image

Secure Text Encryption and Decryption with Vanilla JavaScript

Eddie Gulay -

viktorle1294 profile image

How to visualize bar chart with react-chart-2, showing label on the bar

Viktor Le -