{"id":7185,"date":"2020-12-01T17:13:43","date_gmt":"2020-12-01T16:13:43","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=7185"},"modified":"2020-12-01T17:13:43","modified_gmt":"2020-12-01T16:13:43","slug":"scrimba-javascript-advent-calendar","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/12\/01\/scrimba-javascript-advent-calendar\/","title":{"rendered":"Scrimba: JavaScript Advent Calendar"},"content":{"rendered":"\n

Solutions for the Scrimba JavaScriptmas<\/a> Challenge<\/p>\n\n\n\n

Day 24: Test Your Agility!<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
var pushed = false \/\/Has the stop button been pushed - false is default\nvar targetInt; \/\/The target number to stop the wheel on\nvar spinningElem = document.getElementById('spinning'); \/\/The spinning number\n\n\nconst maxLoop = 10;\nconst waitTime = 250;\n\n\/\/event listener\ndocument.getElementById(\"buttonPressed\").addEventListener(\"click\", buttonPressed);\n\n\/\/When the stop button is pushed\nfunction buttonPressed(){\n    pushed = true;\n}\n\n\/\/set the target Int\nfunction setTargetInt(){\n    var targetElem = document.getElementById('targetNum');\n    targetInt=Math.floor(Math.random() * (maxLoop + 1))\n    targetElem.innerHTML = targetInt;\n}\n\n\/\/sleep const\nconst sleep = (milliseconds) => {\n  return new Promise(resolve => setTimeout(resolve, milliseconds))\n}\n\n\nvar curr_spin=-1;\n\n\/\/EDIT THIS FUNCTION\nconst spin = async () => {\n    var spinningElem = document.getElementById('spinning');\n    for(let spin=0; spin < maxLoop; spin++) {\n        spinningElem.innerHTML = spin;\n        console.log('spin:', spin, targetInt, curr_spin)\n\n        if (!pushed) {\n            \/\/\n        } else if (spin == targetInt) {\n            console.log('Button pushed and won')\n             var result = document.getElementById('result');\n            result.innerText = \"WON!\";\n            spin = maxLoop+1;\n        } else {\n            console.log('Buitton pushed but missed')\n            spin = maxLoop+1;\n        }\n        \n        await sleep(waitTime)\n    }\n}\n\n\/\/main\nsetTargetInt();\nspin();<\/pre>\n\n\n\n
Day 23: Social media input challeng<\/a>e<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"index.css\">\n    <\/head>\n    <body>\n        <div class=\"container\">\n            <textarea type=\"text\" id=\"tweet\" placeholder=\"Type in the box\"><\/textarea>\n            <div id=\"counterFooter\">140\/140<\/div>\n            <button id=\"btn\"><h2>Tweet<\/h2><\/button>\n        <\/div>\n        <script src=\"index.js\"><\/script>\n    <\/body>\n<\/html><\/pre>\n\n\n\n
body{\n  background-color: #023F6A;\n  font-family: sans-serif;\n}\n.container{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\ntextarea{\n  width:50\n  height: 30vh;\n  background-color: rgb(21, 32, 43);\n  color: #fff;\n  border-radius:10px;\n}\ntextarea::placeholder{\n    color:#fff;\n}\n#counterFooter {\n  margin-top: 0.2rem;\n  font-size:0.8rem;\n  color: #fff;\n  margin-left:30\n  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\nbutton{\n  width:50\n  background-color: rgb(29, 161, 242);\n  border-radius: 10px;\n  padding: 0 10\n}\n.tweetRed {\n    color: red;\n}\nbutton h2{\n    color: #fff;\n}\n.buttonDisabled {\n   opacity: .5;\n   cursor: default;\n}<\/pre>\n\n\n\n
const counter = document.getElementById('counterFooter');\nconst button = document.getElementById('btn');\nfunction updateState() {\n    const nrOfChar = 140 - tweet.value.length;\n    \n    counter.innerText = nrOfChar + '\/140';\n    \n    (nrOfChar < 20) ? tweet.classList.add(\"tweetRed\") : tweet.classList.remove(\"tweetRed\");    \n    (nrOfChar <  0) ? btn.classList.add(\"buttonDisabled\") : btn.classList.remove(\"buttonDisabled\");\n}\nfunction handleKeyUp(event) {\n    updateState()\n}\ntweet.addEventListener('keyup', handleKeyUp);\nupdateState()<\/pre>\n\n\n\n
Day 22: Extract Matrix Column<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function extractMatrixColumn(matrix, column) {\n    let extracted = []\n    \n    matrix.forEach( row => {\n        extracted.push(row[column])\n    })\n    \n    return extracted;\n}<\/pre>\n\n\n\n
function extractMatrixColumn(matrix, column) {   \n    return matrix.map( row => row[column])\n}<\/pre>\n\n\n\n
Day 21: Sum of 2<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function sumOfTwo(nums1, nums2, value) {\n    let result = false;\n    \n    nums1.forEach( num1 => {\n        nums2.forEach( num2 => {            \n            if ( (num1 + num2) === value) {\n                result = true;\n            }\n        })\n    })\n    return result;\n}<\/pre>\n\n\n\n
Day 20: Domain Type<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function domainType(domains) {\n    map = { \"org\": \"organization\",\n            \"com\": \"commercial\", \n            \"net\": \"network\",\n            \"info\":  \"information\"\n    }\n    \n    types=[]    \n    \n    domains.forEach( (domain) => {\n        last = domain.split('.').slice(-1)[0]\n        \n        types.push(map[last])\n    })\n    \n    return types\n}<\/pre>\n\n\n\n
Day 19: Alpahabet Subsequence<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function alphabetSubsequence(str) {\n    chars = str.split(\"\")\n    \n    result=true\n    for(pos=1; pos<chars.length; pos++) {       \n        result = result && chars[pos-1] < chars[pos] \n    }\n    return result\n}<\/pre>\n\n\n\n
Day 18: Array previous less<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function arrayPreviousLess(nums) {\n    let result = [];\n    let temp=[];\n    \n    for(indx=0; indx < nums.length; indx++) {\n        curr = nums[indx];\n        \n        \/\/ Build array with previous values\n        temp.push(curr)\n        \n        \/\/ Find previous values less than current value\n        mins = temp.filter( (val) => val < curr)\n        \n        \/\/ Return value at most right\n        max = (mins.length == 0) ? -1 : max = mins[mins.length-1];\n        \n        result.push(max);\n    }\n    \n    return result;\n}<\/pre>\n\n\n\n
Day 17: Different symbols naive<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function differentSymbolsNaive(str) {\n    m={};\n    \n    n=0;\n    str.split(\"\").sort().forEach( (c) => {                \n        if (! (c in m)) n++;\n        m[c]=1;\n    });\n        \n    return n\n}<\/pre>\n\n\n\n
Day 16: Insert dashes<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function insertDashes(arr) {\n    return arr.split(\" \").map( part =>part.split(\"\").join(\"-\") ).join(\" \");\n}<\/pre>\n\n\n\n
Day 15: Javascript Carousel<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function getIndexOfCurrent(tags) {\n\tlet result = -1;\n\ttags.forEach((node, indx) => {\n\t\tif (node.classList.contains('curr')) {\n\t\t\tresult = indx;\n\t\t}\n\t});\n\treturn result;\n}\nfunction move(dir) {\n\tvar tags = Array.prototype.slice.call(\n\t\tdocument.getElementsByClassName('card')\n\t);\n\tlet curr = getIndexOfCurrent(tags);\n\tif (dir === 'prev') {\n\t\tnext = curr === 0 ? 0 : curr - 1;\n\t}\n\tif (dir === 'next') {\n\t\tnext = curr === tags.length - 1 ? tags.length - 1 : curr + 1;\n\t}\n\ttags[curr].setAttribute('class', 'card last');\n\ttags[next].setAttribute('class', 'card curr');\n}<\/pre>\n\n\n\n
<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"index.css\">\n    <\/head>\n    <body>\n        \n        <div class=\"container\">\n            <img src=\"previous.svg\" class=\"previous\" alt=\"previous image\">\n            <div class=\"gallery-wrapper\">\n                <div class=\"gallery\">\n                    <img class=\"card curr\" src=\"presents.jpg\" alt=\"Christmas Cookies\">\n                    <img class=\"card\" src=\"cookies.jpg\" alt=\"Christmas Cookies\">\n                    <img class=\"card\" src=\"santa.jpg\" alt=\"Christmas Cookies\">\n                    <img class=\"card\" src=\"candycane.jpg\" alt=\"Christmas Cookies\">\n                    <img class=\"card\" src=\"reindeer.jpg\" alt=\"Christmas Cookies\">\n                <\/div>\n            <\/div>\n            <img src=\"next.svg\" class=\"next\" alt=\"next image\">\n        \n        <\/div>\n        \n        <script src=\"index.pack.js\"><\/script>\n    \n    <\/body>\n<\/html><\/pre>\n\n\n\n
\/*\nThanks to these fine individuals from Unsplash:\nhttps:\/\/unsplash.com\/photos\/AmzKuEnr1VY\nhttps:\/\/unsplash.com\/photos\/eDnJQL21amc\nhttps:\/\/unsplash.com\/photos\/LXy2DOOxESQ\nhttps:\/\/unsplash.com\/photos\/KBKHXjhVQVM\nhttps:\/\/unsplash.com\/photos\/PxM8aeJbzvk\n*\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600&display=swap');\nhtml,\nbody {\n\tmargin: 0;\n\tpadding: 0;\n\theight: 100vh;\n\tfont-family: 'Playfair Display';\n\tdisplay: grid;\n\tjustify-content: center;\n}\nimg {\n\twidth: 200px;\n}\n.previous,\n.next {\n\twidth: 35px;\n\tjustify-self: center;\n\talign-self: center;\n\tcursor: pointer;\n}\n.previous {\n\topacity: 0.3;\n}\n.container {\n\tdisplay: grid;\n\tgrid-template-columns: 20\n\tplace-content: center;\n}\n.card {\n\twidth: 100\n\tdisplay: none;\n}\n.curr {\n\tdisplay: block;\n}\n.curr {\n\tanimation-duration: 5s;\n\tanimation-name: slideIn;\n}\n.last {\n\tanimation-duration: 2s;\n\tanimation-name: slideOut;\n}\n@keyframes slideOut {\n\tfrom { opacity: 1; }\n\tto   { opacity: 0; }\n}\n@keyframes slideIn {\n\tfrom { opacity: 0; }\n\tto   { opacity: 1; }\n}<\/pre>\n\n\n\n
Day 14: Maximal Adjacent Difference<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    let result=0, max=0, val1=0, val2=0;\n    \n    for(pos=0; pos < nums.length; pos++) {\n        \n        [val1, val2 ] = [ nums[pos], nums[pos+1] ];\n        max = (val1 > val2) ? (val1 - val2) : (val2 - val1);\n        \n        if (max > result) {\n            result = max;\n        }\n    }\n     \n    return result;\n}<\/pre>\n\n\n\n
Day 13: Extract Eacth Kth<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function extractEachKth(nums, kth) {\n    return nums.filter( (value, index) => (index+1) \n}<\/pre>\n\n\n\n
Day 12: Valid Time<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Number.prototype.between = function(min, max) {\n  return this > min && this < max;\n};\nfunction validTime(str) {\n    const parts = str.split(':')\n   \n    return parseInt(parts[0]).between(0,24) && parseInt(parts[1]).between(0,59);\n}<\/pre>\n\n\n\n
Day 11: Avoid Obstacles<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function avoidObstacles(nums) {\n    const sorted = nums.sort();\n        \n    for(num=2; num <= sorted[nums.length-1]; num++) {\n        match = nums.filter((val) => (val \n        if (match.length === 0) {\n            return num;\n        }\n    }\n}<\/pre>\n\n\n\n
Day 10<\/a>: Adjacent Elements Product<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function adjacentElementsProduct(nums) {\n    let result = 0;\n    \n    for (i1 = 0; i1 < nums.length-1; ++i1) {\n        const product=nums[i1]*nums[i1+1];\n                 \n        if (product > result) {\n            result = product;\n        }\n    }\n    \n    return result;\n}<\/pre>\n\n\n\n
Day 09<\/a>: Sum Odd Fibonacci Numbers<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
function sumOddFibonacciNumbers(num) {\n    let fibPrev=1;\n    let fib=0;\n    let sum=0;\n    \n    while (fibPrev < num) {       \n        [ fibPrev, fib ] = [fib + fibPrev, fibPrev];\n        \n        if (fib \n            sum += fib;\n        }\n    }\n    \n    return sum;\n}<\/pre>\n\n\n\n
Day 08: Rolling Dice<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"style.css\">\n        <script src=\"index.pack.js\"><\/script>\n    <\/head>\n    <body>\n        <div class=\"dice\">\n            <div class=\"dot dot_ dot2 dot_ dot4 dot5 dot6\"><\/div>\n            <div class=\"dot dot_ dot_ dot_ dot_ dot_ dot_\"><\/div>\n            <div class=\"dot dot_ dot_ dot3 dot4 dot5 dot6\"><\/div>\n            \n            <div class=\"dot dot_ dot_ dot_ dot_ dot_ dot6\"><\/div>\n            <div class=\"dot dot1 dot_ dot3 dot_ dot5 dot_\"><\/div>\n            <div class=\"dot                          dot6\"><\/div>\n            \n            <div class=\"dot dot_ dot_ dot3 dot4 dot5 dot6\"><\/div>\n            <div class=\"dot\"><\/div>\n            <div class=\"dot dot_ dot2 dot_ dot4 dot5 dot6\"><\/div>\n        <\/div>\n        \n    <\/body>\n<\/html><\/pre>\n\n\n\n
function clear_dice() {\n    document.querySelectorAll('.dot').forEach( (dot) => dot.style.visibility = \"hidden\")\n}\nfunction roll_dice() {\n    const roll = 1 + Math.floor(Math.random() * 6);\n    \n    console.log(roll);\n    clear_dice()\n    document.querySelectorAll('.dot'+roll).forEach( (dot) => {\n        dot.style.visibility = \"visible\"\n    })\n}\nclear_dice()\ndocument.getElementsByClassName('dice')[0].addEventListener('click', roll_dice)<\/pre>\n\n\n\n
body {\n    background-color: #AEB8FE;\n    display: flex;\n}\n.dice {\n    width: 230px;\n    height: 230px;\n    border-radius: 10px;\n    background-color: #EFE5DC;\n    margin: 100px;\n    \n    display: grid;\n    grid-template-columns: repeat(3, 40px);\n    gap: 20px;\n    grid-auto-rows: minmax(40px, 40px);\n}\n.dot {\n    width: 40px;\n    height: 40px;\n    border-radius: 15px;\n    background-color: black;\n    margin: 35px;\n    \n    visibility: hidden\n}\n.dot1 { visibility: none; }\n.dot2 { visibility: none; }\n.dot3 { visibility: none; }\n.dot4 { visibility: none; }\n.dot5 { visibility: none; }\n.dot6 { visibility: none; }<\/pre>\n\n\n\n
Day 07: Count Vowel Consonant<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function countVowelConsonant(str) {\n  function reducer(s,c) {\n      return s + (\"aeiou\".includes(c) ? 1 : 2)\n  };\n    \n  return str.split(\"\").reduce(reducer, 0)\n}<\/pre>\n\n\n\n
Day 06: Sort By Length<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function sortByLength(strs) {    \n    return strs.sort(function(arg1, arg2) { return arg1.length - arg2.length })\n}<\/pre>\n\n\n\n
Day 05: Reverse String<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function reverseAString(str) {   \n    return str.split(\"\").reverse().join(\"\")\n}<\/pre>\n\n\n\n
Day 04: Century From Year<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function centuryFromYear(num) {\n    return Math.floor((num + 99) \/ 100)\n}<\/pre>\n\n\n\n
Day 03: Chunky Monkey<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function chunkyMonkey(values, size) {\n    result = [];\n    pos = 0;\n    \n    while (pos < values.length) {\n        result.push(values.slice(pos, pos+size));\n        pos += size;\n    }\n    \n    return result;\n}<\/pre>\n\n\n\n
Day 02: Deposit Profit<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
function depositProfit(deposit, rate, threshold) {\n    let profit = deposit;\n    let years = 0\n    while (profit < threshold) {\n        profit += profit * 0.01 * rate;\n        years++;\n    }\n    \n    return years;\n}<\/pre>\n\n\n\n
Day 01: Candies<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
https:\/\/scrimba.com\/learn\/adventcalendar\/note-at-0-00-coef0430d83cd2a72113bbf09<\/a><\/p>\n\n\n\n
function candies(children, candy) {\n    return children * Math.floor(candy \/ children)\/\/  write code here.\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Solutions for the Scrimba JavaScriptmas Challenge Day 24: Test Your Agility! Day 23: Social media input challenge Day 22: Extract Matrix Column Day 21: Sum of 2 Day 20: Domain Type Day 19: Alpahabet Subsequence Day 18: Array previous less Day 17: Different symbols naive Day 16: Insert dashes Day 15: Javascript Carousel Day 14: Maximal Adjacent Difference Day 13: Extract Eacth Kth Day 12: Valid Time Day 11: Avoid Obstacles Day 10: Adjacent Elements Product Day 09: Sum Odd Fibonacci Numbers Day 08: Rolling Dice Day 07: Count Vowel Consonant Day 06: Sort By Length Day 05: Reverse String Day […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[38],"tags":[112],"class_list":["post-7185","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript-advents-calendar-christmas-xmas"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7185"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7185\/revisions"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}