${project.titulo}
+ +${project.categoria}
+${project.dificuldade}
+ +${project.conteudo}
+diff --git a/src/projetos/assets/css/criarprojeto.css b/src/projetos/assets/css/criarprojeto.css
deleted file mode 100644
index ae47f09..0000000
--- a/src/projetos/assets/css/criarprojeto.css
+++ /dev/null
@@ -1,229 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
-
-:root {
- --principal-blue: #1372bf;
- --white: #f9f9f9;
- --light-grey: #cccccc;
- --grey: #858585;
- --black: #2C2C2C;
- --light-blue: #88FFFF;
- --light-yellow: #FFFC5C;
- --light-red: #FF5544;
- --light-green: #55AA55;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- background-color: var(--white);
- font-family: "Poppins", sans-serif;
-}
-
-h1 {
- margin-top: 20px;
- text-align: center;
-}
-
-h2 {
- display: block;
- margin: 1em auto 0.5em;
- font-size: 2em;
- text-align: start;
-}
-
-h3 {
- width: 100%;
- margin: 1em 0 .5em;
- font-size: 1.4em;
- color: var(--white);
-}
-
-a {
- text-decoration: none;
-}
-
-ul {
- list-style: none;
-}
-
-/* HEADER */
-header {
- position: sticky;
- top: 0;
- width: 100%;
- padding: 1em 0;
- z-index: 1;
- background-color: var(--black);
-}
-
-.logo {
- display: inline-block;
- margin-left: 20px;
- color: var(--principal-blue);
- font-size: 1.5em;
- font-family: 'Bungee', sans-serif;
-}
-
-nav {
- position: fixed;
- width: 100%;
- height: 100%;
- max-height: 0;
- overflow: hidden;
- background-color: var(--black);
- transition: max-height .5s ease-out;
-}
-
-.menu a {
- display: block;
- padding: 10px 25px;
- color: var(--white);
-}
-
-nav ul {
- margin: 0 20px;
-}
-
-nav ul li{
- margin: 0 3px;
-}
-
-nav ul li:hover,
-nav ul li:last-child {
- background: var(--principal-blue);
- transition: .5s linear;
-}
-
-.hamb {
- margin: 0 2em;
- padding: 20px 20px;
- float: right;
- cursor: pointer;
-}
-
-.hamb-line {
- display: block;
- position: relative;
- width: 24px;
- height: 3px;
- background: var(--white);
-}
-
-.hamb-line::before,
-.hamb-line::after {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- content: '';
- background: var(--white);
- transition: all .2s ease-out;
-}
-
-.hamb-line::before {
- top: 7px;
-}
-
-.hamb-line::after {
- top: -7px;
-}
-
-.side-menu {
- display: none;
-}
-
-.side-menu:checked ~ nav {
- max-height: 100%;
-}
-
-.side-menu:checked ~ .hamb .hamb-line {
- background: transparent;
-}
-
-.side-menu:checked ~ .hamb .hamb-line::before {
- top:0;
- transform: rotate(-45deg);
-}
-
-.side-menu:checked ~ .hamb .hamb-line::after {
- top:0;
- transform: rotate(45deg);
-}
-
-@media (min-width: 768px) {
- nav {
- position: relative;
- width: fit-content;
- max-height: none;
- top: 0;
- float: right;
- background-color: transparent;
- }
-
- .menu li {
- float: left;
- }
-
- .hamb {
- display: none;
- }
-}
-
-/* MAIN CONTENT */
-main {
- width: 800px;
- max-width: 100%;
- margin: auto;
- padding: 0 1em;
-}
-
-/* FOOTER */
-footer {
- display: grid;
- grid-template-columns: 4fr 3fr;
- margin-top: 3em;
- padding: 1em 4em 3em;
- background-color: var(--black);
- color: var(--light-grey);
-}
-
-footer section {
- display: flex;
- width: 100%;
- min-height: 15em;
- padding: 0 2em;
- flex-direction: column;
-}
-
-footer section p {
- margin-top: .5em;
- text-align: justify;
-}
-
-footer section li {
- list-style: none;
-}
-
-footer section li a {
- font-weight: bold;
- text-decoration: underline;
- color: inherit;
-}
-
-@media screen and (max-width: 1024px) {
- footer {
- padding: 1em;
- }
-}
-
-@media screen and (max-width: 768px) {
- footer {
- grid-template-columns: 1fr;
- padding: 0;
- }
-}
\ No newline at end of file
diff --git a/src/projetos/assets/css/projetos.css b/src/projetos/assets/css/projetos.css
index bac3b9e..281c237 100644
--- a/src/projetos/assets/css/projetos.css
+++ b/src/projetos/assets/css/projetos.css
@@ -1,241 +1,84 @@
-@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
-
-:root {
- --principal-blue: #1372bf;
- --white: #f9f9f9;
- --light-grey: #cccccc;
- --grey: #858585;
- --black: #2C2C2C;
- --light-blue: #88FFFF;
- --light-yellow: #FFFC5C;
- --light-red: #FF5544;
- --light-green: #55AA55;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+.card-content {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-height: 3em;
}
-body {
- background-color: var(--white);
- font-family: "Poppins", sans-serif;
+.card img {
+ max-width: 100%;
+ max-height: 250px;
+ object-fit: cover;
}
-h1 {
- margin-top: 20px;
- text-align: center;
-}
-h2 {
- display: block;
- margin: 1em auto 0.5em;
- font-size: 2em;
- text-align: start;
-}
-h3 {
- width: 100%;
- margin: 1em 0 .5em;
- font-size: 1.4em;
- color: var(--white);
+main article {
+ background-color: var(--light-grey);
+ margin: 2em auto;
+ padding: 1.5em 2.5em;
+ width: 90%;
+ border-radius: 1.5vmax;
}
-a {
- text-decoration: none;
+main article.autor {
+ border: 2px solid var(--principal-blue);
}
-ul {
- list-style: none;
+#projects {
+ display: inline-block;
}
-/* HEADER */
-header {
- position: sticky;
- top: 0;
- width: 100%;
- padding: 1em 0;
- z-index: 1;
- background-color: var(--black);
+#projects a {
+ color: inherit;
}
-.logo {
- display: inline-block;
- margin-left: 20px;
+#projects article h3 {
color: var(--principal-blue);
- font-size: 1.5em;
- font-family: 'Bungee', sans-serif;
-}
-
-nav {
- position: fixed;
- width: 100%;
- height: 100%;
- max-height: 0;
- overflow: hidden;
- background-color: var(--black);
- transition: max-height .5s ease-out;
+ display: inline;
+ margin: 0 1em 0 0;
+ vertical-align: middle;
}
-.menu a {
- display: block;
- padding: 10px 25px;
+#projects article p.categoria {
+ display: inline-block;
+ padding: .3em .6em;
+ background-color: var(--grey);
color: var(--white);
+ font-weight: bold;
+ border-radius: .5vmax;
}
-nav ul {
- margin: 0 20px;
-}
-
-nav ul li{
- margin: 0 3px;
-}
-
-nav ul li:hover,
-nav ul li:last-child {
- background: var(--principal-blue);
- transition: .5s linear;
-}
-
-.hamb {
- margin: 0 2em;
- padding: 20px 20px;
+#projects article .engajamento {
+ display: inline;
+ vertical-align: middle;
+ font-size: 1.2em;
float: right;
- cursor: pointer;
-}
-
-.hamb-line {
- display: block;
- position: relative;
- width: 24px;
- height: 3px;
- background: var(--white);
-}
-
-.hamb-line::before,
-.hamb-line::after {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- content: '';
- background: var(--white);
- transition: all .2s ease-out;
-}
-
-.hamb-line::before {
- top: 7px;
-}
-
-.hamb-line::after {
- top: -7px;
-}
-
-.side-menu {
- display: none;
-}
-
-.side-menu:checked ~ nav {
- max-height: 100%;
-}
-
-.side-menu:checked ~ .hamb .hamb-line {
- background: transparent;
-}
-
-.side-menu:checked ~ .hamb .hamb-line::before {
- top:0;
- transform: rotate(-45deg);
-}
-
-.side-menu:checked ~ .hamb .hamb-line::after {
- top:0;
- transform: rotate(45deg);
-}
-
-@media (min-width: 768px) {
- nav {
- position: relative;
- width: fit-content;
- max-height: none;
- top: 0;
- float: right;
- background-color: transparent;
- }
-
- .menu li {
- float: left;
- }
-
- .hamb {
- display: none;
- }
}
-/* MAIN CONTENT */
-main {
- max-width: 100%;
- margin: auto;
- padding: 0 1em;
+#projects article .engajamento span {
+ margin-right: 1em;
}
-.card-content {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-height: 3em;
+#projects article .engajamento button {
+ padding: 0;
+ border: none;
+ background: none;
+ font-size: 1em;
}
-.card img {
- max-width: 100%;
- max-height: 250px;
- object-fit: cover;
- }
-
-/* FOOTER */
-footer {
- display: grid;
- grid-template-columns: 4fr 3fr;
- margin-top: 3em;
- padding: 1em 4em 3em;
- background-color: var(--black);
- color: var(--light-grey);
-}
-
-footer section {
- display: flex;
- width: 100%;
- min-height: 15em;
- padding: 0 2em;
- flex-direction: column;
+#projects article .engajamento button:hover {
+ cursor: pointer;
}
-footer section p {
- margin-top: .5em;
- text-align: justify;
+#projects article .engajamento .edit {
+ color: var(--blue);
}
-footer section li {
- list-style: none;
+#projects article .engajamento .delete {
+ color: var(--red);
}
-footer section li a {
- font-weight: bold;
- text-decoration: underline;
- color: inherit;
+#projects article .engajamento button i {
+ margin-left: .5em;
}
-
-@media screen and (max-width: 1024px) {
- footer {
- padding: 1em;
- }
-}
-
-@media screen and (max-width: 768px) {
- footer {
- grid-template-columns: 1fr;
- padding: 0;
- }
-}
\ No newline at end of file
diff --git a/src/projetos/assets/js/app.js b/src/projetos/assets/js/app.js
new file mode 100644
index 0000000..049b088
--- /dev/null
+++ b/src/projetos/assets/js/app.js
@@ -0,0 +1,33 @@
+let projectsList;
+
+window.addEventListener('load', ShowProjects, false);
+
+
+async function LoadProjects() {
+ try { projectsList = await (await fetch(`${apiURL}/projetos`)).json() }
+ catch (error) { console.error('Falha ao carregar os projetos:', error) }
+}
+
+async function ShowProjects() {
+ try {
+ await LoadProjects();
+
+ const textoHTML = projectsList.map(project => `
+ ${project.categoria} ${project.dificuldade} ${project.conteudo}${project.titulo}
+
+
${project.conteudo}
`; + } catch (error) { + console.error('Falha ao carregar e exibir os posts:', error); + } +} + +async function addComentario(event) { + event.preventDefault(); + + await loadPost(); + + const novoComentario = { + id: generateUUID(8), + autor: JSON.parse(sessionStorage.getItem('user')).name, + usuario: JSON.parse(sessionStorage.getItem('user')).id, + comentario: document.querySelector('#comentario').value, + }; + + fetch(`${apiURL}/posts/${id}`, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + }, + //body: JSON.stringify({ novoComentario }), + body: JSON.stringify({ comentarios: [...post.comentarios, novoComentario] }), + }) + .then(() => showPost()) + .catch(error => { + console.error('Erro ao inserir comentario via API JSONServer:', error); + }); +} + +async function addCurtida() { + await loadPost(); + + fetch(`${apiURL}/posts/${id}`, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ curtidas: post.curtidas + 1 }), + }) + .then(() => showPost()) + .catch(error => { + console.error('Erro ao inserir curtida via API JSONServer:', error); + }); +} diff --git a/src/projetos/criarprojeto.html b/src/projetos/criarprojeto.html deleted file mode 100644 index 0e25c21..0000000 --- a/src/projetos/criarprojeto.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - -Teste Categoria
+Teste Categoria
+ +Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, voluptas quibusdam. Voluptas ratione, dolorem perspiciatis soluta quisquam consectetur voluptatum cumque quae tempore? Nobis nostrum fuga consectetur, quia illum laboriosam
+