-
-
+
diff --git a/ExerciciosModulo4/ExerciciosModulo4.js b/ExerciciosModulo4/ExerciciosModulo4.js
index 93d5f0c..5c30f53 100644
--- a/ExerciciosModulo4/ExerciciosModulo4.js
+++ b/ExerciciosModulo4/ExerciciosModulo4.js
@@ -60,9 +60,15 @@ const fillList = repositorios => {
for (repo of repositorios) {
const reponame = document.createTextNode(repo.name);
+ const repolink = document.createTextNode(repo.html_url);
const repoItem = document.createElement("li");
-
- repoItem.appendChild(reponame);
+ const link = document.createElement("a");
+
+ link.setAttribute("href", repolink.data);
+ link.setAttribute("target", "_blank");
+ link.appendChild(reponame);
+ repoItem.appendChild(link);
dataList.appendChild(repoItem);
+
}
};
diff --git a/ExerciciosModulo4/exercicioModulo4.css b/ExerciciosModulo4/exercicioModulo4.css
new file mode 100644
index 0000000..4a5859c
--- /dev/null
+++ b/ExerciciosModulo4/exercicioModulo4.css
@@ -0,0 +1,115 @@
+html, body, div, ul, li, a, button {
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ font-family:Arial, Helvetica, sans-serif;
+ font-size: 16px;
+}
+
+.container {
+ width: 90vw;
+ margin: 5vh auto;
+ background-color: #f5f5f5;
+ padding: 10px 0;
+}
+
+.container input {
+ padding: 10px;
+ font-size: 1.2rem;
+ text-align: center;
+ border: 1px solid grey;
+ border-radius: 8px;
+ width: 230px;
+ margin: 0 auto;
+}
+
+.container input:focus {
+ border: 1px solid cornflowerblue;
+ outline: 0;
+}
+
+.container button {
+ background-color: cornflowerblue;
+ color: #fff;
+ padding: 10px;
+ font-size: 1.2rem;
+ border-radius: 8px;
+ width: 200px;
+ margin: 10px auto 0;
+ outline: 0;
+}
+
+.container button:hover {
+ filter: brightness(90%);
+ transition: 0.3s;
+}
+
+.flex {
+ display: flex;
+ flex-direction: column;
+}
+
+.list {
+ margin-top: 10px;
+ padding: 20px 20px 10px 20px;
+ min-height: 70vh;
+}
+
+.list li {
+ margin: 0 10px 10px 0;
+ list-style: none;
+ width: 80vw;
+}
+
+.list li a {
+ text-decoration: none;
+ font-size: 1.4rem;
+ background-color: cornflowerblue;
+ color: #fff;
+ padding: 10px 0;
+ display: block;
+ text-align: center;
+ border-radius: 8px;
+ border: 1px solid cornflowerblue;
+}
+
+.list li a:hover {
+ background-color: #fff;
+ color: cornflowerblue;
+ transition: 0.3s;
+}
+
+.list li a:active {
+ background-color: #fff;
+ color: cornflowerblue;
+}
+
+@media (min-width: 600px) {
+ .list {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .list li {
+ width: 40vw;
+ }
+}
+
+@media (min-width: 801px) {
+ .list li {
+ width: 40vw;
+ }
+}
+
+@media (min-width: 1024px) {
+ .container {
+ width: 80vw;
+ }
+
+ .list li {
+ width: 25vw;
+ }
+}
\ No newline at end of file