bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 22:02:42 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Merge pull request #2 from bendtherules/main

Browse Source 
Merge latest changes form main branch
This commit is contained in:
Lakshya Thakur
2020-10-19 23:11:08 +05:30
committed by GitHub
parent 2af26a430b 4342f1a165
commit d7f47246b5
4 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/create-modify-element.mdx
+9 -7
View File
@@ -13,11 +13,11 @@ import MDN from "../components/MDNBadge"
### 1. querySelector() ### 1. querySelector()
`document.querySelector(selector) : Element | null`
This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`. This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`.
```js ```js
document.querySelector(selector);
// <div className="box" /> // <div className="box" />
document.querySelector(".box"); // returns .box document.querySelector(".box"); // returns .box
document.querySelector(".not-found"); // null document.querySelector(".not-found"); // null
@@ -25,7 +25,7 @@ document.querySelector(".not-found"); // null
<Accordion> <Accordion>
<Admonition type="note" title="Extra"> <Admonition type="note" title="Extra">
This method is also available on all DOM nodes. If you want to look within a specific element, this is very useful. This method is also available on all DOM nodes. If you want to look within a specific element, just use `ele.querySelector()` on the parent element.
```js ```js
// Example - .outer > .inner // Example - .outer > .inner
@@ -40,6 +40,8 @@ document.querySelector(".not-found"); // null
### 2. querySelectorAll() ### 2. querySelectorAll()
`document.querySelectorAll(selector) : NodeList`
This method returns **all the elements that match** the specified CSS selector. This method returns **all the elements that match** the specified CSS selector.
It returns a **static NodeList**, which contains the matching elements. If no match is found, it returns empty NodeList. It returns a **static NodeList**, which contains the matching elements. If no match is found, it returns empty NodeList.
@@ -90,10 +92,10 @@ document.createElement("div")
### 4. setAttribute() ### 4. setAttribute()
It sets a attribute on the current element.
`Element.setAttribute(name, value)` `Element.setAttribute(name, value)`
It sets a attribute on the current element.
`name` - name of the attribute to add. Ex- "type". `name` - name of the attribute to add. Ex- "type".
`value` - value of the attribute. Ex- "text". `value` - value of the attribute. Ex- "text".
@@ -108,10 +110,10 @@ ele.setAttribute("type", "text")
### 5. appendChild() ### 5. appendChild()
It inserts a new element as the last child of the parent element.
`Element.appendChild(newElement)` `Element.appendChild(newElement)`
It inserts a new element as the last child of the parent element.
```js ```js
let eleDiv = document.createElement("div") let eleDiv = document.createElement("div")
let eleH1 = document.createElement("h1") let eleH1 = document.createElement("h1")
static/img/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 96 KiB

static/img/logo_ui.svg
+8 -3
View File
@@ -1,5 +1,10 @@
<?xml version="1.0" standalone="yes"?> <?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900"> <svg xmlns="http://www.w3.org/2000/svg" width="900" height="900">
<path style="fill:#8f8dce; stroke:none;" d="M0 0L0 900L900 900L900 0L0 0z"/> <defs>
<path style="fill:#ffffff; stroke:none;" d="M598 211.468C592.197 212.555 586.72 215.272 582 218.76C551.47 241.321 561.603 290.768 599 298.985C604.273 300.143 609.677 300.342 615 299.384C651.569 292.803 666.103 246.58 637.911 221.326C632.824 216.769 626.509 213.895 620 212.04C613.502 210.188 604.637 210.224 598 211.468M603 314.428C578.515 317.927 560.268 335.435 556.439 360C554.337 373.485 556 388.359 556 402L556 483L556 558C556 573.214 554.785 588.981 557.619 604C562.273 628.67 587.765 647.987 613 644.711C634.887 641.869 654.42 627.36 659.181 605C662.689 588.531 661 570.741 661 554L661 468L661 396C661 382.207 662.437 367.557 659.547 354C654.346 329.601 627.882 310.873 603 314.428M267 318.428C246.111 321.428 228.606 335.253 222.921 356C219.83 367.276 221 379.422 221 391L221 450C221 481.793 217.941 516.011 227.09 546.83C248.322 618.363 320.696 659.905 393 647.714C407.061 645.344 421.533 639.784 434 632.999C445.387 626.802 454.906 619.711 464.464 610.996C489.776 587.917 505.306 555.912 509.711 522C513.567 492.309 511 460.925 511 431L511 386C511 375.143 511.506 363.421 507.899 353C502.954 338.714 491.658 327.958 478 322.157C448.639 309.688 411.326 328.208 407.286 361C405.764 373.359 407 386.55 407 399L407 472C407 483.149 408.084 494.945 406.575 506C403.645 527.465 386.618 548.183 363 545.829C343.987 543.934 329.61 529.525 326.095 511C323.054 494.974 325 477.276 325 461L325 369C324.988 338.961 297.155 314.098 267 318.428z"/> <pattern id="logo" x="0%" y="0%" height="100%" width="100%">
</svg> <path style="fill:#8f8dce; stroke:none;" d="M0 0L0 900L900 900L900 0L0 0z"/>
<path style="fill:#ffffff; stroke:none;" d="M598 211.468C592.197 212.555 586.72 215.272 582 218.76C551.47 241.321 561.603 290.768 599 298.985C604.273 300.143 609.677 300.342 615 299.384C651.569 292.803 666.103 246.58 637.911 221.326C632.824 216.769 626.509 213.895 620 212.04C613.502 210.188 604.637 210.224 598 211.468M603 314.428C578.515 317.927 560.268 335.435 556.439 360C554.337 373.485 556 388.359 556 402L556 483L556 558C556 573.214 554.785 588.981 557.619 604C562.273 628.67 587.765 647.987 613 644.711C634.887 641.869 654.42 627.36 659.181 605C662.689 588.531 661 570.741 661 554L661 468L661 396C661 382.207 662.437 367.557 659.547 354C654.346 329.601 627.882 310.873 603 314.428M267 318.428C246.111 321.428 228.606 335.253 222.921 356C219.83 367.276 221 379.422 221 391L221 450C221 481.793 217.941 516.011 227.09 546.83C248.322 618.363 320.696 659.905 393 647.714C407.061 645.344 421.533 639.784 434 632.999C445.387 626.802 454.906 619.711 464.464 610.996C489.776 587.917 505.306 555.912 509.711 522C513.567 492.309 511 460.925 511 431L511 386C511 375.143 511.506 363.421 507.899 353C502.954 338.714 491.658 327.958 478 322.157C448.639 309.688 411.326 328.208 407.286 361C405.764 373.359 407 386.55 407 399L407 472C407 483.149 408.084 494.945 406.575 506C403.645 527.465 386.618 548.183 363 545.829C343.987 543.934 329.61 529.525 326.095 511C323.054 494.974 325 477.276 325 461L325 369C324.988 338.961 297.155 314.098 267 318.428z"/>
</pattern>
</defs>
<circle id="sd" class="medium" cx="50%" cy="50%" r="50%" fill="url(#logo)" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

static/img/logo_ui_rect.svg
+5
View File
@@ -0,0 +1,5 @@
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900">
<path style="fill:#8f8dce; stroke:none;" d="M0 0L0 900L900 900L900 0L0 0z"/>
<path style="fill:#ffffff; stroke:none;" d="M598 211.468C592.197 212.555 586.72 215.272 582 218.76C551.47 241.321 561.603 290.768 599 298.985C604.273 300.143 609.677 300.342 615 299.384C651.569 292.803 666.103 246.58 637.911 221.326C632.824 216.769 626.509 213.895 620 212.04C613.502 210.188 604.637 210.224 598 211.468M603 314.428C578.515 317.927 560.268 335.435 556.439 360C554.337 373.485 556 388.359 556 402L556 483L556 558C556 573.214 554.785 588.981 557.619 604C562.273 628.67 587.765 647.987 613 644.711C634.887 641.869 654.42 627.36 659.181 605C662.689 588.531 661 570.741 661 554L661 468L661 396C661 382.207 662.437 367.557 659.547 354C654.346 329.601 627.882 310.873 603 314.428M267 318.428C246.111 321.428 228.606 335.253 222.921 356C219.83 367.276 221 379.422 221 391L221 450C221 481.793 217.941 516.011 227.09 546.83C248.322 618.363 320.696 659.905 393 647.714C407.061 645.344 421.533 639.784 434 632.999C445.387 626.802 454.906 619.711 464.464 610.996C489.776 587.917 505.306 555.912 509.711 522C513.567 492.309 511 460.925 511 431L511 386C511 375.143 511.506 363.421 507.899 353C502.954 338.714 491.658 327.958 478 322.157C448.639 309.688 411.326 328.208 407.286 361C405.764 373.359 407 386.55 407 399L407 472C407 483.149 408.084 494.945 406.575 506C403.645 527.465 386.618 548.183 363 545.829C343.987 543.934 329.61 529.525 326.095 511C323.054 494.974 325 477.276 325 461L325 369C324.988 338.961 297.155 314.098 267 318.428z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB