01. December 2020
Scrimba: JavaScript Advent Calendar
Solutions for the Scrimba JavaScriptmas Challenge
Day 24: Test Your Agility!
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 challeng](https://t.co/YAgWjXFnBL?amp=1)e
<figure class="wp-block-image size-large"></figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="html" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""><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>
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="css" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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;
}
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="js" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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
matrix.forEach( row => {
extracted.push(row[column])
})
return extracted;
}
</body>
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="css" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">/*
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
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](https://t.co/mbFbqSvXjL?amp=1)
<figure class="wp-block-image size-large"></figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">function extractEachKth(nums, kth) {
return nums.filter( (value, index) => (index+1) % kth != 0);
}
Day 12: Valid Time
return parseInt(parts[0]).between(0,24) && parseInt(parts[1]).between(0,59);
}
## Day 11: Avoid Obstacles
<figure class="wp-block-image size-large"></figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">function avoidObstacles(nums) {
const sorted = nums.sort();
for(num=2; num <= sorted[nums.length-1]; num++) {
match = nums.filter((val) => (val % num === 0));
if (match.length === 0) {
return num;
}
}
}
Day 10: Adjacent Elements Product
for (i1 = 0; i1 < nums.length-1; ++i1) {
const product=nums[i1]*nums[i1+1];
if (product > result) {
result = product;
}
}
return result;
}
## [Day 09](https://scrimba.com/scrim/coe4b4ff08304596d25900b52): Sum Odd Fibonacci Numbers
<figure class="wp-block-image size-large">[](https://scrimba.com/scrim/coe4b4ff08304596d25900b52)</figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">function sumOddFibonacciNumbers(num) {
let fibPrev=1;
let fib=0;
let sum=0;
while (fibPrev < num) {
[ fibPrev, fib ] = [fib + fibPrev, fibPrev];
if (fib % 2 != 0) {
sum += fib;
}
}
return sum;
}
Day 08: Rolling Dice
<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>
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="js" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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)
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="css" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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
return str.split("").reduce(reducer, 0) }
## Day 06: Sort By Length
<figure class="wp-block-image size-large"></figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="js" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">function sortByLength(strs) {
return strs.sort(function(arg1, arg2) { return arg1.length - arg2.length })
}
Day 05: Reverse String
Day 04: Century From Year
Day 03: Chunky Monkey
while (pos < values.length) {
result.push(values.slice(pos, pos+size));
pos += size;
}
return result;
}
## Day 02: Deposit Profit
<figure class="wp-block-image size-large"></figure>```
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="js" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">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
<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="js" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">function candies(children, candy) {
return children * Math.floor(candy / children)// write code here.
}