Tecnologias | Projeto | Layout | Licença
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML
- CSS
- JavaScript
- NodeJS
- EJS
- Express
- SQLite
O Rocket.Q é uma aplicação de interação através de perguntas, sendo possível criar uma sala para internautas anônimos fazerem perguntas e o criador da sala em posse de uma senha gerenciar essas perguntas e marcar como lidas.
Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- layout do site html
- Criar arquivo home.html
- Criar pasta/arquivos styles/home.css e global.css
- Criar pasta assets
- Baixar os SVG da página principal baixar
- Criar repositório Rocket.Q no github.
- git init
- git add .
- git commit -m "Aula 01" & git branch -M aula01 & git remote add origin git@github.com:mazera3/Rocket.Q.git & git push -u origin aula01
- Para atualizar: git add . & git commit -m "XXX" & git branch -M XXX & git push -u origin XXX
- Crial ball: CSS-Clip
< div class="ball top" >< /div >
- Nova página: creat-pass.html (copia de home.html)
- Novas páginas: room.html e room.css
- git add .
- git commit -m "Aula 02"
- git branch -M aula02
- git push -u origin aula02
- Criar modal.css
- Gerar texto aleatório: Lorem Ipsum
- Converter hexadecimal em rgb: peko-step
- git add .
- git commit -m "Aula 03"
- git branch -M aula03
- git push -u origin aula03
- mover os arquivos para uma pasta htmls
- Iniciar um projeto nodejs
-
Verificar a versão nodejs: node -v -> v16.13.2
-
Iniciar o projeto com npm: npm init -y
-
Instala njs Embedded JavaScript templates e express: npm i ejs express
-
Fechar o Live Server do vscode
-
Criar pasta src
- Criar aruivo src/server.js
-
Instalar env: npm install dotenv e criar arquivo .env
- Criar variavel PORT e usar em
process.env.PORT
- Criar script: "start": "node src/server.js" em package.json
- Rodar: npm start (ou npm rum start)
- Criar pasta/arquivo: views/index.ejs
- Criar arquivo src/route.js
- Criar pasta public e mover a pasta /styles e /assets para dentro, renomear /assets para /images.
- Instalar nodemon: npm i nodemon -D e alterar script: "start": "nodemon src/server.js"
- Iniciar: npm start ou node .
- mover arquivos .html para a pasta /src/views
- Criar pasta/arquivo public/scripts/modal.js e main.js
- Criar rotas no script
- Criar src/controllers/QuestionController.js e RoomController.js
- Instalar sqlite e sqlite3: npm i sqlite sqlit3
- Criar pasta src/db e db/config.js db/init.js
- Template string:
xxx
- Criar script initdb e rodar:
npm run initdb
- Criar função de números aleatórios:
- Math.floor(Math.random() * 10) --> Gera nº aleatórios de 0 a 9
- Criar variavel PORT e usar em
- Terminar RoomController.js e room.ejs
- Criar src/views/passincorrect.ejs
- git add .
- git commit -m "Aula 05"
- git branch -M aula05
- git push -u origin aula05
public/ ┣ images/ ┃ ┣ btn/ ┃ ┃ ┣ check.svg ┃ ┃ ┣ copy.svg ┃ ┃ ┣ enter-room.png ┃ ┃ ┣ enter-room.svg ┃ ┃ ┣ lock.svg ┃ ┃ ┣ trash.svg ┃ ┃ ┣ user.svg ┃ ┃ ┣ users-blue.svg ┃ ┃ ┗ users-white.svg ┃ ┣ avatar.svg ┃ ┣ favincon.ico ┃ ┣ favincon.png ┃ ┣ home-bg-img.svg ┃ ┣ logo.svg ┃ ┗ noquestions.svg ┣ scripts/ ┃ ┣ main.js ┃ ┗ modal.js ┣ styles/ ┃ ┣ global.css ┃ ┣ home.css ┃ ┣ modal.css ┃ ┗ room.css ┗ favicon.ico