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.titulo}

+
+

${project.categoria}

+

${project.dificuldade}

+ +

${project.conteudo}

+
+ `).join(''); + + document.querySelector("#projects").innerHTML = textoHTML; + + } + catch (error) { + console.error('Falha ao exibir os projetos:', error); + } +} diff --git a/src/projetos/assets/js/projeto.js b/src/projetos/assets/js/projeto.js new file mode 100644 index 0000000..df289f4 --- /dev/null +++ b/src/projetos/assets/js/projeto.js @@ -0,0 +1,66 @@ +const id = new URLSearchParams(location.search).get('id'); +let project; + +window.addEventListener('load', showProject, false); + +async function loadProject() { + try { project = await (await fetch(`${apiURL}/projetos/${id}`)).json() } + catch (error) { console.error('Falha ao carregar o projeto:', error) } +} + +async function showProject() { + try { + await loadProject(); + + document.querySelector('.titulo').innerHTML = project.titulo; + document.querySelector('.categoria').innerHTML = project.categoria; + document.querySelector('.autor').innerHTML = project.autor; + + + document.querySelector('.conteudo').innerHTML = `

${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 @@ - - - - - - - - Cadastro de Projetos - - - - - -
- - - - - - - - -
-
-
-

Criar Projeto

-
-
- -
- - -
- - -
- - -
- -
-
- - -
- - -
- - - - - - \ No newline at end of file diff --git a/src/projetos/criarprojeto.js b/src/projetos/criarprojeto.js deleted file mode 100644 index 4a27ff2..0000000 --- a/src/projetos/criarprojeto.js +++ /dev/null @@ -1,52 +0,0 @@ -function addProjeto(event) { - event.preventDefault(); - - var form = document.getElementById("projeto"); - var title = document.getElementById("titulo").value; - var category = document.getElementById("categoria").value; - var image = document.getElementById("imagem").files[0]; - var difficulty = document.getElementById("dificuldade"); - var selectedDifficulty = difficulty.options[difficulty.selectedIndex].value; - var content = document.getElementById("conteudo").value; - - if (title !== "" && category !== "" && content !== "" && image !== "" && difficulty !== "") { - var reader = new FileReader(); - - reader.onload = function (event) { - var imageDataUrl = event.target.result; - - var projeto = { - "titulo": title, - "categoria": category, - "conteudo": content, - "imagem": imageDataUrl, - "dificuldade": selectedDifficulty - }; - - fetch("https://json-server.arnobio.repl.co", { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify(projeto) - }) - .then(function (response) { - if (response.ok) { - alert('Projeto adicionado'); - form.reset(); - } else { - console.error('Error:', error); - alert('Ocorreu um erro'); - } - }) - .catch(function (error) { - console.error('Error:', error); - alert('Ocorreu um erro. Verifique o console para mais informações.'); - }); - }; - - reader.readAsDataURL(image); - } else { - alert("Campos inválidos"); - } -} diff --git a/src/projetos/index.html b/src/projetos/index.html index f2e50e2..6978d93 100644 --- a/src/projetos/index.html +++ b/src/projetos/index.html @@ -2,50 +2,104 @@ - - - - Projetos - - - + + + + Projetos + + + + + -
- - - - - - - - -
-
-
-
- +
+ + + + + + + + +
+ +
+
+

Projetos

+ + + +
+
+ +

Teste Título

+
+

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

+
+
+
+ + + +
+
+ + - - \ No newline at end of file + + + diff --git a/src/projetos/projeto.html b/src/projetos/projeto.html new file mode 100644 index 0000000..32adb7f --- /dev/null +++ b/src/projetos/projeto.html @@ -0,0 +1,73 @@ + + + + + + + + Projetos + + + + + + + +
+ + + + + + + + +
+ +
+
+

+

+

publicado por:

+
+ +
+
+
+
+
+ + + + + + diff --git a/src/projetos/projetos.js b/src/projetos/projetos.js deleted file mode 100644 index 021ad89..0000000 --- a/src/projetos/projetos.js +++ /dev/null @@ -1,30 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - mostrarProjetos(); - }); - - function mostrarProjetos() { - fetch('https://jsonserver.arnobio.repl.co/projetos') - .then(function (response) { return response.json() }) - .then(function (projetos) { - let projetosHTML = ''; - - projetos.forEach(function (projeto) { - projetosHTML += ` -
-
- ... -
-
${projeto.titulo}
-

Categoria: ${projeto.categoria} | Nível de dificuldade: ${projeto.dificuldade}

-

${projeto.conteudo}

- Ver Detalhes -
-
-
`; - }); - - const projetosContainer = document.getElementById('projetos'); - projetosContainer.innerHTML = `
${projetosHTML}
`; - }); - } - \ No newline at end of file