Commit ce668a6

committed

added folder dom searchbar and manipulando datas script

1 parent c76986d commit ce668a6Copy full SHA for ce668a6

File tree

+135

-0

lines changed

+135

-0

lines changed

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`6`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`7`	`+ <link rel="stylesheet" href="styles.css">`
	`8`	`+ <script src="script.js" defer></script>`
	`9`	`+ <title>Document</title>`
	`10`	`+</head>`
	`11`	`+<body>`
	`12`	`+ <div class="search-wrapper">`
	`13`	`+ <label for="search">Search Users</label>`
	`14`	`+ <input type="search" id="search" data-search>`
	`15`	`+ </div>`
	`16`	`+ <div class="user-cards" data-user-cards-container></div>`
	`17`	`+ <template data-user-template>`
	`18`	`+ <div class="card">`
	`19`	`+ <div class="header" data-header></div>`
	`20`	`+ <div class="body" data-body></div>`
	`21`	`+ </div>`
	`22`	`+ </template>`
	`23`	`+</body>`
	`24`	`+</html>`

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+const userCardTemplate = document.querySelector("[data-user-template]")`
	`2`	`+const userCardContainer = document.querySelector("[data-user-cards-container]")`
	`3`	`+const searchInput = document.querySelector("[data-search]")`
	`4`	`+`
	`5`	`+let users = []`
	`6`	`+`
	`7`	`+searchInput.addEventListener("input", e => {`
	`8`	`+ const value = e.target.value.toLowerCase()`
	`9`	`+ users.forEach(user => {`
	`10`	`+ const isVisible =`
	`11`	`+ user.name.toLowerCase().includes(value) \|\|`
	`12`	`+ user.email.toLowerCase().includes(value)`
	`13`	`+ user.element.classList.toggle("hide", !isVisible)`
	`14`	`+ })`
	`15`	`+})`
	`16`	`+`
	`17`	`+fetch("https://jsonplaceholder.typicode.com/users")`
	`18`	`+ .then(res => res.json())`
	`19`	`+ .then(data => {`
	`20`	`+ users = data.map(user => {`
	`21`	`+ const card = userCardTemplate.content.cloneNode(true).children[0]`
	`22`	`+ const header = card.querySelector("[data-header]")`
	`23`	`+ const body = card.querySelector("[data-body]")`
	`24`	`+ header.textContent = user.name`
	`25`	`+ body.textContent = user.email`
	`26`	`+ userCardContainer.append(card)`
	`27`	`+ return { name: user.name, email: user.email, element: card }`
	`28`	`+ })`
	`29`	`+ })`

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+.search-wrapper {`
	`2`	`+ display: flex;`
	`3`	`+ flex-direction: column;`
	`4`	`+ gap: .25rem;`
	`5`	`+}`
	`6`	`+`
	`7`	`+input {`
	`8`	`+ font-size: 1rem;`
	`9`	`+}`
	`10`	`+`
	`11`	`+.user-cards {`
	`12`	`+ display: grid;`
	`13`	`+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));`
	`14`	`+ gap: .25rem;`
	`15`	`+ margin-top: 1rem;`
	`16`	`+}`
	`17`	`+`
	`18`	`+.card {`
	`19`	`+ border: 1px solid black;`
	`20`	`+ background-color: white;`
	`21`	`+ padding: .5rem;`
	`22`	`+}`
	`23`	`+`
	`24`	`+.card > .header {`
	`25`	`+ margin-bottom: .25rem;`
	`26`	`+}`
	`27`	`+`
	`28`	`+.card > .body {`
	`29`	`+ font-size: .8rem;`
	`30`	`+ color: #777;`
	`31`	`+}`
	`32`	`+`
	`33`	`+.hide {`
	`34`	`+ display: none;`
	`35`	`+}`

Lines changed: 47 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,47 @@`
	`1`	`+import assert from 'assert'`
	`2`	`+const date = new Date("2022年01月25日 00:00") // node -p 'new Date("2022年01月25日 00:00")'`
	`3`	`+// 2022年01月25日T03:00:00.000Z`
	`4`	`+`
	`5`	`+{`
	`6`	`+ const regex = /^([0-9]{4})-(0[1-9]\|1[0-2])-(0[1-9]\|1[0-9]\|2[0-9]\|3[0-1])/`
	`7`	`+ const [full, year, month, day] = regex.exec(date.toISOString())`
	`8`	+ const actual = `${day}/${month}/${year}`
	`9`	`+ const expected = "25/01/2022"`
	`10`	`+ assert.equal(actual, expected)`
	`11`	`+}`
	`12`	`+`
	`13`	`+// toLocaleDateString`
	`14`	`+const options = {`
	`15`	`+ year: "numeric",`
	`16`	`+ month: "long",`
	`17`	`+ day: "numeric"`
	`18`	`+}`
	`19`	`+`
	`20`	`+{`
	`21`	`+ const actual = date.toLocaleDateString("pt-br", options)`
	`22`	`+ const expected = "25 de janeiro de 2022"`
	`23`	`+ assert.equal(actual, expected)`
	`24`	`+}`
	`25`	`+`
	`26`	`+{`
	`27`	`+ const actual = date.toLocaleDateString("pt-br", {`
	`28`	`+ ...options,`
	`29`	`+ month: "numeric"`
	`30`	`+ })`
	`31`	`+ const expected = "25/01/2022"`
	`32`	`+ assert.equal(actual, expected)`
	`33`	`+}`
	`34`	`+`
	`35`	`+// Intl`
	`36`	`+{`
	`37`	`+ const actual = new Intl.DateTimeFormat("pt-br").format(date)`
	`38`	`+ const expected = "25/01/2022"`
	`39`	`+ assert.equal(actual, expected)`
	`40`	`+}`
	`41`	`+{`
	`42`	`+ const actual = new Intl.DateTimeFormat("pt-br", {`
	`43`	`+ dateStyle: "full", timeStyle: "long"`
	`44`	`+ }).format(date)`
	`45`	`+ const expected = "terça-feira, 25 de janeiro de 2022 00:00:00 BRT"`
	`46`	`+ assert.equal(actual, expected)`
	`47`	`+}`

Comments

(0)