unname coder's blog

50 8 Can someone explain the program flow of this JavaScript code: const $leaveRoom = document.querySelector('#leave-button'); let a = 1; $leaveRoom.addEventListener('click', () => { console.log(a); console.log("check"); a++; $leaveRoom.click(); console.log(a); a++; }); <button id="leave-button">Leave Room</button> The Output was: 1 check 2 check 3 4 This question may sound dumb but I am new to JavaScript. I am not able to understand the program flow of this code. I want to know how did I get 3 & 4 in the output. javascript html addeventlistener ...

8 2 I have a div tag and I realized that it is not filling 100% of the height as it should. My code: #container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } <div id="container"></div> <div id="container"></div> What's happening? Well, if I only have this code snippet above that I put the div to occupy 100% of the viewport of course! The problem is that I don't only have this code on my page, I have more things and I inserted this code section inside the body tag, a certain" place "inside the body tag, that is, I inserted some elements, and after these elements have this div, but it does not occupy, 100% of the viewport observe how it is How is the resu...

7 1 Page: https://ensjotannklinikk.no/forside-wip Here's a fiddle The first menu item called " Behandlinger " is set up with this JS (courtesy of biberman) to make the submenu emerge and retract properly. var submenu = document.querySelector('.behandlinger-meny'); var menuTrigger = document.querySelector('.behandlinger-item'); //javascript version of jQuery isChild() function isChild(item, parentItem) { while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY'){ if (item == parentItem){ return true; } item = item.parentNode; } return false; } menuTrigger.addEventListener('click', function() { submenu.style.height = '55px';...

5 This question already has answers here : What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? (3 answers) Closed 26 days ago . I want three buttons to each take up 33% of the assigned space. They are grouped in a class "numbers". When I define the width for the button tags, that works fine, but when I do it for all ...

I am currently making a chat bubble in react-native. Since I am new to react-native I first tried to make the chat bubble on a browser and then tried to replicate the same in react-native. I am struggling to replicate the arrow in react-native. Any ideas/suggestions? Normal HTML/CSS: <div> <p class="to-me">Hey!</p> </div> div { padding:20px; justify-self: center; align-self: center; text-align: left; display: flex; flex-direction: column; width: 450px; } div p { font-size: 16px; line-height: 1.4; margin: 1px 0; padding: 8px 17px 6px 13px; max-width: 380px; position: relative; border-radius: 18px; } div p:after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; } div p.to-me { color: black; align-self: flex-start; background-color: #E5E5EA; } div p.to-me:after { background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3....

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure: .star { visibility: hidden; font-size: 30px; cursor: pointer; color: orange; } .star:before { content: "\2605"; position: absolute; visibility: visible; } .star:checked:before { content: "\2606"; position: absolute; } .group { background-color: #20262e; } <div class="group text-truncate"> <label class="font-weight-bold"> <span class="align-middle text-truncate" style="color:white">This is a long text</span> <span class="align-middle" style="color: orange;">(3 items)</span> </label> <input type="checkbox" style="float:right;" class="group-checkbox star"> </div> if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this? ...