UIUX Component

Get the current position of the mouse using 'MouseEvent' clientX and clientY properties. Move the mouse on any position to see the values in demo below. DEMO JS document . addEventListener( 'mousemove' , (e) => { console . log( `Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}` ); });

Display each item in the object in HTML. DEMO JS const grocery_list = { "Durian" : { category: "fruit" , price: 5.99 }, "Rambutan" : { category: "fruit" , price: 2.99 }, "Vanilla" : { category: "candy" , price: 2.75 } }; const generatedHtml = Object . keys(grocery_list) . reduce((accum, currKey) => accum + ` < div class = "grocery_item" > < div class = "item" > $ {currKey} </ div > < div class = "category" > $ {grocery_list[currKey] . category} </ div > < div class = "price" > $ {grocery_list[currKey] . price} </ div > </ div > ` , '' ); document . getElementById( 'list-name' ) . innerHTML = generatedHtml;

Create a very simple responsive sidebar in HTML, CSS and one tiny line of JavaScript. DEMO ☰ &#129409; LION &#129412; UNICORN &#129303; CONTENT AREA HTML < div id = "AreaBody" > < ! -- (A) SIDEBAR --> < div id = "AreaSide" > < ! -- (A1) EXPAND / COLLAPSE SIDEBAR --> < button id = "btnToggle" onclick = "document.getElementById('AreaBody').classList.toggle('open')" > & #9776; </ button > < ! -- (A2) SIDEBAR ITEMS --> < div class = "item" > < span class = "ico" >& #129409;</span> < span class = "txt" > LION </ span > </ div > < div class = "item" > < span class = "ico" >& #129412;</span> ...

JavaScript Basics all 3 results with same output. Length let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band . length = 2 console . log(band) // [ "Metallica" , "Megadeth" ] Splice let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band = band . splice( 0 , 2 ) console . log(band) // [ "Metallica" , "Megadeth" ] Slice let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band = band . slice( 0 , 2 ) console . log(band) // [ "Metallica" , "Megadeth" ]