Develop Reference

How to make pop up with reactjs

How to make a pop-up information box when you click an element.
Example like this image :
Like this image, you click "View all study equipment" an element and then get that pop-up for more information.
This is my code :
<>
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
<div className="description-info">
<div className="desc-list">
<h2>Description</h2>
<p>
Websites in today's era have become a major need that cannot be
ignored. All business or education sectors can use the website as a
tool for promotion, exchange of information, and others. Based on data
from the World Wide Web Technology Surveys, of all active websites,
88.2% use HTML, 95.6% use CSS and 95% use JavaScript. This class
thoroughly discusses the basics of HTML, CSS and JavaScript as the
three foundations of website creation.
</p>
<ul>
<li>
<p>The web is a platform that can be accessed through many kinds of devices. This is an advantage if you develop Web-based applications.</p>
</li>
<li>
<p>Web development does not require a computer/laptop that has high specifications, so it is not an obstacle for those of you who do not have a capable device.</p>
</li>
<li>
<p>The website is a platform that is reached by search engines such as Google Search, so the website is suitable as a medium for promoting business or content.</p>
</li>
<li>
<p>Developing a website includes development that is easy to maintain and easy to publish.</p>
</li>
</ul>
</div>
<div className="specs-description-info">
<h4>Learning Equipment</h4>
<h5><i class="fas fa-microchip"></i>Processor</h5>
<span>Intel Celeron (Core i3 and above Recommended)</span>
<h4>Tools yang dibutuhkan untuk belajar:</h4>
<span><i class="fad fa-window"></i>Web Browser (Google Chrome atau Mozilla Firefox)</span>
<br />
<br />
<a className="equip_info" href="/">View all study equipment</a>
</div>
</div>
<div className="sub-border-description-info">
<h3>Student Targets and Goals :</h3>
<ul>
<li>
<p>This class is intended for beginners who want to start their career in the field of web development (web creation) and need a strong foundation or foundation before studying deeper in the web field, with reference to international standards owned by Google Developers.</p>
</li>
<li>
<p>Classes can be attended by students who are IT literate so it is mandatory to have and be able to operate a computer well.</p>
</li>
<li>
<p>This class is designed for beginners so there are no prerequisites in prior understanding of programming.</p>
</li>
<li>
<p>Students must be able to learn independently, be committed, really have curiosity, and be interested in the subject matter, because no matter how good this class material is, it will not be useful without students' seriousness to learn, practice, and try.</p>
</li>
</ul>
</div>
<div className="subdescription-info">
<h3>General and Specific Objectives of the Training :</h3>
<ul>
<li>
<p>At the end of the training, participants can create a simple website using programming code that complies with global standards.</p>
</li>
<li>
<p>Build a website using simple HTML, CSS, and JavaScript code.</p>
</li>
<li>
<p>Implement a good website structure using standard semantic HTML.</p>
</li>
<li>
<p>Demonstrating the preparation of website layouts using float or flexbox techniques.</p>
</li>
</ul>
</div>
</>
Maybe you can share how to make it with React Javascript and CSS too.
This is using newest react.
Thank You

So, what you can do is use the useState hook. Let me explain:
first, import the usestate hook, check the react docs on how to do that, but if youre using vs code it will probably do that for you if you type the next part -->
this will create a state oject (popup) with the default value of false, that can be altered by the togglepopup function:
const [popup, togglepopup] = useState(false);
Then in your button/element you want to use to toggle the popup write:
onClick={togglepopup(!popup)}
this will change the current popup value to the oposite value, e.x. false => true, true => false.
then just create a piece of javascript that looks like this:
{popup && <div className={'popup-bg'}>
<div className={'popup'}></div></div>}
now just set the popup-bg in your stylesheet to position: fixed, width: 100vw, height: 100vw, display: flex, align-items: center, justify-content: center, backdropfilter: blur(10px);
and now it will center your popup div.

How to getElement of an "a" tag within a "class"?

I've been wrestling with vanilla javascript for GetElementsBy(ID/Tag/Span) for some time, and was wondering if any of you have encountered this or know a solution to this problem.
I'm trying to getElementBy(...) for 3 innerHTML texts in the DOM that looks like this:
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
Ultimately, I want to grab all three texts inside the text tag using GetElementsBy(...). What is the right approach to get this data?

Your HTML is pretty messy. I tried to clean it up in the example below, and added some distinct text for each bit of text you're trying to extract so it's more illustrative that we're grabbing 3 different links' texts. The code iterates over the anchors found, and uses the same highly specific selector #Jaromanda X wrote in his comment.
Click the "Run" button below to see it in action.
let anchors = document.querySelectorAll('ul.main_Bucket>li.id_category>span.id_device>a');
console.log(anchors.length, "anchors found");
anchors.forEach((anchor)=>console.log(anchor.innerText));
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
ONE: This is the Data I want to Grab
</span>
</li>
</ul>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
TWO: This is the Data I want to Grab
</span>
</li>
</ul>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
THREE: This is the Data I want to Grab
</span>
</li>
</ul>

Accessible dropdown menu: <li> has multiple children

I'm working on making a dropdown menu accessible. I'm largely following this W3 example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#
However, my menu has an unusual structure. Some of my list item's contain more than one button, which are horizontally aligned within the list item.
<ul role="menu">
<li role="none">Header</li>
<li role="none">
<button role="menuitem">Option A</button>
<button role="menuitem">Option B</button>
<button role="menuitem">Option C</button></li>
<li role="none">
<button role="menuitem">Button Foo</button>
</li>
</ul>
Is there a recommended way to make this WCAG accessible?
I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.
Furthermore, currently my screenreader (NVDA) will inform the user that there are 4 items within the list (due to there being 4 elements with the role="menuitem" tag). Ideally I'd like the screenreader to let the user know that there are only 2 items in the list, and then when he is on a button with siblings (e.g. "Option A" in my example), I'd like the screenreader to announce that, besides being in the first item in the menu, it is option 1 out of 3 in the list item.
Any advice is appreciated!

IMPORTANT NOTE: The menu role and pattern is designed to be used in applications. If you want to do a menu for a simple website, you should use the navigation role
Answering now, your question...
You are describing what menuitemradio role is intended for: (note: this could also be menutitemcheckbox if different options are not exclusive)
<ul role="menu">
<li role="none" id="group_header">Header</li>
<li role="group" aria-describedby="group_header">
<button role="menuitemradio">Option A</button>
<button role="menuitemradio">Option B</button>
<button role="menuitemradio">Option C</button></li>
<li role="none">
<button role="menuitem">Button Foo</button>
</li>
</ul>
I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.
You can see the requisits for keyboard interactions for menu role items on the WAI ARIA Authoring practices, which include more than just the left and right keys. So you will have to rely on important javascript development for your application.
Note: Remember, that if you are designing a website (so your menu won't be in an application role), you should use the navigation role. This would be easier and you could use any standard HTML elements like input[type='radio'] which will natively handle the left and right key:
<ul role="navigation" aria-label="Menu">
<li><div id="group_header">Header</div>
<div role="group" aria-describedby="group_header">
<label><input type="radio" name="item" /> Option A</label>
<label><input type="radio" name="item" /> Option B</label>
<label><input type="radio" name="item" /> Option C</label>
</div>
</li>
<li><button>Button Foo</button></li>
</ul>
A discussion on the "menu not for website" theme

How should I parse complex element in Cheerio

I'm using cheerio library as a scraper in my nodejs project. I want to parse the following structure:
<li class="sub menu-category-main">
<p>
<span class="price">$16.00</span>
ZESTAW DNIA + ZUPA
</p>
</li>
<li class=" ">
<p>
<span class="price">$12.00</span>
<img class="allergens" title="Vegerarian" src="/new_site/img/vegetarian_.png">
NALEŚNIKI AMERYKAŃSKIE Z SOSEM OWOCOWYM
<br>
american pancakes with fruit sauce
</p>
</li>
<li class=" ">
<p>
<span class="price">$11.00</span>
<img class="allergens" title="lactose free" src="/new_site/img/lactose_.png">
<img class="allergens" title="gluten free" src="/new_site/img/gluten_.png">
<img class="allergens" title="Vegerarian" src="/new_site/img/vegetarian_.png">
LECZO WEGETARIAŃSKIE
<br>
vegetables lecho
</p>
</li>
How can I parse this HTML so I can have price, name and list of images? At the end I want to build a JSON object to reuse the data (I know how to build a JSON, just have problems with parsing above HTML).
You can notice that there are names in English and Polish. I'm interested in the strings in Polish. Also please note that the structure of this document is very irregular (not consistent).
I also want to add, that making .text() of "p" does not give me the results that I like.

Simulate a click on tabpanel in ExtJs

Let me begin by saying that this problem is specific to TabPanel in ExtJS library.
I can successfuly simulate clicks on other ExtJS components using jQuery("#id").click() function.
But I cannot simulate user click on a given tab of TabPanel in ExtJS using jQuery. I see that the dom structure behind tabs looks like this:
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen15">
<li id="ext-comp-1009__ext-comp-1001" class="x-tab-strip-active">
<a class="x-tab-strip-close" id="ext-gen18"></a>
<a href="#" class="x-tab-right" id="ext-gen19">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">Submarine</span>
</span>
</em>
</a>
</li>
<li id="ext-comp-1009__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20"></a>
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">SpaceShuttle</span>
</span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen16">
<span class="x-tab-strip-text"> </span>
</li>
<div class="x-clear" id="ext-gen17"></div>
</ul>
I've tried various methods of selecting the first tab using jQuery:
jQuery("#ext-comp-1009__ext-comp-1001").click();
jQuery("#ext-gen18").click();
jQuery("#ext-gen19").click();
but none of it seem to work.

If you take a look at the source (search for onStripMouseDown in particular) you'll see that it's expecting an Ext.EventObject. It'll fail straight away because e.button isn't 0.
Presumably you could patch it with your own onStripMouseDown.