js challenger
1.0.0
Vielen Dank, dass Sie sich dieses JS-CALLENGER-Lösungs-Repo angesehen haben.
JSCALLENGER ist eine coole und großartige Website, um die meisten JS -Grundlagen und JS Dom zu üben. Es ist eine sehr hilfreiche JavaScript -Ressource für Anfänger. JSCHALLENGER CERDEM ERIK KÜCKELHEIM. Danke Erik.
In diesem Repo finden Sie verfügbare Lösungen für eine Herausforderung.
Auch für Leetcode -Herausforderungen können Sie dieses Repo überprüfen: Leetcode -Lösungen
JavaScript -Grundlagen
JavaScript -Praxis
JavaScript Dom
Szenario:
Assign a new value to the variable num . The code will not work the way it is . Find the
mistake and fix it . Execute the corrected code .Code -Szenario:
let num = 1 ;
let num = 2 ;
console . log ( num ) ;JS:
let num = 1 ;
num = 2 ;
console . log ( num ) ;Zurück zu Tabelle ⬆
Szenario:
Here , we declare the variable num . But , it has no value yet . Assign a value to it and run
the code .Code -Szenario:
let num ;
console . log ( num ) ;JS:
let num ;
num = 2 ;
console . log ( num ) ;Zurück zu Tabelle ⬆
Szenario:
Here , we have two variables numOne and numTwo . numOne already has a value . Assign
numTwo the value of numOne and run the code .Code -Szenario:
let numOne = 5 ;
let numTwo ;
console . log ( numTwo ) ;JS:
let numOne = 5 ;
let numTwo = numOne ;
console . log ( numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
Below , we attempt to assign the value of a variable named numOne to the variable
numTwo . But , that variable has not been declared yet . Declare a variable named numOne
and run the code .Code -Szenario:
let numTwo = numOne ;
console . log ( numTwo ) ;JS:
let numOne = 5 ;
let numTwo = numOne ;
console . log ( numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
In this simple exercise we declare a variable called num and assign it a value of 5. Then
we try to log the value of the variable using the console . log () method .
But , the console . log () method contains a small mistake . If you try the run the code , you
will see an error message .
Fix the mistake and run the code again .Code -Szenario:
const num = 5 ;
console . log ( Num ) ;JS:
const num = 5 ;
console . log ( num ) ;Zurück zu Tabelle ⬆
Szenario:
This exercise is very similar to the previous one . We declare a variable called num , assign
it a value of 5 , and try to log it . But again , we introduced a small mistake .
Fix the code and run it .Code -Szenario:
console . log ( num ) ;
const num = 5 ;JS:
const num = 5 ;
console . log ( num ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise we practice how to declare a new variable and how to assign it a number .
The console . log () statement below attempts to log a variable named num .
Declare a variable with this name and assign it a number of your choice . Run the code to
see if the number is being logged .Code -Szenario:
console . log ( 'The value of num is: ' + num ) ;JS:
const num = 5 ;
console . log ( 'The value of num is: ' + num ) ;Zurück zu Tabelle ⬆
Szenario:
Here again , we want to assign a new value to a variable that we previously declared . Again , the code will not work the way it is . Find the mistake and fix it . Execute the corrected code .Code -Szenario:
const text = 'hello' ;
text = 'hello world' ;
console . log ( text ) ;JS:
let text = 'hello' ;
text = 'hello world' ;
console . log ( text ) ;Zurück zu Tabelle ⬆
Szenario:
Here , we declare the variable isTrue . But , it has no value yet . Assign a boolean value to it and run the code .Code -Szenario:
let isTrue ;
console . log ( isTrue ) ;JS:
let isTrue ;
isTrue = true ;
console . log ( isTrue ) ;Zurück zu Tabelle ⬆
Szenario:
Here , we declare the variable num and assign it the value 5. We also declare the variable bool which we assign the boolean
representation of num .
Extend the code such that the console . log () statement logs false .Code -Szenario:
let num = 5 ;
const bool = Boolean ( bool ) ;
console . log ( bool ) ;JS:
let num = 5 ;
num = 0 ;
const bool = Boolean ( bool ) ;
console . log ( bool ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Equal operator to check whether numOne and numTwo have the same value . Change the code so that the console . log () statement logs true .Code -Szenario:
const numOne = 5 ;
const numTwo = 6 ;
console . log ( numOne == numTwo ) ;JS:
const numOne = 5 ;
const numTwo = 5 ;
console . log ( numOne == numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Not Equal operator to check whether numOne and numTwo have different values . Change the code so that the console . log () statement logs true .Code -Szenario:
const numOne = 5 ;
const numTwo = 5 ;
console . log ( numOne != numTwo ) ;JS:
const numOne = 5 ;
const numTwo = 6 ;
console . log ( numOne != numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Greater Than operator to check whether the value of numOne is greater than the value of numTwo . Change the code so that the console . log () statement logs true .Code -Szenario:
const numOne = 5 ;
const numTwo = 6 ;
console . log ( numOne > numTwo ) ;JS:
const numOne = 6 ;
const numTwo = 5 ;
console . log ( numOne > numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Less Than operator to check whether the value of numOne is less than the value of numTwo . Change the code so that the console . log () statement logs true .Code -Szenario:
const numOne = 2 ;
const numTwo = 1 ;
console . log ( numOne < numTwo ) ;JS:
const numOne = 1 ;
const numTwo = 2 ;
console . log ( numOne < numTwo ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Greater Than Or Equal operator to check whether the value of numOne is greater than or equal the value of numTwo . It also checks whether the value of numTwo is greater than or equal the value of numThree . Change the code so that both expressions in the console . log () statement logs true .Code -Szenario:
const numOne = 3 ;
const numTwo = 4 ;
const numThree = 2 ;
console . log ( numOne >= numTwo , numTwo >= numThree ) ;JS:
const numOne = 3 ;
const numTwo = 2 ;
const numThree = 2 ;
console . log ( numOne >= numTwo , numTwo >= numThree ) ;Zurück zu Tabelle ⬆
Szenario:
In the console . log () statement below we use the Less Than Or Equal operator to check whether the value of numOne is less than or equal the value of numTwo . It also checks whether the value of numTwo is less than or equal the value of numThree . Change the code so that both expressions in the console . log () statement logs true .Code -Szenario:
const numOne = 1 ;
const numTwo = 4 ;
const numThree = 2 ;
console . log ( numOne <= numTwo , numTwo <= numThree ) ;JS:
const numOne = 1 ;
const numTwo = 1 ;
const numThree = 2 ;
console . log ( numOne <= numTwo , numTwo <= numThree ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise the existing console . log () statement logs the value of the variable text . The variable text has already been declared with an empty string – as indicated by the two single quotes .
Fill in the string with some characters and run the code to see if the string is being logged .Code -Szenario:
const text = '' ;
console . log ( 'The value of text is: ' + text ) ;JS:
const text = 'hello world' ;
console . log ( 'The value of text is: ' + text ) ;Zurück zu Tabelle ⬆
Szenario:
Here , we have declared 3 variables textOne , textTwo , and textThree . An empty string is assigned to all of them .
Do you see how in each case different symbols are used to create the string ? All three of them are valid methods to create a JavaScript string .
Fill in all 3 strings with some characters and run the code to see if the values get logged . In this exercise the existing console . log () statement logs the value of the variable text . The variable text has already been declared with an empty string – as indicated by the two single quotes .
Fill in the string with some characters and run the code to see if the string is being logged .Code -Szenario:
const textOne = '' ;
const textTwo = "" ;
const textThree = `` ;
console . log ( textOne , textTwo , textThree ) ;JS:
const textOne = 'Hello, ' ;
const textTwo = "it's " ;
const textThree = `me` ;
console . log ( textOne , textTwo , textThree ) ;Zurück zu Tabelle ⬆
Szenario:
After we have learnt how to create JavaScript strings , we will now connect 2 strings together . In the code below we use the Addition ( + ) operator to concatenate textOne and textTwo . The console . log () statement logs the resulting string . Currently , the result would be HelloWorld .
Change the code below so that the value of res is Hello WorldCode -Szenario:
const textOne = 'Hello' ;
const textTwo = 'World' ;
const combined = textOne + textTwo ;
console . log ( combined ) ;JS:
const textOne = 'Hello' ;
const textTwo = 'World' ;
const combined = textOne + ' ' + textTwo ;
console . log ( combined ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise we will work with our first if - statement . In the code below we declare a variable num with a value 0. Then , we have an if - statement . The if - statement consists of a condition – the part inside the parentheses – and some code inside a pair of curly braces . The code will assign the variable num a new value 1. But it will only run if the condition is met .
Adjust the condition such that the code inside the curly braces will execute and the console . log () statement logs true .Code -Szenario:
let num = 0 ;
if ( 1 > 2 ) {
num = 1 ;
}
console . log ( num === 1 ) ;JS:
let num = 0 ;
if ( 1 < 2 ) {
num = 1 ;
}
console . log ( num === 1 ) ;Zurück zu Tabelle ⬆
Szenario:
Time to practice what we ' ve learnt so far . In the code below , the if ... statement will assign a new value to the variable text . But only if its condition is met . Currently , the condition is missing .
Add any condition that will be satisfied such that the console . log () statement logs true .Code -Szenario:
let text = 'hello' ;
if ( ) {
text = text + ' world' ;
}
console . log ( text === 'hello world' ) ;JS:
let text = 'hello' ;
if ( text === 'hello' ) {
text = text + ' world' ;
}
console . log ( text === 'hello world' ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise we will work with our first JavaScript function . In the code below we create a function named func . This way of creating functions is called function declaration : the keyword function followed by the name of the function and a pair of parentheses . Then follows some JavaScript code wrapped by curly braces .
Notice that we use the return keyword to make the function return a value , in this case a string .
When we create a function in JavaScript , the statement inside the curly braces is exectued only when the function is called . You can call a function by using its name and a pair of parentheses func ().
Below , we call our function and assign its return value to the variable result . Then , we log the result . To solve this exercise simply have the console . log () statement log the words hello world .Code -Szenario:
function func ( ) {
return 'hello' ;
} ;
const result = func ( ) ;
console . log ( result ) ;JS:
function func ( ) {
return 'hello world' ;
} ;
const result = func ( ) ;
console . log ( result ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise , we use a slightly different way to create a function – a function expression . Here , we create a function and assign it to the variable func . Notice that we omit the name of the function after the function keyword . We call this function the same way as in the previous exercise . But , instead of using the name of the function itself , we call it using the name of the variable to which the function was assigned .
In the code below , we introduced a small mistake when calling the function . Find the mistake and run the code to see if the words hello world are correctly logged .Code -Szenario:
const func = function ( ) {
return 'hello world' ;
} ;
const result = func ;
console . log ( result ) ;JS:
const func = function ( ) {
return 'hello world' ;
} ;
const result = func ( ) ;
console . log ( result ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise , we create a function func . Then , we call func and assign its return value to the variable result .
When you run the code like this , you see that the value undefined is logged . This is the current return value of func because we do not explicitly define a return value ourselfs .
Let func return the value of the variable text .Code -Szenario:
const func = function ( ) {
let text = 'hello' ;
text = text + ' world' ;
} ;
const result = func ( ) ;
console . log ( result ) ;JS:
const func = function ( ) {
let text = 'hello' ;
text = text + ' world' ;
return text ;
} ;
const result = func ( ) ;
console . log ( result ) ;Zurück zu Tabelle ⬆
Szenario:
In this exercise , func declares a variable text with the value hello . Then it returns the value of text . After that , it assigns a new value hello world to the variable text and returns the new value .
But , when you run the code , you see that only the initial value of text ( hello ) is logged . This is because once a function call reaches a return statement , further function execution is stopped . All code after the return statement is ignored .
Adjust the code so that the final value of text is logged .Code -Szenario:
const func = function ( ) {
let text = 'hello' ;
return text ;
text = text + ' world' ;
return text ;
} ;
const result = func ( ) ;
console . log ( result ) ;JS:
const func = function ( ) {
let text = 'hello' ;
text = text + ' world' ;
return text ;
} ;
const result = func ( ) ;
console . log ( result ) ;Zurück zu Tabelle ⬆
Szenario:
Adjust the code snippet so that the console . log statement logs the value 2.Code -Szenario:
let i = 0 ;
function func ( ) {
i = 2 ;
}
setTimeout ( func , 100 )
// expected output = 2
console . log ( i ) ;JS:
let i = 0 ;
function func ( ) {
i = 2 ;
}
func ( ) ;
// expected output = 2
console . log ( i ) ;Zurück zu Tabelle ⬆
Szenario:
Adjust the code snippet so that the value 0 is logged first and then the value 1.Code -Szenario:
let count = 0 ;
function increment ( ) {
count = count + 1 ;
}
increment ( ) ;
setTimeout ( ( ) => {
console . log ( count ) ;
} , 1000 ) ;
console . log ( count ) ;JS:
let count = 0 ;
function increment ( ) {
count = count + 1 ;
}
setTimeout ( ( ) => {
increment ( ) ;
console . log ( count ) ;
} , 1000 ) ;
console . log ( count ) ;Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two numbers ( a and b ) as argument
Sum a and b
Return the resultCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a + b ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two values , say a and b , as arguments
Return true if the two values are equal and of the same typeCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a === b ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a value as argument
Return the type of the valueCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return typeof a ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string ( a ) and a number ( n ) as argument
Return the nth character of 'a'Code -Szenario:
function myFunction ( a , n ) {
return
}JS:
function myFunction ( a , n ) {
return a [ n - 1 ] ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string ( a ) as argument
Remove the first 3 characters of a
Return the resultCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string ( a ) as argument
Get the first 3 characters of a
Return the resultCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 0 , 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string as argument
The string contains the substring 'is'
Return the index of 'is'Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . indexOf ( 'is' ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string ( a ) as argument
Extract the first half a
Return the resultCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 0 , a . length / 2 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string ( a ) as argument
Remove the last 3 characters of a
Return the resultCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 0 , - 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two numbers ( a and b ) as argument
Return b percent of aCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return b / 100 * a
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes 6 values ( a , b , c , d , e , f ) as arguments
Sum a and b
Then substract by c
Then multiply by d and divide by e
Finally raise to the power of f and return the result
Tip : mind the orderCode -Szenario:
function myFunction ( a , b , c , d , e , f ) {
return
}JS:
function myFunction ( a , b , c , d , e , f ) {
return ( ( ( a + b - c ) * d ) / e ) ** f ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two strings ( a and b ) as arguments . If a contains b , append b to the
beginning of a . If not , append it to the end . Return the concatenationCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a . indexOf ( b ) === - 1 ? a + b : b + a
}JS:
function myFunction ( a , b ) {
return a . includes ( b ) ? ` ${ b } ${ a } ` : ` ${ a } ${ b } `
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a number as argument . If the number is even , return true . Otherwise ,
return falseCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a % 2 === 0
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two strings ( a and b ) as arguments . Return the number of times a occurs in
b .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return b . split ( a ) . length - 1
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a number ( a ) as argument . If a is a whole number ( has no decimal place ),
return true . Otherwise , return false .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a - Math . floor ( a ) === 0
}JS:
function myFunction ( a ) {
return parseInt ( a ) === a
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two numbers ( a and b ) as arguments . If a is smaller than b , divide a by b .
Otherwise , multiply both numbers . Return the resulting valueCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a < b ? a / b : a * b
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a number ( a ) as argument . Round a to the 2 nd digit after the comma .
Return the rounded numberCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return Number ( a . toFixed ( 2 ) ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a number ( a ) as argument . Split a into its individual digits and return
them in an array . Tipp : you might want to change the type of the number for the splittingCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
const string = a + '' ;
const strings = string . split ( '' ) ;
return strings . map ( digit => Number ( digit ) )
}JS:
function myFunction ( a ) {
return a . toString ( )
. split ( '' )
. map ( charNum => parseInt ( charNum ) )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) and a value ( n ) as argument . Return the nth element of 'a'Code -Szenario:
function myFunction ( a , n ) {
return
}JS:
function myFunction ( a , n ) {
return a [ n - 1 ] ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) as argument . Remove the first 3 elements of 'a' . Return the
resultCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) as argument . Extract the last 3 elements of 'a' . Return the
resulting arrayCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( - 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) as argument . Extract the first 3 elements of a . Return the
resulting arrayCode -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . slice ( 0 , 3 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) and a number ( n ) as arguments . It should return the last n
elements of a .Code -Szenario:
function myFunction ( a , n ) {
return
}JS:
function myFunction ( a , n ) {
return a . slice ( - n ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) and a value ( b ) as argument . The function should remove all
elements equal to 'b' from the array . Return the filtered array .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a . filter ( arrItem => arrItem !== b )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array ( a ) as argument . Return the number of elements in a .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . length ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of numbers as argument . Return the number of negative values
in the array .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . filter ( ( el ) => el < 0 ) . length ;
}JS:
function myFunction ( a ) {
const isNegative = num => num < 0 ;
return a . filter ( isNegative ) . length ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of strings as argument . Sort the array elements alphabetically .
Return the result .Code -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
return arr . sort ( ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of numbers as argument . It should return an array with the
numbers sorted in descending order .Code -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
// > 0 => sort a after b
// < 0 => sort a before b
// === 0 => keep original order of a and b
return arr . sort ( ( a , b ) => b - a )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of numbers as argument . It should return the sum of the
numbers .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return a . reduce ( ( acc , cur ) => acc + cur , 0 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of numbers as argument . It should return the average of the
numbers .Code -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
return arr . reduce ( ( acc , cur ) => acc + cur , 0 ) / arr . length
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of strings as argument . Return the longest string .Code -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
return arr . reduce ( ( a , b ) => a . length <= b . length ? b : a )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array as argument . It should return true if all elements in the array are
equal . It should return false otherwise .Code -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
return new Set ( arr ) . size === 1 ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes arguments an arbitrary number of arrays . It should return an array
containing the values of all arrays .Code -Szenario:
function myFunction ( ... arrays ) {
return
}JS:
function myFunction ( ... arrays ) {
return arrays . flat ( ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an array of objects as argument . Sort the array by property b in ascending
order . Return the sorted arrayCode -Szenario:
function myFunction ( arr ) {
return
}JS:
function myFunction ( arr ) {
// > 0 => sort a after b
// < 0 => sort a before b
// === 0 => keep original order of a and b
const sort = ( x , y ) => x . b - y . b ;
return arr . sort ( sort ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two arrays as arguments . Merge both arrays and remove duplicate values .
Sort the merge result in ascending order . Return the resulting arrayCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return [ ... new Set ( [ ... a , ... b ] ) ] . sort ( ( x , y ) => x - y ) ;
}JS:
function myFunction ( a , b ) {
let merged = a . concat ( b ) ;
let noDuplicate = Array . from ( new Set ( merged ) ) ;
let sorted = noDuplicate . sort ( ( a , b ) => a - b ) ;
return sorted ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object with two properties as argument . It should return the value of
the property with key country .Code -Szenario:
function myFunction ( obj ) {
return
}JS:
function myFunction ( obj ) {
return obj . country ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object with two properties as argument . It should return the value of
the property with key 'prop-2' . Tipp : you might want to use the square brackets property accessorCode -Szenario:
function myFunction ( obj ) {
return
}JS:
function myFunction ( obj ) {
return obj [ 'prop-2' ] ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object with two properties and a string as arguments . It should return
the value of the property with key equal to the value of the stringCode -Szenario:
function myFunction ( obj , key ) {
return
}JS:
function myFunction ( obj , key ) {
return obj [ key ]
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object ( a ) and a string ( b ) as argument . Return true if the object has a
property with key 'b' . Return false otherwise . Tipp : test case 3 is a bit tricky because the value of
property 'z' is undefined . But the property itself exists .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
// The in operator returns true if the specified property is in
// the object or its prototype chain.
return b in a ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object ( a ) and a string ( b ) as argument . Return true if the object has a
property with key 'b' , but only if it has a truthy value . In other words , it should not be null or
undefined or false . Return false otherwise .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return Boolean ( a [ b ] ) ;
}JS:
function myFunction ( a , b ) {
return a [ b ] ? true : false ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a string as argument . Create an object that has a property with key 'key'
and a value equal to the string . Return the object .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return { key : a }
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two strings ( a and b ) as arguments . Create an object that has a property
with key 'a' and a value of 'b' . Return the object .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return { [ a ] : b }
}Zurück zu Tabelle ⬆
Szenario:
WWrite a function that takes two arrays ( a and b ) as arguments . Create an object that has properties
with keys 'a' and corresponding values 'b' . Return the object .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a . reduce ( ( acc , cur , i ) => ( { ... acc , [ cur ] : b [ i ] } ) , { } )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object ( a ) as argument . Return an array with all object keys .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return Object . keys ( a ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object as argument . In some cases the object contains other objects
with some deeply nested properties . Return the property 'b' of object 'a' inside the original object if it
exists . If not , return undefinedCode -Szenario:
function myFunction ( obj ) {
return
}JS:
function myFunction ( obj ) {
return obj ?. a ?. b ;
}JS:
function myFunction ( obj ) {
return obj . a && obj . a . b ? obj . a . b : undefined
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object ( a ) as argument . Return the sum of all object values .Code -Szenario:
function myFunction ( a ) {
return
}JS:
function myFunction ( a ) {
return Object . values ( a ) . reduce ( ( sum , cur ) => sum + cur , 0 ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object as argument . It should return an object with all original object
properties . except for the property with key 'b'Code -Szenario:
function myFunction ( obj ) {
return
}JS:
function myFunction ( obj ) {
const { b , ... rest } = obj ;
return rest ;
}JS:
function myFunction ( obj ) {
if ( "b" in obj ) {
return delete obj . b && obj ;
}
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two objects as arguments . Unfortunately , the property 'b' in the second
object has the wrong key . It should be named 'd' instead . Merge both objects and correct the wrong
property name . Return the resulting object . It should have the properties 'a' , 'b' , 'c' , 'd' , and 'e'Code -Szenario:
function myFunction ( x , y ) {
return
}JS:
function myFunction ( x , y ) {
const { b , ... rest } = y ;
return { ... x , ... rest , d : b } ;
}JS:
function myFunction ( x , y ) {
y . d = y . b ;
delete y . b ;
return { ... x , ... y } ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes an object ( a ) and a number ( b ) as arguments . Multiply all values of 'a' by
'b' . Return the resulting object .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return Object . entries ( a ) . reduce ( ( acc , [ key , val ] ) => {
return { ... acc , [ key ] : val * b } ;
} , { } ) ;
}Zurück zu Tabelle ⬆
Szenario:
Sounds easy , but you need to know the trick . Write a function that takes two date instances as
arguments . It should return true if the dates are equal . It should return false otherwise .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a . getTime ( ) === b . getTime ( ) ;
}JS:
function myFunction ( a , b ) {
return a - b === 0 ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two date instances as argument . It should return the number of days that
lies between those dates .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
const dif = Math . abs ( a - b ) ;
return dif / 1000 / 60 / 60 / 24
}JS:
functiion myFunction ( a , b ) {
return Math . abs ( ( a . getTime ( ) / 86400000 ) - ( b . getTime ( ) / 86400000 ) )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two date instances as argument . It should return true if they fall on the
exact same day . It should return false otherwise .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a . getFullYear ( ) === b . getFullYear ( ) &&
a . getMonth ( ) === b . getMonth ( ) &&
a . getDate ( ) === b . getDate ( )
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two date instances as argument . It should return true if the difference between the dates is less
than or equal to 1 hour . It should return false otherwise .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return Math . abs ( a - b ) / 1000 / 60 <= 60
}JS:
function myFunction ( a , b ) {
const timeDiffLimitInMinutes = 60 ;
let firstDateTime = a . getTime ( ) ;
let secondDateTime = b . getTime ( ) ;
let timeDiffInMiliSeconds = Math . abs ( firstDateTime - secondDateTime ) ;
let timeDiffInMinutes = timeDiffInMiliSeconds / 60000 ;
if ( timeDiffInMinutes > timeDiffLimitInMinutes ) return false ;
return true ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two date instances ( a and b ) as arguments . It should return true if a is earlier than b . It should
return false otherwise .Code -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
return a < b
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a Set and a value as arguments . Check if the value is present in
the SetCode -Szenario:
function myFunction ( set , val ) {
return
}JS:
function myFunction ( set , val ) {
return set . has ( val ) ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a Set as argument . Convert the Set to an Array . Return the ArrayCode -Szenario:
function myFunction ( set ) {
return
}JS:
function myFunction ( set ) {
return [ ... set ] ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes two Sets as arguments . Create the union of the two sets . Return
the result . Tipp : try not to switch to Arrays , this would slow down your codeCode -Szenario:
function myFunction ( a , b ) {
return
}JS:
function myFunction ( a , b ) {
const result = new Set ( a ) ;
b . forEach ( ( el ) => result . add ( el ) ) ;
return result ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes three elements of any type as arguments . Create a Set from
those elements . Return the resultCode -Szenario:
function myFunction ( a , b , c ) {
return
}JS:
function myFunction ( a , b , c ) {
const set = new Set ( ) ;
set . add ( a ) ;
set . add ( b ) ;
set . add ( c ) ;
return set ;
}Zurück zu Tabelle ⬆
Szenario:
Write a function that takes a Set and a value as argument . If existing in the Set , remove the
value from the Set . Return the resultCode -Szenario:
function myFunction ( set , val ) {
return
}JS:
function myFunction ( set , val ) {
set . delete ( val ) ;
return set ;
}JS:
function myFunction ( set , val ) {
return set . has ( val ) ? set . delete ( val ) && set : set ;
}Zurück zu Tabelle ⬆
Szenario:
In this scenario , the existing code adds an eventListener for a click event on a variable buttonElem . It expects buttonElem to be the button element in the example UI . But , that element is not selected yet .
Assign the button element to the variable buttonElem . Click the button to verify that the code is working .
Hint : Make use of the unique id of the button element .HTML:
< button type =" button " id =" button " > OFF </ button >Code -Szenario:
const buttonElem =
buttonElem . addEventListener ( 'click' , ( ) => {
const oldText = buttonElem . innerText ;
return button . innerText = oldText === "ON" ? "OFF" : "ON" ;
} ) ;JS:
const buttonElem = document . getElementById ( "button" ) ;
buttonElem . addEventListener ( 'click' , ( ) => {
const oldText = buttonElem . innerText ;
return button . innerText = oldText === "ON" ? "OFF" : "ON" ;
} ) ;Zurück zu Tabelle ⬆
Szenario:
Here , the existing code expects the variables 'buttonElem' and 'inputElem' to represent the button and input elements in the example UI .
Assign the respective elements to the variables .
In this case , the two elements do not have unique identifiers - like for example an id . Instead they are direct descendents of a div element with id 'wrapper' . Use an appropriate selector method !
Click the button to verify that the code is working .HTML:
< div id =" wrapper " >
< input type =" text " value =" OFF " readonly />
< button type =" button " > Click Me </ button >
</ div >Code -Szenario:
const buttonElem =
const inputElem =
buttonElem . addEventListener ( 'click' , ( ) => {
const oldText = inputElem . value ;
return inputElem . value = oldText === "ON" ? "OFF" : "ON" ;
} ) ;JS:
const buttonElem = document . querySelector ( "#wrapper button" ) ;
const inputElem = document . querySelector ( "#wrapper input" ) ;
buttonElem . addEventListener ( 'click' , ( ) => {
const oldText = inputElem . value ;
return inputElem . value = oldText === "ON" ? "OFF" : "ON" ;
} ) ;Zurück zu Tabelle ⬆
Szenario:
In this scenario , we are looking for a list of elements gathered in one variable - rather than only one element .
Assign the list items in the view to the variable 'listItems' by using an appropriate selector method .
Once you have completed the code below , verify it by hovering over the list items until all items have the value 'ON'HTML:
< ul id =" list " >
< li > OFF </ li >
< li > OFF </ li >
< li > OFF </ li >
< li > OFF </ li >
< li > OFF </ li >
< li > OFF </ li >
</ ul >Code -Szenario:
const listItems =
const handleHover = ( event ) => {
return event . target . innerText = 'ON' ;
} ;
if ( listItems . length > 1 ) {
listItems . forEach ( item => item . addEventListener ( 'mouseover' , handleHover ) ) ;
}JS:
const listItems = document . querySelectorAll ( "#list li" ) ;
const handleHover = ( event ) => {
return event . target . innerText = 'ON' ;
} ;
if ( listItems . length > 1 ) {
listItems . forEach ( item => item . addEventListener ( 'mouseover' , handleHover ) ) ;
}Zurück zu Tabelle ⬆
Szenario:
The Javascript function handleText fills the input field with the words Hello World . But , there is no code to execute this function .
Complete the existing code below such that the function is called when the button is clicked . Verify by clicking the button .HTML:
< input type =" text " id =" input " readonly />
< button type =" button " id =" button " > Click Me </ button >Code -Szenario:
const button = document . getElementById ( 'button' ) ;
const input = document . getElementById ( 'input' ) ;
const handleClick = ( ) => {
input . value = 'Hello World' ;
} ;JS:
const button = document . getElementById ( 'button' ) ;
const input = document . getElementById ( 'input' ) ;
const handleClick = ( ) => {
input . value = 'Hello World' ;
} ;
button . addEventListener ( 'click' , handleClick ) ;Zurück zu Tabelle ⬆
Szenario:
The Javascript function changeText changes the text inside the circle . But again , there is no code to execute this function .
Complete the existing code below such that the function is called when the cursor moves onto the circle . Verify that your code works by hovering over the circle .HTML:
< div id =" element " >
Hover Me
</ div >Code -Szenario:
const element = document . getElementById ( 'element' ) ;
const changeText = ( ) => {
element . innerText = 'Thanks!' ;
} ;JS:
const element = document . getElementById ( 'element' ) ;
const changeText = ( ) => {
element . innerText = 'Thanks!' ;
} ;
element . addEventListener ( "mouseover" , changeText ) ;Zurück zu Tabelle ⬆
Szenario:
In this scenario we want the color of the circle to change depending on the type of cursor movement . Use the function toggleColor to turn the circle orange when the cursor moves onto it . Reuse the same function to turn it black when the cursor leaves it .
The tricky part is that you have to call toggleColor with different values for the parameter isEntering . Verify that your code is working by hovering the circle with the mouse cursor and leaving it again .HTML:
< div id =" element " >
Hover Me
</ div >Code -Szenario:
const element = document . querySelector ( '#element' ) ;
const toggleColor = ( isEntering ) => {
element . style . background = isEntering ? 'orange' : 'black' ;
} ;JS:
const element = document . querySelector ( '#element' ) ;
const toggleColor = ( isEntering ) => {
element . style . background = isEntering ? 'orange' : 'black' ;
} ;
element . addEventListener ( 'mouseover' , ( ) => toggleColor ( true ) ) ;
element . addEventListener ( 'mouseleave' , ( ) => toggleColor ( false ) ) ;Zurück zu Tabelle ⬆
Szenario:
You may not see it in the example UI , but underneath the red circle is a green circle . Extend the function removeRedCircle to remove the circle with id red from the DOM .
Make sure that you really remove the element instead of just hiding it . Confirm that your code works by clicking the button .HTML:
< div id =" green " />
< div id =" red " />
< button type =" button " id =" button " > Click Me </ button >Code -Szenario:
const button = document . querySelector ( '#button' ) ;
const removeRedCircle = ( ) => {
} ;
button . addEventListener ( 'click' , removeRedCircle ) ;JS:
const button = document . querySelector ( '#button' ) ;
const removeRedCircle = ( ) => {
const redCircle = document . querySelector ( '#red' ) ;
redCircle . parentNode . removeChild ( redCircle ) ;
} ;
button . addEventListener ( 'click' , removeRedCircle ) ;JS:
const button = document . querySelector ( '#button' ) ;
const removeRedCircle = ( ) => {
document . getElementById ( "red" ) . remove ( ) ;
} ;
button . addEventListener ( 'click' , removeRedCircle ) ;Zurück zu Tabelle ⬆
Szenario:
In this scenario the existing code listens to a click on the button . When the button is clicked , the function changeInput is triggered . changeInput tries to select an input field with id inputEl . But , the existing input field does not have this id . Add some Javascript code to add the id inputEl to the existing input field .
Verify that your code works by clicking the button .HTML:
< div id =" wrapper " >
< input type =" text " placeholder =" Text " readonly />
< button type =" button " > Click Me </ button >
</ div >Code -Szenario:
const button = document . querySelector ( '#wrapper button' ) ;
const changeInput = ( ) => {
const input = document . querySelector ( '#inputEl' ) ;
if ( input ) {
input . value = 'Hello World' ;
}
} ;
button . addEventListener ( 'click' , changeInput ) ;JS:
const button = document . querySelector ( '#wrapper button' ) ;
const changeInput = ( ) => {
const input = document . querySelector ( '#inputEl' ) ;
if ( input ) {
input . value = 'Hello World' ;
}
} ;
button . addEventListener ( 'click' , changeInput ) ;
document . querySelector ( '#wrapper input' ) . setAttribute ( 'id' , 'inputEl' ) ;Zurück zu Tabelle ⬆
Szenario:
Your first JavaScript DOM exercise . Let ' s start simple .
Extend the JavaScript code below to interact with the displayed HTML elements . Once you click the button , the checkbox should be checked .
Confirm your code by clicking the button !HTML:
< input id =" checkbox " disabled />
< label for =" checkbox " > checkbox </ label >
< button type =" button " id =" button " > Verify Code </ button >Code -Szenario:
const button = document . getElementById ( 'button' ) ;
button . addEventListener ( 'click' , ( ) => {
} ) ;JS:
const button = document . getElementById ( 'button' ) ;
button . addEventListener ( 'click' , ( ) => {
const checkbox = document . getElementById ( 'checkbox' ) ;
checkbox . checked = true ;
} ) ;Zurück zu Tabelle ⬆
Szenario:
Extend the JavaScript code below to interact with the displayed HTML elements .
This time we are looking for the full name . When the button is clicked , combine the names of the first two input fields . Insert the full name in the third input field .
Hint : Check if your code still works if you change the first or last name .
Confirm your code by clicking the button !HTML:
< input type =" text " id =" firstName " placeholder =" Max " value =" Max " />
< input type =" text " id =" lastName " placeholder =" Musterman " value =" Musterman " />
< input type =" text " id =" fullName " placeholder =" full name " readonly />
< button type =" button " id =" button " > Verify Code </ button >Code -Szenario:
const button = document . getElementById ( 'button' ) ;
button . addEventListener ( 'click' , ( ) => {
} ) ;JS:
const button = document . getElementById ( 'button' ) ;
button . addEventListener ( 'click' , ( ) => {
const firstName = document . getElementById ( 'firstName' ) ;
const lastName = document . getElementById ( 'lastName' ) ;
const fullName = document . getElementById ( 'fullName' ) ;
fullName . value = firstName . value + ' ' + lastName . value ;
} ) ;Zurück zu Tabelle ⬆
Szenario:
Make the balloons pop by hovering over them .
Extend the JavaScript code below to interact with the displayed HTML elements . Every time you hover over a balloon , it should become invisible .
Your goal is to pop all the balloons one after the other .HTML:
< ul id =" list " >
< li />
< li />
< li />
< li />
< li />
< li />
< li />
< li />
< li />
< li />
</ ul >Code -Szenario:
const list = document . getElementById ( 'list' ) ;JS:
const list = document . getElementById ( 'list' ) ;
const handleHover = event => {
if ( event . target !== list ) {
event . target . style . visibility = 'hidden' ;
}
} ;
list . addEventListener ( 'mouseover' , handleHover ) ;Zurück zu Tabelle ⬆
Szenario:
This is a good exercise to learn about recursive functions . The function move in the code below moves the button 1 px to the left or the right . It is recursive because it calls itself again and again . This keeps the button moving .
Extend the JavaScript code . Once you click the button , it should stop moving . When you click it again , it should move again .
Confirm your code by clicking the button twice .HTML:
< button type =" button " id =" button " > Click Me </ button >Code -Szenario:
const button = document . getElementById ( 'button' ) ;
let stopped = false ;
function move ( isReturning ) {
const width = button . parentNode . clientWidth ;
const left = parseInt ( button . style . left , 10 ) || 0 ;
if ( ! stopped ) {
button . style . left = ( isReturning ? left - 1 : left + 1 ) + 'px' ;
setTimeout ( ( ) => move ( ( isReturning && left > 0 ) || left === width - button . clientWidth ) , 10 ) ;
} ;
} ;
move ( ) ;
button . addEventListener ( 'click' , ( ) => {
} ) ;JS:
const button = document . getElementById ( 'button' ) ;
let stopped = false ;
function move ( isReturning ) {
const width = button . parentNode . clientWidth ;
const left = parseInt ( button . style . left , 10 ) || 0 ;
if ( ! stopped ) {
button . style . left = ( isReturning ? left - 1 : left + 1 ) + 'px' ;
setTimeout ( ( ) => move ( ( isReturning && left > 0 ) || left === width - button . clientWidth ) , 10 ) ;
} ;
} ;
move ( ) ;
button . addEventListener ( 'click' , ( ) => {
stopped = ! stopped ;
move ( ) ;
} ) ;Zurück zu Tabelle ⬆
