Skip to content

Commit

Permalink
agregado semana 10
Browse files Browse the repository at this point in the history
  • Loading branch information
hdeleon committed Oct 8, 2021
1 parent c691323 commit 30d1ddd
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 0 deletions.
37 changes: 37 additions & 0 deletions Semana10-WebComponents/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>

<div class="wrapper">
<div>
<app-list
data-title="Lista de usuarios"
data-url="https://jsonplaceholder.typicode.com/users"
data-field="name"

>
</app-list>

</div>
<div>
<app-list
data-title="Lista de usuarios"
data-url="https://jsonplaceholder.typicode.com/albums/1/photos"
data-field="thumbnailUrl"
modePicture="true"
>
</div>

</div>


</body>
</html>
4 changes: 4 additions & 0 deletions Semana10-WebComponents/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}
48 changes: 48 additions & 0 deletions Semana10-WebComponents/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
class List extends HTMLElement{
constructor(){
super();

let shadow = this.attachShadow({mode: 'open'});

this.divHeader = document.createElement("div");
this.divContent = document.createElement("div");
this.modePicture = false;

shadow.appendChild(this.divHeader);
shadow.appendChild(this.divContent);
}

connectedCallback(){

this.divHeader.innerHTML= `<strong>
${this.getAttribute("data-title")}
</strong>`

let url = this.getAttribute("data-url");
let field = this.getAttribute("data-field");
if(this.getAttribute("modePicture")){
this.modePicture=this.getAttribute("modePicture");
}

console.log(this.modePicture)

this.divContent.innerHTML = "";
fetch(url)
.then(response=>response.json())
.then(json=>json.forEach(element=>{
if(this.modePicture === 'true'){
this.divContent.innerHTML += `<img
src='${element[field]}'>
</img>`
}else{
this.divContent.innerHTML += `<div>
${element[field]}
</div>`
}

}));

}
}

customElements.define("app-list", List);
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit 30d1ddd

Please sign in to comment.