├── codigo-por-aulas ├── Aula01 │ └── serratec-music │ │ ├── css │ │ └── base.css │ │ ├── js │ │ └── base.js │ │ └── login.html ├── Aula02 │ └── serratec-music │ │ ├── js │ │ └── base.js │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── base.css │ │ └── login.css │ │ └── login.html ├── Aula03 │ └── serratec-music │ │ ├── js │ │ ├── base.js │ │ ├── model │ │ │ └── Usuario.js │ │ └── login.js │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── base.css │ │ └── login.css │ │ ├── artistas.html │ │ └── login.html ├── Aula08 │ └── serratec-music │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── base.js │ │ ├── login.js │ │ └── controle-artista.js │ │ ├── album.html │ │ ├── login.html │ │ └── artistas.html ├── Aula04 │ └── serratec-music │ │ ├── js │ │ ├── base.js │ │ ├── model │ │ │ └── Usuario.js │ │ └── login.js │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── base.css │ │ └── login.css │ │ ├── artistas.html │ │ └── login.html ├── Aula05 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── js │ │ ├── model │ │ │ └── Usuario.js │ │ ├── base.js │ │ └── login.js │ │ ├── css │ │ ├── base.css │ │ └── login.css │ │ ├── artistas.html │ │ └── login.html ├── Aula06 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── js │ │ ├── model │ │ │ └── Usuario.js │ │ ├── base.js │ │ └── login.js │ │ ├── css │ │ ├── login.css │ │ └── base.css │ │ ├── album.html │ │ ├── artistas.html │ │ └── login.html ├── Aula07 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── base.js │ │ └── login.js │ │ ├── css │ │ ├── login.css │ │ └── base.css │ │ ├── album.html │ │ ├── login.html │ │ └── artistas.html ├── Aula09 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── base.js │ │ ├── login.js │ │ └── controle-artista.js │ │ ├── album.html │ │ ├── login.html │ │ └── artistas.html ├── Aula10 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── login.js │ │ ├── base.js │ │ └── controle-artista.js │ │ ├── album.html │ │ ├── login.html │ │ └── artistas.html ├── Aula11 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── ajustes.txt │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── login.js │ │ ├── base.js │ │ └── controle-artista.js │ │ ├── album.html │ │ ├── login.html │ │ └── artistas.html ├── Aula12 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── ajustes.txt │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── login.js │ │ ├── base.js │ │ └── controle-artista.js │ │ ├── album.html │ │ └── login.html ├── Aula13 │ └── serratec-music │ │ ├── img │ │ ├── music.jpg │ │ └── serratec.png │ │ ├── css │ │ ├── artistas.css │ │ ├── login.css │ │ └── base.css │ │ ├── ajustes.txt │ │ ├── js │ │ ├── model │ │ │ ├── Artista.js │ │ │ └── Usuario.js │ │ ├── login.js │ │ └── base.js │ │ ├── album.html │ │ └── login.html └── Aula14 │ └── serratec-music │ ├── img │ ├── music.jpg │ └── serratec.png │ ├── css │ ├── artistas.css │ ├── login.css │ └── base.css │ ├── ajustes.txt │ ├── js │ ├── model │ │ ├── Artista.js │ │ └── Usuario.js │ ├── login.js │ └── base.js │ ├── album.html │ └── login.html ├── serratec-music ├── img │ ├── music.jpg │ └── serratec.png ├── css │ ├── artistas.css │ ├── login.css │ └── base.css ├── ajustes.txt ├── js │ ├── model │ │ ├── Artista.js │ │ └── Usuario.js │ ├── login.js │ └── base.js ├── album.html ├── login.html └── artistas.html ├── desafio-palindromo ├── script.js ├── index.html └── style.css ├── desafio-dos-quadrados ├── index.html └── style.css ├── people-searcher ├── index.html ├── style.css └── script.js ├── desafio-cronometro ├── index.html ├── script.js └── style.css ├── README.md └── .gitignore /codigo-por-aulas/Aula01/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula01/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `http://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | -------------------------------------------------------------------------------- /serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula02/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula03/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula04/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula05/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula06/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula07/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula08/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula09/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula10/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula11/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula12/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula13/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/img/music.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula14/serratec-music/img/music.jpg -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula02/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula03/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula04/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula05/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula06/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula07/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula08/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula09/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula10/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula11/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula12/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula13/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/img/serratec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Material-Didatico-Serratec/frontend-essencial/HEAD/codigo-por-aulas/Aula14/serratec-music/img/serratec.png -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/ajustes.txt: -------------------------------------------------------------------------------- 1 | 1) Corrigir o problema de cors na api para permitir atualizar o artista. 2 | 2) Corrigir o bug de não conseguir alterar o tipo do artista no modal. -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/css/artistas.css: -------------------------------------------------------------------------------- 1 | table.table{ 2 | box-shadow: 0 0 10px 0 rgb(50 50 50 / 82%); 3 | 4 | } 5 | 6 | table>thead>tr:first-child{ 7 | background-color: #eee; 8 | } -------------------------------------------------------------------------------- /serratec-music/ajustes.txt: -------------------------------------------------------------------------------- 1 | 1) Corrigir o problema de cors na api para permitir atualizar o artista. 2 | Corrigido! 3 | 4 | 2) Corrigir o bug de não conseguir alterar o tipo do artista no modal. 5 | Corrigido! -------------------------------------------------------------------------------- /serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/ajustes.txt: -------------------------------------------------------------------------------- 1 | 1) Corrigir o problema de cors na api para permitir atualizar o artista. 2 | Corrigido! 3 | 4 | 2) Corrigir o bug de não conseguir alterar o tipo do artista no modal. 5 | Corrigido! -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/ajustes.txt: -------------------------------------------------------------------------------- 1 | 1) Corrigir o problema de cors na api para permitir atualizar o artista. 2 | Corrigido! 3 | 4 | 2) Corrigir o bug de não conseguir alterar o tipo do artista no modal. 5 | Corrigido! -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/ajustes.txt: -------------------------------------------------------------------------------- 1 | 1) Corrigir o problema de cors na api para permitir atualizar o artista. 2 | Corrigido! 3 | 4 | 2) Corrigir o bug de não conseguir alterar o tipo do artista no modal. 5 | Corrigido! -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/js/model/Artista.js: -------------------------------------------------------------------------------- 1 | class Artista { 2 | constructor(obj){ 3 | obj = obj || {}; 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.tipo = obj.tipo; 8 | } 9 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --cor-primaria: #0F74BC; 4 | --cor-secundaria: #0c609C; 5 | --cor-terciaria: #0A5388; 6 | --cor-background: #FFF; 7 | } 8 | 9 | body{ 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | } -------------------------------------------------------------------------------- /serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/js/model/Usuario.js: -------------------------------------------------------------------------------- 1 | class Usuario { 2 | constructor(obj){ 3 | obj = obj || {} // Tratamento ante erro de undefined 4 | 5 | this.id = obj.id; 6 | this.nome = obj.nome; 7 | this.email = obj.email; 8 | this.senha = obj.senha; 9 | } 10 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } -------------------------------------------------------------------------------- /desafio-palindromo/script.js: -------------------------------------------------------------------------------- 1 | function check() { 2 | event.preventDefault(); 3 | var word = document.getElementById("prompt").value 4 | var reverseWord = word.split("").reverse().join(""); 5 | if(reverseWord.toLowerCase() == word.toLowerCase()) { 6 | document.getElementById("result").innerHTML = "

É um palíndromo! :D

" 7 | } else { 8 | document.getElementById("result").innerHTML = "

Não é um palíndromo! :(

" 9 | } 10 | } -------------------------------------------------------------------------------- /serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/css/login.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: var(--cor-primaria); 4 | } 5 | 6 | .logo h1 { 7 | color: var(--cor-primaria); 8 | font-size: 35px; 9 | font-weight: 600; 10 | text-align: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .box-login { 15 | width: 600px; 16 | margin: auto; 17 | border: 1px solid var(--cor-terciaria); 18 | border-radius: 4px; 19 | padding: 25px; 20 | margin-top: 120px; 21 | background-color: var(--cor-background); 22 | } 23 | 24 | #btn-entrar { 25 | width: 100%; 26 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | alert("Olá!!!"); 10 | 11 | let usuario = new Usuario({ 12 | email: formulario.email.value, 13 | senha: formulario.senha.value 14 | }); 15 | 16 | //Validar se o usuario e senha podem acessar o sistema. 17 | 18 | window.open('/artistas.html', '_self'); 19 | 20 | }) -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | alert("Olá!!!"); 10 | 11 | let usuario = new Usuario({ 12 | email: formulario.email.value, 13 | senha: formulario.senha.value 14 | }); 15 | 16 | //Validar se o usuario e senha podem acessar o sistema. 17 | 18 | window.open('/artistas.html', '_self'); 19 | 20 | }) 21 | 22 | function autenticar(email, senha){ 23 | // 24 | } -------------------------------------------------------------------------------- /desafio-dos-quadrados/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Desafio dos Quadrados 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /desafio-palindromo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Desafio dos Palíndromos 9 | 10 | 11 | 12 |
13 |

Verificador de Palíndromos

14 |
15 | 16 | 17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /desafio-dos-quadrados/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | height: 100%; 4 | } 5 | 6 | .box { 7 | width: 300px; 8 | height: 300px; 9 | } 10 | 11 | #container { 12 | height: 100%; 13 | position: relative; 14 | } 15 | 16 | #top-left { 17 | background-color: red; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | } 22 | 23 | #top-right { 24 | background-color: yellow; 25 | position: absolute; 26 | top: 0; 27 | right: 0; 28 | } 29 | 30 | #bottom-left { 31 | background-color: blue; 32 | position: absolute; 33 | bottom: 0; 34 | left: 0; 35 | } 36 | 37 | #bottom-right { 38 | background-color: green; 39 | position: absolute; 40 | bottom: 0; 41 | right: 0; 42 | } 43 | 44 | #center { 45 | background-color: orange; 46 | position: absolute; 47 | top: calc(50% - 150px); 48 | left: calc(50% - 150px); 49 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula01/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /people-searcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | People Searcher 10 | 11 | 12 |
13 |

People Searcher 🕵️‍♂️

14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 |

Sou a tela de artista, estou em construção!!

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 |

Sou a tela de artista, estou em construção!!

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 |

Sou a tela de artista, estou em construção!!

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | localStorage.setItem("token", token) 6 | } 7 | 8 | function obterToken(){ 9 | return localStorage.getItem("token") 10 | } 11 | 12 | function sair(){ 13 | localStorage.removeItem("token") 14 | direcionarTelaDeLogin() 15 | } 16 | 17 | function direcionarTelaDeLogin(){ 18 | window.open("login.html", "_self"); 19 | } 20 | 21 | function direcionarTelaDeArtistas(){ 22 | window.open("artistas.html", "_self"); 23 | } 24 | 25 | function usuarioLogado(){ 26 | let token = obterToken(); 27 | return !!token; 28 | } 29 | 30 | function validarUsuarioAutenticado(){ 31 | 32 | let logado = usuarioLogado(); 33 | 34 | if(window.location.pathname == "/login.html"){ 35 | 36 | //Se tiver logado, não pode acessar o login 37 | if(logado){ 38 | direcionarTelaDeArtistas(); 39 | } 40 | }else if(!logado && window.location.pathname != "/login.html"){ 41 | direcionarTelaDeLogin(); 42 | } 43 | } 44 | 45 | 46 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | localStorage.setItem("token", token) 6 | } 7 | 8 | function obterToken(){ 9 | return localStorage.getItem("token") 10 | } 11 | 12 | function sair(){ 13 | localStorage.removeItem("token") 14 | direcionarTelaDeLogin() 15 | } 16 | 17 | function direcionarTelaDeLogin(){ 18 | window.open("login.html", "_self"); 19 | } 20 | 21 | function direcionarTelaDeArtistas(){ 22 | window.open("artistas.html", "_self"); 23 | } 24 | 25 | function usuarioLogado(){ 26 | let token = obterToken(); 27 | return !!token; 28 | } 29 | 30 | function validarUsuarioAutenticado(){ 31 | 32 | let logado = usuarioLogado(); 33 | 34 | if(window.location.pathname == "/login.html"){ 35 | 36 | //Se tiver logado, não pode acessar o login 37 | if(logado){ 38 | direcionarTelaDeArtistas(); 39 | } 40 | }else if(!logado && window.location.pathname != "/login.html"){ 41 | direcionarTelaDeLogin(); 42 | } 43 | } 44 | 45 | 46 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | localStorage.setItem("token", token) 6 | } 7 | 8 | function obterToken(){ 9 | return localStorage.getItem("token") 10 | } 11 | 12 | function sair(){ 13 | localStorage.removeItem("token") 14 | direcionarTelaDeLogin() 15 | } 16 | 17 | function direcionarTelaDeLogin(){ 18 | window.open("login.html", "_self"); 19 | } 20 | 21 | function direcionarTelaDeArtistas(){ 22 | window.open("artistas.html", "_self"); 23 | } 24 | 25 | function usuarioLogado(){ 26 | let token = obterToken(); 27 | return !!token; 28 | } 29 | 30 | function validarUsuarioAutenticado(){ 31 | 32 | let logado = usuarioLogado(); 33 | 34 | if(window.location.pathname == "/login.html"){ 35 | 36 | //Se tiver logado, não pode acessar o login 37 | if(logado){ 38 | direcionarTelaDeArtistas(); 39 | } 40 | }else if(!logado && window.location.pathname != "/login.html"){ 41 | direcionarTelaDeLogin(); 42 | } 43 | } 44 | 45 | 46 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | localStorage.setItem("token", token) 6 | } 7 | 8 | function obterToken(){ 9 | return localStorage.getItem("token") 10 | } 11 | 12 | function sair(){ 13 | localStorage.removeItem("token") 14 | direcionarTelaDeLogin() 15 | } 16 | 17 | function direcionarTelaDeLogin(){ 18 | window.open("login.html", "_self"); 19 | } 20 | 21 | function direcionarTelaDeArtistas(){ 22 | window.open("artistas.html", "_self"); 23 | } 24 | 25 | function usuarioLogado(){ 26 | let token = obterToken(); 27 | return !!token; 28 | } 29 | 30 | function validarUsuarioAutenticado(){ 31 | 32 | let logado = usuarioLogado(); 33 | 34 | if(window.location.pathname == "/login.html"){ 35 | 36 | //Se tiver logado, não pode acessar o login 37 | if(logado){ 38 | direcionarTelaDeArtistas(); 39 | } 40 | }else if(!logado && window.location.pathname != "/login.html"){ 41 | direcionarTelaDeLogin(); 42 | } 43 | } 44 | 45 | 46 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | localStorage.setItem("token", token) 6 | } 7 | 8 | function obterToken(){ 9 | return localStorage.getItem("token") 10 | } 11 | 12 | function sair(){ 13 | localStorage.removeItem("token") 14 | direcionarTelaDeLogin() 15 | } 16 | 17 | function direcionarTelaDeLogin(){ 18 | window.open("login.html", "_self"); 19 | } 20 | 21 | function direcionarTelaDeArtistas(){ 22 | window.open("artistas.html", "_self"); 23 | } 24 | 25 | function usuarioLogado(){ 26 | let token = obterToken(); 27 | return !!token; 28 | } 29 | 30 | function validarUsuarioAutenticado(){ 31 | 32 | let logado = usuarioLogado(); 33 | 34 | if(window.location.pathname == "/login.html"){ 35 | 36 | //Se tiver logado, não pode acessar o login 37 | if(logado){ 38 | direcionarTelaDeArtistas(); 39 | } 40 | }else if(!logado && window.location.pathname != "/login.html"){ 41 | direcionarTelaDeLogin(); 42 | } 43 | } 44 | 45 | 46 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/js/login.js: -------------------------------------------------------------------------------- 1 | let formulario = { 2 | email: document.querySelector("#email"), 3 | senha: document.querySelector("#senha"), 4 | btnEntrar: document.querySelector("#btn-entrar") 5 | }; 6 | 7 | //Aqui estamos escutando o evento de click. 8 | formulario.btnEntrar.addEventListener('click', () => { 9 | 10 | let usuario = new Usuario({ 11 | email: formulario.email.value, 12 | senha: formulario.senha.value 13 | }); 14 | 15 | //Validar se o usuario e senha podem acessar o sistema. 16 | autenticar(usuario.email, usuario.senha); 17 | }) 18 | 19 | function autenticar(email, senha){ 20 | fetch(`${URL_BASE}/api/login`, { 21 | headers:{ 22 | "Content-Type": "application/json" 23 | }, 24 | method: "POST", 25 | body: JSON.stringify({user: email, password: senha}) 26 | }) 27 | .then(response => { 28 | let token = response.headers.get("Authorization"); 29 | salvarToken(token); 30 | direcionarTelaDeArtistas(); 31 | }) 32 | .catch(error => { 33 | console.log(error); 34 | alert("Não foi possivel se autenticar"); 35 | }) 36 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | 53 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | 53 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | 53 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | 53 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /desafio-palindromo/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body, 6 | html { 7 | margin: 0; 8 | height: 100%; 9 | } 10 | 11 | #container { 12 | height: 100%; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | #title { 20 | font-size: 64px; 21 | } 22 | 23 | #answer { 24 | font-size: 32px; 25 | font-family: sans-serif; 26 | } 27 | 28 | form { 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | input { 34 | text-align: center; 35 | border-radius: 5px 0 0 5px; 36 | padding: 10px; 37 | height: 50px; 38 | width: 400px; 39 | border: 1px solid #d3d3d3; 40 | 41 | font-size: 24px; 42 | } 43 | 44 | button { 45 | height: 50px; 46 | width: 75px; 47 | border-radius: 0 5px 5px 0; 48 | border: none; 49 | background-color: #FF9900; 50 | color: #FFF; 51 | font-size: 16px; 52 | cursor: pointer; 53 | transition: filter 0.4s; 54 | } 55 | 56 | button:hover { 57 | filter: brightness(0.8); 58 | } 59 | 60 | input:focus::placeholder { 61 | color: transparent; 62 | } 63 | 64 | input:focus{ 65 | outline: none; 66 | } 67 | 68 | .success { 69 | color: rgb(55, 210, 60); 70 | } 71 | 72 | .error { 73 | color: rgb(210, 55, 55); 74 | } -------------------------------------------------------------------------------- /serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | function tratarAutenticacaoResponse(response){ 53 | if(response.status == 403){ 54 | alert("Seu token expirou, efetue o login novamente."); 55 | sair(); 56 | } 57 | } 58 | 59 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/js/base.js: -------------------------------------------------------------------------------- 1 | const URL_BASE = `https://serratec-music-manager-api.herokuapp.com`; 2 | 3 | 4 | function salvarToken(token){ 5 | 6 | if(!token){ 7 | return; 8 | } 9 | 10 | localStorage.setItem("token", token) 11 | } 12 | 13 | function obterToken(){ 14 | return localStorage.getItem("token") 15 | } 16 | 17 | function sair(){ 18 | localStorage.removeItem("token") 19 | direcionarTelaDeLogin() 20 | } 21 | 22 | function direcionarTelaDeLogin(){ 23 | window.open("login.html", "_self"); 24 | } 25 | 26 | function direcionarTelaDeArtistas(){ 27 | window.open("artistas.html", "_self"); 28 | } 29 | 30 | function usuarioLogado(){ 31 | let token = obterToken(); 32 | 33 | return !!token; 34 | 35 | } 36 | 37 | function validarUsuarioAutenticado(){ 38 | 39 | let logado = usuarioLogado(); 40 | 41 | if(window.location.pathname == "/login.html"){ 42 | 43 | //Se tiver logado, não pode acessar o login 44 | if(logado){ 45 | direcionarTelaDeArtistas(); 46 | } 47 | }else if(!logado && window.location.pathname != "/login.html"){ 48 | direcionarTelaDeLogin(); 49 | } 50 | } 51 | 52 | function tratarAutenticacaoResponse(response){ 53 | if(response.status == 403){ 54 | alert("Seu token expirou, efetue o login novamente."); 55 | sair(); 56 | } 57 | } 58 | 59 | validarUsuarioAutenticado(); -------------------------------------------------------------------------------- /desafio-cronometro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desafio do Cronômetro 8 | 9 | 10 | 11 | 12 |
13 |

Cronômetro ⏱

14 |
15 | 16 |
0
17 |
0
18 | 19 |
20 |
21 |
22 |
23 | 24 |
0
25 |
0
26 | 27 |
28 |
29 |
30 |
31 | 32 |
0
33 |
0
34 |
35 | 36 | 37 |
38 | 39 | -------------------------------------------------------------------------------- /serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #0F74BC; 5 | --cor-secundaria: #0c609C; 6 | --cor-terciaria: #0A5388; 7 | --cor-background: #FFF; 8 | } 9 | 10 | body{ 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Quicksand', sans-serif; 15 | } 16 | 17 | 18 | /* Sobrescrevendo Bootstrap */ 19 | .form-control:focus { 20 | color: #495057; 21 | background-color: var(--cor-background); 22 | border-color: var(--cor-primaria); 23 | outline: 0; 24 | box-shadow: 0 0 0 0.04rem var(--cor-primaria); 25 | } 26 | 27 | .btn-primary, .btn-primary:focus, 28 | .btn-primary:not(:disabled):not(.disabled).active, 29 | .btn-primary:not(:disabled):not(.disabled):active, 30 | .show>.btn-primary.dropdown-toggle { 31 | color: var(--cor-background); 32 | background-color: var(--cor-primaria); 33 | border-color: var(--cor-primaria); 34 | outline: 0; 35 | } 36 | 37 | .btn-primary:not(:disabled):not(.disabled).active:focus, 38 | .btn-primary:not(:disabled):not(.disabled):active:focus, 39 | .show>.btn-primary.dropdown-toggle:focus { 40 | box-shadow: 0 0 0 0.1rem var(--cor-terciaria); 41 | outline: 0; 42 | } 43 | .btn-primary:hover { 44 | color: var(--cor-background); 45 | background-color: var(--cor-secundaria); 46 | border-color: var(--cor-secundaria); 47 | } 48 | 49 | nav.navbar.navbar-dark{ 50 | background-color: var(--cor-primaria) !important; 51 | } 52 | 53 | .modal-header { 54 | background-color: var(--cor-primaria); 55 | color: #fff; 56 | } 57 | 58 | .btn { 59 | min-width: 90px; 60 | } 61 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/js/controle-artista.js: -------------------------------------------------------------------------------- 1 | let artistas = []; 2 | let tabelaArtistas = document.querySelector("#tabela-artistas tbody"); 3 | 4 | 5 | function obterArtistasAPI(){ 6 | 7 | fetch(`${URL_BASE}/api/artista`, { 8 | headers:{ 9 | "Content-Type": "application/json", 10 | "Authorization": obterToken() 11 | }, 12 | method: "GET" 13 | }) 14 | .then(response => response.json()) 15 | .then(response => { 16 | artistas = response.map(a => new Artista(a)); 17 | preencherTabela(artistas); 18 | }) 19 | .catch(error => { 20 | console.log(error) 21 | }) 22 | } 23 | 24 | function preencherTabela(artistas){ 25 | 26 | tabelaArtistas.textContent = ""; 27 | 28 | artistas.map(artista => { 29 | 30 | let tr = document.createElement("tr"); 31 | let tdId = document.createElement("td"); 32 | let tdNome = document.createElement("td"); 33 | let tdTipo = document.createElement("td"); 34 | let tdAcoes = document.createElement("td"); 35 | 36 | tdId.textContent = artista.id; 37 | tdNome.textContent = artista.nome; 38 | 39 | tdTipo.innerHTML = ` ${artista.tipo}`; 40 | 41 | tdAcoes.innerHTML = ` 42 | 43 | 44 | `; 45 | 46 | tdAcoes.classList.add("text-right") 47 | 48 | tr.appendChild(tdId); 49 | tr.appendChild(tdNome); 50 | tr.appendChild(tdTipo); 51 | tr.appendChild(tdAcoes); 52 | 53 | tabelaArtistas.appendChild(tr); 54 | }); 55 | 56 | } 57 | 58 | function editarArtista(id){ 59 | alert(id); 60 | } 61 | 62 | function excluirArtista(id){ 63 | alert(id); 64 | } 65 | obterArtistasAPI(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Serratec Music 2 | Sistema para controle de músicas. 3 | 4 | 5 | # Resumo 6 | Este projeto contém o material complementar da disciplina de frontend essencial. 7 | Neste material criamos um sistema por nome de Serratec Music, onde seu objetivo de além de integrar com uma API, é complementar os estudos dos alunos com as seguintes informações: 8 | 9 | - Aprender a criar tela de login 10 | - Aprender a fazer um fluxo de autenticação básico 11 | - Aprender a usar o localStorage 12 | - Conhecer as tags mais utilizadas do HTML 13 | - Trabalhar com vários arquivos externos, CSS e JS 14 | - Ter exemplo de utilização de várias propriedades do CSS 15 | - Trabalhar com Fonts do Google 16 | - Trabalhar com classes básicas do Bootstrap 17 | - Trabalhar com Modais 18 | - Trabalhar com GridSystem Bootstrap 19 | - Utilizar conceitos importantes do JavaScript como: 20 | * Let, var, const 21 | * Arrays 22 | * Objetos 23 | * Manipulação de DOM 24 | * Eventos 25 | * Funções 26 | * Condicionais 27 | * Loopings 28 | * Ternários 29 | * Classes 30 | * Promises 31 | * CRUD utilizando fecth api 32 | * JSON 33 | * Funções temporais 34 | 35 | Este sistema não tem tudo que a API fornece, mas ele contempla todo o conteúdo da disciplina e muito mais. 36 | 37 | Todos os códigos criados estão separados por aulas dentro da pasta `codigo-por-aulas`. 38 | 39 | # Tecnologias 40 | Neste projeto usamos as seguintes tecnologias: 41 | 42 | - HTML 5 43 | - CSS 3 44 | - JS (ES6) 45 | - Bootstrap 4 46 | 47 | # Referencias 48 | 49 | * https://www.w3schools.com/ 50 | * https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status 51 | * https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data-pt 52 | 53 | # Saiba mais sobre o Serratec 54 | 55 | * https://serratec.org/ 56 | * https://www.instagram.com/serratecoficial/ 57 | * https://pt-br.facebook.com/serratecoficial/ 58 | * https://www.youtube.com/c/SerratecOficial 59 | * https://www.linkedin.com/company/serratecoficial/ 60 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula02/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/album.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Album

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 |

Artistas

38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula03/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula04/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula05/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula06/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula13/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula14/serratec-music/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | Imagem da logo da musica 20 |
21 |
22 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /desafio-cronometro/script.js: -------------------------------------------------------------------------------- 1 | // Formata o número de segundos para o formato hh:mm:ss 2 | const formatTime = (value) => { 3 | var sec_num = parseInt(value, 10); 4 | var hours = Math.floor(sec_num / 3600); 5 | var minutes = Math.floor((sec_num - (hours * 3600)) / 60); 6 | var seconds = sec_num - (hours * 3600) - (minutes * 60); 7 | 8 | if (hours < 10) {hours = "0"+hours;} 9 | if (minutes < 10) {minutes = "0"+minutes;} 10 | if (seconds < 10) {seconds = "0"+seconds;} 11 | return hours+':'+minutes+':'+seconds; 12 | } 13 | 14 | // Insere os caracteres em cada uma das divs designadas 15 | const insertNumbers = (timeLimit) => { 16 | var timeArray = formatTime(timeLimit).split(""); 17 | document.getElementById("decHour").innerText = timeArray[0] 18 | document.getElementById("unHour").innerText = timeArray[1] 19 | document.getElementById("decMinute").innerText = timeArray[3] 20 | document.getElementById("unMinute").innerText = timeArray[4] 21 | document.getElementById("decSecond").innerText = timeArray[6] 22 | document.getElementById("unSecond").innerText = timeArray[7] 23 | } 24 | 25 | // Inicia a contagem 26 | const startCounter = () => { 27 | var inputValue = document.getElementById("secondsInput").value; 28 | if(inputValue === "" || parseInt(inputValue) <= 0) { 29 | alert("Por favor, insira um valor válido.") 30 | } else { 31 | document.getElementById("startBtn").setAttribute("disabled", true) 32 | document.getElementById("secondsInput").setAttribute("disabled", true) 33 | document.getElementById("secondsInput").setAttribute("placeholder", "Aguarde a contagem...") 34 | var timeLimit = inputValue; 35 | document.getElementById("secondsInput").value = ""; 36 | insertNumbers(timeLimit); 37 | 38 | var counter = setInterval(() => { 39 | timeLimit--; 40 | insertNumbers(timeLimit); 41 | 42 | if(timeLimit === 0) { 43 | document.getElementById("startBtn").removeAttribute("disabled") 44 | document.getElementById("secondsInput").removeAttribute("disabled") 45 | document.getElementById("secondsInput").setAttribute("placeholder", "Quantos segundos?") 46 | clearInterval(counter); 47 | } 48 | }, 1000) 49 | } 50 | 51 | } -------------------------------------------------------------------------------- /desafio-cronometro/style.css: -------------------------------------------------------------------------------- 1 | /* ############# Global ############# */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | font-family: 'Courier New', Courier, monospace; 6 | } 7 | 8 | html, body { 9 | margin: 0; 10 | height: 100%; 11 | background-color: rgb(240, 240, 240); 12 | } 13 | 14 | h1 { 15 | margin: 0; 16 | } 17 | 18 | button { 19 | border: none; 20 | cursor: pointer; 21 | transition: filter 0.4s; 22 | } 23 | 24 | button:not(:disabled) { 25 | filter: brightness(0.9); 26 | } 27 | 28 | input:focus { 29 | outline: none; 30 | } 31 | 32 | input:hover { 33 | border: 1px solid rgb(217, 217, 217); 34 | } 35 | 36 | input:focus::placeholder { 37 | color: transparent; 38 | } 39 | 40 | #container { 41 | width: 100%; 42 | height: 100%; 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | justify-content: center; 47 | gap: 25px; 48 | } 49 | 50 | #pageTitle { 51 | font-size: 40px; 52 | font-weight: bold; 53 | color:rgb(82, 82, 82) 54 | } 55 | 56 | /* ############# Relógio ############# */ 57 | 58 | #watchContainer { 59 | display: flex; 60 | align-items: center; 61 | gap: 20px; 62 | } 63 | 64 | .box { 65 | background-color: #fff; 66 | height: 150px; 67 | width: 120px; 68 | border-radius: 10px; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | font-size: 150px; 73 | border: 1px solid rgb(217, 217, 217); 74 | } 75 | 76 | .dotsContainer { 77 | display: flex; 78 | flex-direction: column; 79 | align-items: center; 80 | gap: 50px; 81 | } 82 | 83 | .dot { 84 | background-color: #000; 85 | height: 20px; 86 | width: 20px; 87 | border-radius: 5px; 88 | } 89 | 90 | /* ############# Input de Segundos ############# */ 91 | 92 | #secondsInput { 93 | border: 1px solid rgb(217, 217, 217); 94 | text-align: center; 95 | padding: 10px; 96 | height: 40px; 97 | width: 300px; 98 | font-size: 16px; 99 | border-radius: 5px; 100 | } 101 | 102 | /* ############# Botão Iniciar ############# */ 103 | 104 | #startBtn { 105 | width: 900px; 106 | height: 50px; 107 | border-radius: 7px; 108 | background-color: #FF9000; 109 | border: 1px solid #cd7400; 110 | font-size: 32px; 111 | font-weight: bold; 112 | color: #fff; 113 | } 114 | 115 | #startBtn:disabled { 116 | border: 1px solid rgb(217, 217, 217); 117 | background-color: rgb(184, 184, 184); 118 | cursor: not-allowed; 119 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/js/controle-artista.js: -------------------------------------------------------------------------------- 1 | let artistas = []; 2 | let tabelaArtistas = document.querySelector("#tabela-artistas tbody"); 3 | let btnAdicionar = document.getElementById("btn-adicionar"); 4 | 5 | let modal = { 6 | self: document.querySelector("#modal-artista"), 7 | idArtista: document.querySelector("#id"), 8 | nomeArtista: document.querySelector("#nome"), 9 | tipoArtista: document.querySelector("#tipo-artista"), 10 | btnSalvar: document.querySelector("#btn-salvar"), 11 | btnCancelar: document.querySelector("#btn-cancelar") 12 | }; 13 | 14 | btnAdicionar.addEventListener('click', (e) => { 15 | e.preventDefault(); // Parar qualquer ação que esteja acontecendo no navegador. 16 | // Abrir modal para adicionar artista. 17 | abrirModal(); 18 | }) 19 | 20 | modal.btnCancelar.addEventListener('click', () => { 21 | fecharModal(); 22 | }); 23 | 24 | function abrirModal(){ 25 | $("#modal-artista").modal({backdrop: "static"}); 26 | } 27 | 28 | function fecharModal(){ 29 | $("#modal-artista").modal("hide"); 30 | } 31 | 32 | function obterArtistasAPI(){ 33 | 34 | fetch(`${URL_BASE}/api/artista`, { 35 | headers:{ 36 | "Content-Type": "application/json", 37 | "Authorization": obterToken() 38 | }, 39 | method: "GET" 40 | }) 41 | .then(response => response.json()) 42 | .then(response => { 43 | artistas = response.map(a => new Artista(a)); 44 | preencherTabela(artistas); 45 | }) 46 | .catch(error => { 47 | console.log(error) 48 | }) 49 | } 50 | 51 | function preencherTabela(artistas){ 52 | 53 | tabelaArtistas.textContent = ""; 54 | 55 | artistas.map(artista => { 56 | 57 | let tr = document.createElement("tr"); 58 | let tdId = document.createElement("td"); 59 | let tdNome = document.createElement("td"); 60 | let tdTipo = document.createElement("td"); 61 | let tdAcoes = document.createElement("td"); 62 | 63 | tdId.textContent = artista.id; 64 | tdNome.textContent = artista.nome; 65 | 66 | tdTipo.innerHTML = ` ${artista.tipo}`; 67 | 68 | tdAcoes.innerHTML = ` 69 | 70 | 71 | `; 72 | 73 | tdAcoes.classList.add("text-right"); 74 | 75 | tr.appendChild(tdId); 76 | tr.appendChild(tdNome); 77 | tr.appendChild(tdTipo); 78 | tr.appendChild(tdAcoes); 79 | 80 | tabelaArtistas.appendChild(tr); 81 | }); 82 | 83 | } 84 | 85 | function editarArtista(id){ 86 | alert(id); 87 | } 88 | 89 | function excluirArtista(id){ 90 | alert(id); 91 | } 92 | obterArtistasAPI(); -------------------------------------------------------------------------------- /people-searcher/style.css: -------------------------------------------------------------------------------- 1 | /* ############# GLOBAL ############# */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | font-family: 'Courier New', Courier, monospace; 6 | } 7 | 8 | body, html { 9 | margin: 0; 10 | max-height: 100%; 11 | background-color: rgb(241, 241, 241); 12 | } 13 | 14 | button { 15 | border: none; 16 | cursor: pointer; 17 | } 18 | 19 | input:focus { 20 | outline: none; 21 | } 22 | 23 | input:focus::placeholder { 24 | color: transparent; 25 | } 26 | 27 | /* ############# CONTAINER DA PÁGINA ############# */ 28 | 29 | #container { 30 | width: 100%; 31 | height: 100%; 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | justify-content: center; 36 | overflow: auto; 37 | padding: 25px; 38 | } 39 | 40 | /* ############# TÍTULO DA PÁGINA ############# */ 41 | 42 | #pageTitle { 43 | font-size: 40px; 44 | font-weight: bold; 45 | color: rgb(73, 73, 73); 46 | } 47 | 48 | /* ############# ÁREA DO INPUT ############# */ 49 | 50 | form { 51 | display: flex; 52 | align-items: center; 53 | } 54 | 55 | #searchForm input { 56 | width: 350px; 57 | height: 60px; 58 | border-radius: 10px 0 0 10px; 59 | padding: 10px; 60 | font-size: 18px; 61 | border: 1px solid rgb(186, 186, 186); 62 | border-right: none; 63 | position: relative; 64 | } 65 | 66 | #searchForm button { 67 | width: 70px; 68 | height: 60px; 69 | padding: 10px; 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | border-radius: 0 10px 10px 0; 74 | border: 1px solid #ab6102; 75 | background-color: #FF9000; 76 | transition: filter 0.4s; 77 | } 78 | 79 | #searchForm button:hover { 80 | filter: brightness(0.9); 81 | } 82 | 83 | 84 | #searchForm button img { 85 | width: 40px; 86 | } 87 | 88 | #suggestions { 89 | height: 100px; 90 | width: 351px; 91 | background-color: #fff; 92 | position: absolute; 93 | top: 186px; 94 | padding: 20px; 95 | 96 | display: none; 97 | flex-direction: column; 98 | align-items: flex-start; 99 | font-size: 16px; 100 | gap: 5px; 101 | border: 1px solid rgb(186, 186, 186); 102 | border-top: none; 103 | } 104 | 105 | .collaboratorSuggestion:hover { 106 | cursor: pointer; 107 | text-decoration: underline; 108 | } 109 | 110 | /* ############# PEOPLE CONTAINER ############# */ 111 | 112 | #peopleContainer { 113 | display: flex; 114 | flex-direction: column; 115 | align-items: center; 116 | justify-content: center; 117 | } 118 | 119 | #peopleContainer .noCollaboratorFound { 120 | margin-top: 20px; 121 | font-size: 24px; 122 | font-weight: bold; 123 | } 124 | 125 | /* ############# PERSON CONTAINER ############# */ 126 | 127 | .personContainer { 128 | display: flex; 129 | align-items: center; 130 | justify-content: center; 131 | gap: 15px; 132 | 133 | padding: 10px 25px; 134 | margin-top: 15px; 135 | 136 | white-space: nowrap; 137 | min-width: 400px; 138 | background-color: #fff; 139 | border: 1px solid rgb(186, 186, 186); 140 | border-radius: 10px; 141 | } 142 | 143 | .personContainer img { 144 | border-radius: 50%; 145 | object-fit: cover; 146 | height: 80px; 147 | width: 80px; 148 | } 149 | 150 | .personContainer .contentContainer { 151 | display: flex; 152 | flex-direction: column; 153 | align-items: flex-start; 154 | } 155 | 156 | .personContainer .contentContainer .title { 157 | font-size: 24px; 158 | font-weight: bold; 159 | } 160 | 161 | .personContainer .contentContainer .jobTitle { 162 | font-size: 18px; 163 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/js/controle-artista.js: -------------------------------------------------------------------------------- 1 | let artistas = []; 2 | let tabelaArtistas = document.querySelector("#tabela-artistas tbody"); 3 | let btnAdicionar = document.getElementById("btn-adicionar"); 4 | 5 | let modal = { 6 | self: document.querySelector("#modal-artista"), 7 | idArtista: document.querySelector("#id"), 8 | nomeArtista: document.querySelector("#nome"), 9 | tipoArtista: document.querySelector("#tipo-artista"), 10 | btnSalvar: document.querySelector("#btn-salvar"), 11 | btnCancelar: document.querySelector("#btn-cancelar") 12 | }; 13 | 14 | btnAdicionar.addEventListener('click', (e) => { 15 | e.preventDefault(); // Parar qualquer ação que esteja acontecendo no navegador. 16 | abrirModal(); 17 | }) 18 | 19 | modal.btnCancelar.addEventListener('click', () => { 20 | fecharModal(); 21 | }); 22 | 23 | modal.btnSalvar.addEventListener('click', () => { 24 | let artista = obterArtistaModal(); 25 | 26 | editarArtistaAPI(artista); 27 | }); 28 | 29 | function abrirModal(){ 30 | $("#modal-artista").modal({backdrop: "static"}); 31 | } 32 | 33 | function fecharModal(){ 34 | $("#modal-artista").modal("hide"); 35 | } 36 | 37 | function obterArtistasAPI(){ 38 | 39 | fetch(`${URL_BASE}/api/artista`, { 40 | headers:{ 41 | "Content-Type": "application/json", 42 | "Authorization": obterToken() 43 | }, 44 | method: "GET" 45 | }) 46 | .then(response => response.json()) 47 | .then(response => { 48 | artistas = response.map(a => new Artista(a)); 49 | preencherTabela(artistas); 50 | }) 51 | .catch(error => { 52 | console.log(error) 53 | }) 54 | } 55 | 56 | function preencherTabela(artistas){ 57 | 58 | tabelaArtistas.textContent = ""; 59 | 60 | artistas.map(artista => { 61 | 62 | let tr = document.createElement("tr"); 63 | let tdId = document.createElement("td"); 64 | let tdNome = document.createElement("td"); 65 | let tdTipo = document.createElement("td"); 66 | let tdAcoes = document.createElement("td"); 67 | 68 | tdId.textContent = artista.id; 69 | tdNome.textContent = artista.nome; 70 | 71 | tdTipo.innerHTML = ` ${artista.tipo}`; 72 | 73 | tdAcoes.innerHTML = ` 74 | 75 | 76 | `; 77 | 78 | tdAcoes.classList.add("text-right"); 79 | 80 | tr.appendChild(tdId); 81 | tr.appendChild(tdNome); 82 | tr.appendChild(tdTipo); 83 | tr.appendChild(tdAcoes); 84 | 85 | tabelaArtistas.appendChild(tr); 86 | }); 87 | 88 | } 89 | 90 | function obterArtistaModal(){ 91 | return new Artista({ 92 | id: modal.idArtista.value, 93 | nome: modal.nomeArtista.value, 94 | tipo: modal.tipoArtista.options[modal.tipoArtista.selectedIndex].value 95 | }); 96 | } 97 | 98 | function adicionarArtistaAPI(artista){ 99 | 100 | artista.tipo = artista.tipo.toUpperCase(); 101 | 102 | fetch(`${URL_BASE}/api/artista`, { 103 | headers:{ 104 | "Content-Type": "application/json", 105 | "Authorization": obterToken() 106 | }, 107 | method: "POST", 108 | body: JSON.stringify(artista) 109 | }) 110 | .then(response => response.json()) 111 | .then(response => { 112 | //Recebe o artista cadastrado 113 | let artista = new Artista(response); 114 | 115 | //adiciona o artista na litsa, no array 116 | artistas.push(artista); 117 | 118 | //Manda atualizar a tabela. 119 | preencherTabela(artistas); 120 | 121 | fecharModal(); 122 | 123 | alert('Artista cadastrado com sucesso!'); 124 | }) 125 | .catch(error => { 126 | console.log(error) 127 | }) 128 | } 129 | 130 | function editarArtista(id){ 131 | alert(id); 132 | } 133 | 134 | function excluirArtista(id){ 135 | alert(id); 136 | } 137 | 138 | obterArtistasAPI(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula07/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 35 | 36 |
37 | 38 | 39 |
40 |
41 |

Controle de Artistas

42 |
43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 74 | 75 | 76 | 77 | 78 | 79 | 83 | 84 | 85 |
IdNomeTipo
1Legiao UrbanaBanda 71 | 72 | 73 |
2Michael JacksonSolo 80 | 81 | 82 |
86 |
87 |
88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula08/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 | 37 |
38 | 39 | 40 |
41 |
42 |

Controle de Artistas

43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 75 | 76 | 77 | 78 | 79 | 80 | 84 | 85 | 86 |
IdNomeTipo
1Legiao UrbanaBanda 72 | 73 | 74 |
2Michael JacksonSolo 81 | 82 | 83 |
87 |
88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /people-searcher/script.js: -------------------------------------------------------------------------------- 1 | var collaborators = [ 2 | { 3 | id: 1, 4 | name: 'Matheus Borges', 5 | jobtitle: 'Analista de Sistemas Sênior', 6 | pictureURL: 'https://avatars.githubusercontent.com/u/127253921?v=4' 7 | }, 8 | { 9 | id: 2, 10 | name: 'Adriana Rangel', 11 | jobtitle: 'Designer Master Plus', 12 | pictureURL: 'https://avatars.githubusercontent.com/u/105232781?v=4' 13 | }, 14 | { 15 | id: 3, 16 | name: 'Filipe Oliveira', 17 | jobtitle: 'Blackbelt', 18 | pictureURL: 'https://avatars.githubusercontent.com/u/125571407?v=4' 19 | }, 20 | { 21 | id: 4, 22 | name: 'Yan Rodrigues', 23 | jobtitle: 'Chief Executive Office', 24 | pictureURL: 'https://media.licdn.com/dms/image/D4D03AQHu7r-gXumwFw/profile-displayphoto-shrink_800_800/0/1680386054218?e=1688601600&v=beta&t=Xt6fnmbJ9q44lrrWXpWbQIeKXmftCF9nQpzHcwttc58' 25 | }, 26 | { 27 | id: 5, 28 | name: 'Luiz Cidade', 29 | jobtitle: 'Chief Operation Office', 30 | pictureURL: 'https://media.licdn.com/dms/image/C4D03AQFdqBoduagqdA/profile-displayphoto-shrink_200_200/0/1660261926494?e=1688601600&v=beta&t=A2YEC5nppaXwjuiVA0TYr01uMgBkTXCENjrGhUNUMhg' 31 | }, 32 | { 33 | id: 6, 34 | name: 'Juliana Boubée', 35 | jobtitle: 'Chief Technology Office', 36 | pictureURL: 'https://media.licdn.com/dms/image/D4D03AQHQRZCPQqYlXg/profile-displayphoto-shrink_800_800/0/1680130430561?e=1688601600&v=beta&t=Xq3eRRShuuyi33i0eWsTTV_XjqqwuLkkT6d_6tsrW5c' 37 | }, 38 | { 39 | id: 7, 40 | name: 'Roberta Stumpf', 41 | jobtitle: 'Programadora Sênior Master', 42 | pictureURL: 'https://avatars.githubusercontent.com/u/127352235?v=4' 43 | }, 44 | { 45 | id: 8, 46 | name: 'Cid Moreira', 47 | jobtitle: 'Apresentador', 48 | pictureURL: 'https://s2.glbimg.com/N7hX90ypsWaD2DDEWXsFZQKyVXM=/620x520/e.glbimg.com/og/ed/f/original/2022/07/26/1658361814352_1_AcdKppJ.jpg' 49 | } 50 | ] 51 | 52 | document.getElementById("sendBtn").addEventListener('click', (e) => { 53 | e.preventDefault(); 54 | searchUser(); 55 | }) 56 | 57 | document.getElementById("search").addEventListener('input', (e) => { 58 | if(e.target.value.length >= 3) { 59 | handleSuggestions(e.target.value); 60 | } else { 61 | closeSuggestions() 62 | } 63 | }) 64 | 65 | // Para filtrar a cada caracter digitado 66 | window.onload = () => { 67 | var htmlString = ""; 68 | 69 | collaborators.forEach(collaborator => { 70 | htmlString += `
71 | ${collaborator.name} 72 |
73 | ${collaborator.name} 74 | ${collaborator.jobtitle} 75 |
76 |
` 77 | }) 78 | 79 | document.getElementById("peopleContainer").innerHTML = htmlString 80 | } 81 | 82 | const handleSuggestions = (searchValue) => { 83 | const filteredCollaborators = collaborators.filter(collaborator => collaborator.name.toLowerCase().includes(searchValue.toLowerCase())); 84 | var htmlString = ""; 85 | filteredCollaborators.forEach(collaborator => { 86 | htmlString += `${collaborator.name}` 87 | }) 88 | 89 | document.getElementById("suggestions").innerHTML = htmlString; 90 | document.getElementById("suggestions").style.display = "flex"; 91 | } 92 | 93 | const selectCollaborator = (collaboratorName) => { 94 | document.getElementById("search").value = collaboratorName; 95 | searchUser(); 96 | closeSuggestions(); 97 | } 98 | 99 | const closeSuggestions = () => { 100 | document.getElementById("suggestions").style.display = "none"; 101 | } 102 | 103 | const searchUser = () => { 104 | const searchValue = document.getElementById("search").value; 105 | const filteredCollaborators = collaborators.filter(collaborator => collaborator.name.toLowerCase().includes(searchValue.toLowerCase())); 106 | var htmlString = ""; 107 | 108 | if(filteredCollaborators.length > 0) { 109 | filteredCollaborators.forEach(collaborator => { 110 | htmlString += `
111 | ${collaborator.name} 112 |
113 | ${collaborator.name} 114 | ${collaborator.jobtitle} 115 |
116 |
` 117 | }) 118 | } else { 119 | htmlString = "Nenhum colaborador encontrado... 😞" 120 | } 121 | 122 | document.getElementById("peopleContainer").innerHTML = htmlString 123 | document.getElementById("search").value = "" 124 | } -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/js/controle-artista.js: -------------------------------------------------------------------------------- 1 | let artistas = []; 2 | let tabelaArtistas = document.querySelector("#tabela-artistas tbody"); 3 | let btnAdicionar = document.getElementById("btn-adicionar"); 4 | let modoEdicao = false; 5 | 6 | let modal = { 7 | self: document.querySelector("#modal-artista"), 8 | titulo: document.querySelector("#titulo-modal"), 9 | idArtista: document.querySelector("#id"), 10 | nomeArtista: document.querySelector("#nome"), 11 | tipoArtista: document.querySelector("#tipo-artista"), 12 | btnSalvar: document.querySelector("#btn-salvar"), 13 | btnCancelar: document.querySelector("#btn-cancelar") 14 | }; 15 | 16 | btnAdicionar.addEventListener('click', (e) => { 17 | e.preventDefault(); // Parar qualquer ação que esteja acontecendo no navegador. 18 | modoEdicao = false; 19 | modal.titulo.textContent = "Adicionar artista"; 20 | abrirModal(); 21 | }) 22 | 23 | modal.btnCancelar.addEventListener('click', () => { 24 | fecharModal(); 25 | }); 26 | 27 | modal.btnSalvar.addEventListener('click', () => { 28 | let artista = obterArtistaModal(); 29 | 30 | if(modoEdicao){ 31 | editarArtistaAPI(artista); 32 | }else{ 33 | adicionarArtistaAPI(artista); 34 | } 35 | }); 36 | 37 | function abrirModal(){ 38 | $("#modal-artista").modal({backdrop: "static"}); 39 | } 40 | 41 | function fecharModal(){ 42 | $("#modal-artista").modal("hide"); 43 | } 44 | 45 | function obterArtistasAPI(){ 46 | 47 | fetch(`${URL_BASE}/api/artista`, { 48 | headers:{ 49 | "Content-Type": "application/json", 50 | "Authorization": obterToken() 51 | }, 52 | method: "GET" 53 | }) 54 | .then(response => response.json()) 55 | .then(response => { 56 | artistas = response.map(a => new Artista(a)); 57 | preencherTabela(artistas); 58 | }) 59 | .catch(error => { 60 | console.log(error) 61 | }) 62 | } 63 | 64 | function preencherTabela(artistas){ 65 | 66 | tabelaArtistas.textContent = ""; 67 | 68 | artistas.map(artista => { 69 | 70 | let tr = document.createElement("tr"); 71 | let tdId = document.createElement("td"); 72 | let tdNome = document.createElement("td"); 73 | let tdTipo = document.createElement("td"); 74 | let tdAcoes = document.createElement("td"); 75 | 76 | tdId.textContent = artista.id; 77 | tdNome.textContent = artista.nome; 78 | 79 | tdTipo.innerHTML = ` ${artista.tipo}`; 80 | 81 | tdAcoes.innerHTML = ` 82 | 83 | 84 | `; 85 | 86 | tdAcoes.classList.add("text-right"); 87 | 88 | tr.appendChild(tdId); 89 | tr.appendChild(tdNome); 90 | tr.appendChild(tdTipo); 91 | tr.appendChild(tdAcoes); 92 | 93 | tabelaArtistas.appendChild(tr); 94 | }); 95 | 96 | } 97 | 98 | function obterArtistaModal(){ 99 | return new Artista({ 100 | id: modal.idArtista.value, 101 | nome: modal.nomeArtista.value, 102 | tipo: modal.tipoArtista.options[modal.tipoArtista.selectedIndex].value 103 | }); 104 | } 105 | 106 | function adicionarArtistaAPI(artista){ 107 | 108 | artista.tipo = artista.tipo.toUpperCase(); 109 | 110 | fetch(`${URL_BASE}/api/artista`, { 111 | headers:{ 112 | "Content-Type": "application/json", 113 | "Authorization": obterToken() 114 | }, 115 | method: "POST", 116 | body: JSON.stringify(artista) 117 | }) 118 | .then(response => response.json()) 119 | .then(response => { 120 | //Recebe o artista cadastrado 121 | let artista = new Artista(response); 122 | 123 | //adiciona o artista na litsa, no array 124 | artistas.push(artista); 125 | 126 | //Manda atualizar a tabela. 127 | preencherTabela(artistas); 128 | 129 | fecharModal(); 130 | 131 | alert('Artista cadastrado com sucesso!'); 132 | }) 133 | .catch(error => { 134 | console.log(error) 135 | }) 136 | } 137 | 138 | function editarArtistaAPI(artista){ 139 | 140 | artista.tipo = artista.tipo.toUpperCase(); 141 | 142 | fetch(`${URL_BASE}/api/artista/${artista.id}`, { 143 | headers:{ 144 | "Content-Type": "application/json", 145 | "Authorization": obterToken() 146 | }, 147 | method: "PUT", 148 | body: JSON.stringify(artista) 149 | }) 150 | .then(response => response.json()) 151 | .then(response => { 152 | //Recebe o artista cadastrado 153 | let artista = new Artista(response); 154 | 155 | let posicaoArray = artistas.findIndex(a => a.id == artista.id); 156 | 157 | // Remove o artista antigo e coloca o novo no mesmo lugar. 158 | artistas.aplice(posicaoArray, 1, artista); 159 | 160 | //Manda atualizar a tabela. 161 | preencherTabela(artistas); 162 | 163 | fecharModal(); 164 | 165 | alert('Artista atualizado com sucesso!'); 166 | }) 167 | .catch(error => { 168 | console.log(error) 169 | }) 170 | } 171 | 172 | function atualizarModal(artista){ 173 | modal.idArtista.value = artista.id; 174 | modal.nomeArtista.value = artista.nome; 175 | //TODO: Verificar como atualizar o tipo do artista dentro do select. 176 | // modal.tipoArtista.value = artista.tipoArtista; 177 | } 178 | 179 | function editarArtista(id){ 180 | 181 | modoEdicao = true; 182 | modal.titulo.textContent = "Editar artista"; 183 | 184 | //Obter o artista pelo id de dentro da tabela 185 | let artista = artistas.find(a => a.id == id); 186 | 187 | //Atualizar o modal com os dados do artista que eu selecionei na tabela. 188 | atualizarModal(artista); 189 | 190 | abrirModal(); 191 | } 192 | 193 | function excluirArtista(id){ 194 | alert(id); 195 | } 196 | obterArtistasAPI(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula12/serratec-music/js/controle-artista.js: -------------------------------------------------------------------------------- 1 | let artistas = []; 2 | let tabelaArtistas = document.querySelector("#tabela-artistas tbody"); 3 | let btnAdicionar = document.getElementById("btn-adicionar"); 4 | let modoEdicao = false; 5 | 6 | let modal = { 7 | self: document.querySelector("#modal-artista"), 8 | titulo: document.querySelector("#titulo-modal"), 9 | idArtista: document.querySelector("#id"), 10 | nomeArtista: document.querySelector("#nome"), 11 | tipoArtista: document.querySelector("#tipo-artista"), 12 | btnSalvar: document.querySelector("#btn-salvar"), 13 | btnCancelar: document.querySelector("#btn-cancelar") 14 | }; 15 | 16 | btnAdicionar.addEventListener('click', (e) => { 17 | e.preventDefault(); // Parar qualquer ação que esteja acontecendo no navegador. 18 | modoEdicao = false; 19 | modal.titulo.textContent = "Adicionar artista"; 20 | abrirModal(); 21 | }) 22 | 23 | modal.btnCancelar.addEventListener('click', () => { 24 | fecharModal(); 25 | }); 26 | 27 | modal.btnSalvar.addEventListener('click', () => { 28 | let artista = obterArtistaModal(); 29 | 30 | if(modoEdicao){ 31 | editarArtistaAPI(artista); 32 | }else{ 33 | adicionarArtistaAPI(artista); 34 | } 35 | }); 36 | 37 | function abrirModal(){ 38 | $("#modal-artista").modal({backdrop: "static"}); 39 | } 40 | 41 | function fecharModal(){ 42 | $("#modal-artista").modal("hide"); 43 | } 44 | 45 | function obterArtistasAPI(){ 46 | 47 | fetch(`${URL_BASE}/api/artista`, { 48 | headers:{ 49 | "Content-Type": "application/json", 50 | "Authorization": obterToken() 51 | }, 52 | method: "GET" 53 | }) 54 | .then(response => response.json()) 55 | .then(response => { 56 | artistas = response.map(a => new Artista(a)); 57 | preencherTabela(artistas); 58 | }) 59 | .catch(error => { 60 | console.log(error) 61 | }) 62 | } 63 | 64 | function preencherTabela(artistas){ 65 | 66 | tabelaArtistas.textContent = ""; 67 | 68 | artistas.map(artista => { 69 | 70 | let tr = document.createElement("tr"); 71 | let tdId = document.createElement("td"); 72 | let tdNome = document.createElement("td"); 73 | let tdTipo = document.createElement("td"); 74 | let tdAcoes = document.createElement("td"); 75 | 76 | tdId.textContent = artista.id; 77 | tdNome.textContent = artista.nome; 78 | 79 | tdTipo.innerHTML = ` ${artista.tipo}`; 80 | 81 | tdAcoes.innerHTML = ` 82 | 83 | 84 | `; 85 | 86 | tdAcoes.classList.add("text-right"); 87 | 88 | tr.appendChild(tdId); 89 | tr.appendChild(tdNome); 90 | tr.appendChild(tdTipo); 91 | tr.appendChild(tdAcoes); 92 | 93 | tabelaArtistas.appendChild(tr); 94 | }); 95 | 96 | } 97 | 98 | function obterArtistaModal(){ 99 | return new Artista({ 100 | id: modal.idArtista.value, 101 | nome: modal.nomeArtista.value, 102 | tipo: modal.tipoArtista.options[modal.tipoArtista.selectedIndex].value 103 | }); 104 | } 105 | 106 | function adicionarArtistaAPI(artista){ 107 | 108 | artista.tipo = artista.tipo.toUpperCase(); 109 | 110 | fetch(`${URL_BASE}/api/artista`, { 111 | headers:{ 112 | "Content-Type": "application/json", 113 | "Authorization": obterToken() 114 | }, 115 | method: "POST", 116 | body: JSON.stringify(artista) 117 | }) 118 | .then(response => response.json()) 119 | .then(response => { 120 | //Recebe o artista cadastrado 121 | let artista = new Artista(response); 122 | 123 | //adiciona o artista na litsa, no array 124 | artistas.push(artista); 125 | 126 | //Manda atualizar a tabela. 127 | preencherTabela(artistas); 128 | 129 | fecharModal(); 130 | 131 | alert('Artista cadastrado com sucesso!'); 132 | }) 133 | .catch(error => { 134 | console.log(error) 135 | }) 136 | } 137 | 138 | function editarArtistaAPI(artista){ 139 | 140 | artista.tipo = artista.tipo.toUpperCase(); 141 | 142 | fetch(`${URL_BASE}/api/artista/${artista.id}`, { 143 | headers:{ 144 | "Content-Type": "application/json", 145 | "Authorization": obterToken() 146 | }, 147 | method: "PUT", 148 | body: JSON.stringify(artista) 149 | }) 150 | .then(response => { 151 | 152 | if(response.status == 403){ 153 | alert("Seu token expirou, efetue o login novamente."); 154 | sair() 155 | } 156 | 157 | return response.json(); 158 | }) 159 | .then(response => { 160 | //Recebe o artista cadastrado 161 | let artista = new Artista(response); 162 | 163 | let posicaoArray = artistas.findIndex(a => a.id == artista.id); 164 | 165 | // Remove o artista antigo e coloca o novo no mesmo lugar. 166 | artistas.splice(posicaoArray, 1, artista); 167 | 168 | //Manda atualizar a tabela. 169 | preencherTabela(artistas); 170 | 171 | fecharModal(); 172 | 173 | alert('Artista atualizado com sucesso!'); 174 | }) 175 | .catch(error => { 176 | console.log(error) 177 | }) 178 | } 179 | 180 | function atualizarModal(artista){ 181 | modal.idArtista.value = artista.id; 182 | modal.nomeArtista.value = artista.nome; 183 | modal.tipoArtista.value = artista.tipo; 184 | } 185 | 186 | function editarArtista(id){ 187 | 188 | modoEdicao = true; 189 | modal.titulo.textContent = "Editar artista"; 190 | 191 | //Obter o artista pelo id de dentro da tabela 192 | let artista = artistas.find(a => a.id == id); 193 | 194 | //Atualizar o modal com os dados do artista que eu selecionei na tabela. 195 | atualizarModal(artista); 196 | 197 | abrirModal(); 198 | } 199 | 200 | function excluirArtista(id){ 201 | alert(id); 202 | } 203 | obterArtistasAPI(); -------------------------------------------------------------------------------- /codigo-por-aulas/Aula09/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 12 | 13 | 14 | 15 | 16 | 17 | 43 | 44 |
45 | 46 |
47 |
48 |

Controle de Artistas

49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 87 | 88 | 89 | 90 | 91 | 92 | 100 | 101 | 102 |
IdNomeTipo
1Legiao UrbanaBanda 80 | 83 | 86 |
2Michael JacksonSolo 93 | 96 | 99 |
103 |
104 |
105 | 106 | 107 |
108 | 109 | 173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula10/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 12 | 13 | 14 | 15 | 16 | 17 | 43 | 44 |
45 | 46 |
47 |
48 |

Controle de Artistas

49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 87 | 88 | 89 | 90 | 91 | 92 | 100 | 101 | 102 |
IdNomeTipo
1Legiao UrbanaBanda 80 | 83 | 86 |
2Michael JacksonSolo 93 | 96 | 99 |
103 |
104 |
105 | 106 | 107 |
108 | 109 | 173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /codigo-por-aulas/Aula11/serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 12 | 13 | 14 | 15 | 16 | 17 | 43 | 44 |
45 | 46 |
47 |
48 |

Controle de Artistas

49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 87 | 88 | 89 | 90 | 91 | 92 | 100 | 101 | 102 |
IdNomeTipo
1Legiao UrbanaBanda 80 | 83 | 86 |
2Michael JacksonSolo 93 | 96 | 99 |
103 |
104 |
105 | 106 | 107 |
108 | 109 | 173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /serratec-music/artistas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Artistas | Serratec Music 8 | 12 | 13 | 14 | 15 | 16 | 17 | 43 | 44 |
45 | 46 |
47 |
48 |

Controle de Artistas

49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 87 | 88 | 89 | 90 | 91 | 92 | 100 | 101 | 102 |
IdNomeTipo
1Legiao UrbanaBanda 80 | 83 | 86 |
2Michael JacksonSolo 93 | 96 | 99 |
103 |
104 |
105 | 106 | 107 |
108 | 109 | 173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | --------------------------------------------------------------------------------