Scrimba: JavaScript Advent Calendar

by Ralph Javascript

Solutions for the Scrimba JavaScriptmas Challenge

Day 24: Test Your Agility!

var pushed = false //Has the stop button been pushed - false is default
var targetInt; //The target number to stop the wheel on
var spinningElem = document.getElementById('spinning'); //The spinning number


const maxLoop = 10;
const waitTime = 250;

//event listener
document.getElementById("buttonPressed").addEventListener("click", buttonPressed);

//When the stop button is pushed
function buttonPressed(){
    pushed = true;
}

//set the target Int
function setTargetInt(){
    var targetElem = document.getElementById('targetNum');
    targetInt=Math.floor(Math.random() * (maxLoop + 1))
    targetElem.innerHTML = targetInt;
}

//sleep const
const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}


var curr_spin=-1;

//EDIT THIS FUNCTION
const spin = async () => {
    var spinningElem = document.getElementById('spinning');
    for(let spin=0; spin < maxLoop; spin++) {
        spinningElem.innerHTML = spin;
        console.log('spin:', spin, targetInt, curr_spin)

        if (!pushed) {
            //
        } else if (spin == targetInt) {
            console.log('Button pushed and won')
             var result = document.getElementById('result');
            result.innerText = "WON!";
            spin = maxLoop+1;
        } else {
            console.log('Buitton pushed but missed')
            spin = maxLoop+1;
        }
        
        await sleep(waitTime)
    }
}

//main
setTargetInt();
spin();

Day 23: Social media input challenge

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <textarea type="text" id="tweet" placeholder="Type in the box"></textarea>
            <div id="counterFooter">140/140</div>
            <button id="btn"><h2>Tweet</h2></button>
        </div>
        <script src="index.js"></script>
    </body>
</html>
body{
  background-color: #023F6A;
  font-family: sans-serif;
}
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
textarea{
  width:50%;
  height: 30vh;
  background-color: rgb(21, 32, 43);
  color: #fff;
  border-radius:10px;
}
textarea::placeholder{
    color:#fff;
}
#counterFooter {
  margin-top: 0.2rem;
  font-size:0.8rem;
  color: #fff;
  margin-left:30%;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
button{
  width:50%;
  background-color: rgb(29, 161, 242);
  border-radius: 10px;
  padding: 0 10%;
}
.tweetRed {
    color: red;
}
button h2{
    color: #fff;
}
.buttonDisabled {
   opacity: .5;
   cursor: default;
}
const counter = document.getElementById('counterFooter');
const button = document.getElementById('btn');
function updateState() {
    const nrOfChar = 140 - tweet.value.length;
    
    counter.innerText = nrOfChar + '/140';
    
    (nrOfChar < 20) ? tweet.classList.add("tweetRed") : tweet.classList.remove("tweetRed");    
    (nrOfChar <  0) ? btn.classList.add("buttonDisabled") : btn.classList.remove("buttonDisabled");
}
function handleKeyUp(event) {
    updateState()
}
tweet.addEventListener('keyup', handleKeyUp);
updateState()

Day 22: Extract Matrix Column

function extractMatrixColumn(matrix, column) {
    let extracted = []
    
    matrix.forEach( row => {
        extracted.push(row[column])
    })
    
    return extracted;
}
function extractMatrixColumn(matrix, column) {   
    return matrix.map( row => row[column])
}

Day 21: Sum of 2

function sumOfTwo(nums1, nums2, value) {
    let result = false;
    
    nums1.forEach( num1 => {
        nums2.forEach( num2 => {            
            if ( (num1 + num2) === value) {
                result = true;
            }
        })
    })
    return result;
}

Day 20: Domain Type

function domainType(domains) {
    map = { "org": "organization",
            "com": "commercial", 
            "net": "network",
            "info":  "information"
    }
    
    types=[]    
    
    domains.forEach( (domain) => {
        last = domain.split('.').slice(-1)[0]
        
        types.push(map[last])
    })
    
    return types
}

Day 19: Alpahabet Subsequence

function alphabetSubsequence(str) {
    chars = str.split("")
    
    result=true
    for(pos=1; pos<chars.length; pos++) {       
        result = result && chars[pos-1] < chars[pos] 
    }
    return result
}

Day 18: Array previous less

function arrayPreviousLess(nums) {
    let result = [];
    let temp=[];
    
    for(indx=0; indx < nums.length; indx++) {
        curr = nums[indx];
        
        // Build array with previous values
        temp.push(curr)
        
        // Find previous values less than current value
        mins = temp.filter( (val) => val < curr)
        
        // Return value at most right
        max = (mins.length == 0) ? -1 : max = mins[mins.length-1];
        
        result.push(max);
    }
    
    return result;
}

Day 17: Different symbols naive

function differentSymbolsNaive(str) {
    m={};
    
    n=0;
    str.split("").sort().forEach( (c) => {                
        if (! (c in m)) n++;
        m[c]=1;
    });
        
    return n
}

Day 16: Insert dashes

function insertDashes(arr) {
    return arr.split(" ").map( part =>part.split("").join("-") ).join(" ");
}

Day 15: Javascript Carousel

function getIndexOfCurrent(tags) {
	let result = -1;
	tags.forEach((node, indx) => {
		if (node.classList.contains('curr')) {
			result = indx;
		}
	});
	return result;
}
function move(dir) {
	var tags = Array.prototype.slice.call(
		document.getElementsByClassName('card')
	);
	let curr = getIndexOfCurrent(tags);
	if (dir === 'prev') {
		next = curr === 0 ? 0 : curr - 1;
	}
	if (dir === 'next') {
		next = curr === tags.length - 1 ? tags.length - 1 : curr + 1;
	}
	tags[curr].setAttribute('class', 'card last');
	tags[next].setAttribute('class', 'card curr');
}
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        
        <div class="container">
            <img src="previous.svg" class="previous" alt="previous image">
            <div class="gallery-wrapper">
                <div class="gallery">
                    <img class="card curr" src="presents.jpg" alt="Christmas Cookies">
                    <img class="card" src="cookies.jpg" alt="Christmas Cookies">
                    <img class="card" src="santa.jpg" alt="Christmas Cookies">
                    <img class="card" src="candycane.jpg" alt="Christmas Cookies">
                    <img class="card" src="reindeer.jpg" alt="Christmas Cookies">
                </div>
            </div>
            <img src="next.svg" class="next" alt="next image">
        
        </div>
        
        <script src="index.pack.js"></script>
    
    </body>
</html>
/*
Thanks to these fine individuals from Unsplash:
https://unsplash.com/photos/AmzKuEnr1VY
https://unsplash.com/photos/eDnJQL21amc
https://unsplash.com/photos/LXy2DOOxESQ
https://unsplash.com/photos/KBKHXjhVQVM
https://unsplash.com/photos/PxM8aeJbzvk
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: 'Playfair Display';
	display: grid;
	justify-content: center;
}
img {
	width: 200px;
}
.previous,
.next {
	width: 35px;
	justify-self: center;
	align-self: center;
	cursor: pointer;
}
.previous {
	opacity: 0.3;
}
.container {
	display: grid;
	grid-template-columns: 20% 200px 20%;
	place-content: center;
}
.card {
	width: 100%;
	display: none;
}
.curr {
	display: block;
}
.curr {
	animation-duration: 5s;
	animation-name: slideIn;
}
.last {
	animation-duration: 2s;
	animation-name: slideOut;
}
@keyframes slideOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes slideIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

Day 14: Maximal Adjacent Difference

    let result=0, max=0, val1=0, val2=0;
    
    for(pos=0; pos < nums.length; pos++) {
        
        [val1, val2 ] = [ nums[pos], nums[pos+1] ];
        max = (val1 > val2) ? (val1 - val2) : (val2 - val1);
        
        if (max > result) {
            result = max;
        }
    }
     
    return result;
}

Day 13: Extract Eacth Kth

function extractEachKth(nums, kth) {
    return nums.filter( (value, index) => (index+1)
}

Day 12: Valid Time

Number.prototype.between = function(min, max) {
  return this > min && this < max;
};
function validTime(str) {
    const parts = str.split(':')
   
    return parseInt(parts[0]).between(0,24) && parseInt(parts[1]).between(0,59);
}

Day 11: Avoid Obstacles

function avoidObstacles(nums) {
    const sorted = nums.sort();
        
    for(num=2; num <= sorted[nums.length-1]; num++) {
        match = nums.filter((val) => (val
        if (match.length === 0) {
            return num;
        }
    }
}

Day 10: Adjacent Elements Product

function adjacentElementsProduct(nums) {
    let result = 0;
    
    for (i1 = 0; i1 < nums.length-1; ++i1) {
        const product=nums[i1]*nums[i1+1];
                 
        if (product > result) {
            result = product;
        }
    }
    
    return result;
}

Day 09: Sum Odd Fibonacci Numbers

function sumOddFibonacciNumbers(num) {
    let fibPrev=1;
    let fib=0;
    let sum=0;
    
    while (fibPrev < num) {       
        [ fibPrev, fib ] = [fib + fibPrev, fibPrev];
        
        if (fib
            sum += fib;
        }
    }
    
    return sum;
}

Day 08: Rolling Dice

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="index.pack.js"></script>
    </head>
    <body>
        <div class="dice">
            <div class="dot dot_ dot2 dot_ dot4 dot5 dot6"></div>
            <div class="dot dot_ dot_ dot_ dot_ dot_ dot_"></div>
            <div class="dot dot_ dot_ dot3 dot4 dot5 dot6"></div>
            
            <div class="dot dot_ dot_ dot_ dot_ dot_ dot6"></div>
            <div class="dot dot1 dot_ dot3 dot_ dot5 dot_"></div>
            <div class="dot                          dot6"></div>
            
            <div class="dot dot_ dot_ dot3 dot4 dot5 dot6"></div>
            <div class="dot"></div>
            <div class="dot dot_ dot2 dot_ dot4 dot5 dot6"></div>
        </div>
        
    </body>
</html>
function clear_dice() {
    document.querySelectorAll('.dot').forEach( (dot) => dot.style.visibility = "hidden")
}
function roll_dice() {
    const roll = 1 + Math.floor(Math.random() * 6);
    
    console.log(roll);
    clear_dice()
    document.querySelectorAll('.dot'+roll).forEach( (dot) => {
        dot.style.visibility = "visible"
    })
}
clear_dice()
document.getElementsByClassName('dice')[0].addEventListener('click', roll_dice)
body {
    background-color: #AEB8FE;
    display: flex;
}
.dice {
    width: 230px;
    height: 230px;
    border-radius: 10px;
    background-color: #EFE5DC;
    margin: 100px;
    
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 20px;
    grid-auto-rows: minmax(40px, 40px);
}
.dot {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background-color: black;
    margin: 35px;
    
    visibility: hidden
}
.dot1 { visibility: none; }
.dot2 { visibility: none; }
.dot3 { visibility: none; }
.dot4 { visibility: none; }
.dot5 { visibility: none; }
.dot6 { visibility: none; }

Day 07: Count Vowel Consonant

function countVowelConsonant(str) {
  function reducer(s,c) {
      return s + ("aeiou".includes(c) ? 1 : 2)
  };
    
  return str.split("").reduce(reducer, 0)
}

Day 06: Sort By Length

function sortByLength(strs) {    
    return strs.sort(function(arg1, arg2) { return arg1.length - arg2.length })
}

Day 05: Reverse String

function reverseAString(str) {   
    return str.split("").reverse().join("")
}

Day 04: Century From Year

function centuryFromYear(num) {
    return Math.floor((num + 99) / 100)
}

Day 03: Chunky Monkey

function chunkyMonkey(values, size) {
    result = [];
    pos = 0;
    
    while (pos < values.length) {
        result.push(values.slice(pos, pos+size));
        pos += size;
    }
    
    return result;
}

Day 02: Deposit Profit

function depositProfit(deposit, rate, threshold) {
    let profit = deposit;
    let years = 0
    while (profit < threshold) {
        profit += profit * 0.01 * rate;
        years++;
    }
    
    return years;
}

Day 01: Candies

https://scrimba.com/learn/adventcalendar/note-at-0-00-coef0430d83cd2a72113bbf09

function candies(children, candy) {
    return children * Math.floor(candy / children)//  write code here.
}