Can a font be imported from within the shadow dom and have it apply to its children? When trying to do something like class MyCustomElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style>…
I want to save this html code to PDF: <div id="mycontent"> <h1>Sample PDF from HTML</h1> <p>This text you'll find in PDF page.</p> </div> Javascript I am using is: const mycontent = document.getElementById('mycontent').outerHTML; const blob = new Blob([mycontent], { type: 'application/pdf'…
I'm learning web development and I've encountered another beginner challenge, I want to make the header text of my website, clickable, so that it also redirects me to the homepage, how could I achieve this?, may you help me please?.…
I am trying to style the "choose file" button in HTML using CSS styling and this does not work. The output I am achieving is in the screenshot below the HTML code - the button is not green (the same…
I have a div element with two background images, both added using JavaScript. The first background image, at the top of the div, is set according to "data-img" attribute, while the second one is always the same. HTML <div class="card"…
i made this #Swatch(https://codepen.io/ricoThaka/pen/YzMVdXj?editors=1100 <~) i want to expand it to a flexible layout that can contain unlimited colors for the swatch ` .swatch div:nth-child(1) { background: DeepPink;} .swatch div:nth-child(2) { background: cyan;} .swatch div:nth-child(3) { background: GreenYellow;} .swatch div:nth-child(4)…
I have an input element and a sibling label element. Upon page load, the label overlaps the input element, serving as a placeholder. When the input is focused and contains a valid value, the label moves to the top of…
I have a container with multiple flex elements inside, separated by a gap. These elements wrap within the container, and have a percentage-based size dictating how many can appear in a single row (ie, 4 per row = 25%). Now,…
I am making a basketball scoreboard and I'm wondering how do I center the score text inside of the scoreboard container? While the main div is already set as a flex container, the p score text inside of the scoreboard…
I'm trying to implement functionality in my HTML page where clicking a button scrolls to a specific element (#content) while maintaining a certain amount of padding from the top of the viewport. However, my current approach isn't working as expected.…