Practical Questions

A. Define start and end, random = Math.floor( ( Math.random() * ( end - start ) + start ) );

A. For Email <a href="mailto:xyz@gmail.com">Email</a> For Phone <a href="tel:919999999999">Call</a>

A. Below we have CSS variable and we will update this value to 20px ---------------- file: style.css ---------------- :root{ --width: 10px; } --------------- file: main.js --------------- var root = document.querySelector(":root"); root.style.setProperty('--width', '20px');

A. navigator.clipboard.writeText("I will be copied to clipboard");

A. Select the element. ( You can use any selector ) var element = document.querySelector('.el'); ------------------------- To add a class ------------------------- element.classList.add("newClass"); ------------------------- To remove a class ------------------------- element.classList.remove("classname"); ------------------------- To toggle a class ------------------------- element.classList.toggle("classname");

A. To add spaces horizontally between flex items .flexbox{ display:flex; column-gap: 16px; } --------------------------- To add spaces vertically between flex items .flexbox{ display:flex; flex-direction:column; row-gap: 16px; }

A. You can animation between any two properties such transform, width, color, opacity etc. using transition property in CSS. ------------------------- Syntax: transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; ------------------------- Here I will show to transition between opacity 0 to opacity 1 .item{ opacity: 0; transition: opacity 1s ease-in; } .item:hover{ opacity:1; }

A. To create a quarter circle ------------------------- <div class="box"></div> .box{ width: 50px; height: 50px; border-top-right-radius: 100%; } ------------------------- Constraints for creating a semi circle width should be double that of height border radius for top left & right should be (width + height)px ------------------------ <div class="box"></div> .box{ width: 100px; height: 50px; border-radius: 150px 150px 0px 0px; }

A. To change the placeholder color we need to use ::placeholder selector ::placeholder{ color: red; font-size:18px; }

A. BEM ( Block Element Modifier) It is a naming convention for CSS classes that helps in maintaining our CSS more effeciently ------------------------- BEM ( Block Element Modifier) Block - A standalone element that has child elements such as list, card, container etc. Element - An element may be a subcomponent like list items, card-header, card-body, etc or It may be a standalone component such as a button. Modifier - It is used when we have different versions of an element such as big button, primary button, etc. ------------------------ Examples <ul class="list"> <li class="list__item"> <li class="list__item list__item--active"> </ul> Below we have a block as a list with the element as a list-item and have one active version(modifier) of list item ------------------------ Below we have a standalone element button with state success <button class="button button--state-success></button>