first commit

KaikMcpe12 · Jan 22, 2023 · 5e502d2 · 5e502d2
commit 5e502d2
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 0 deletions.
diff --git a/.github/preview.jpg b/.github/preview.jpg
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "PKief.material-icon-theme",
+    "rocketseat.theme-omni",
+    "ritwickdey.LiveServer"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,37 @@
+{
+  // editor
+  "editor.wordWrap": "on",
+  "editor.fontSize": 18,
+  "editor.lineHeight": 30,
+  "editor.tabSize": 2,
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.minimap.enabled": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "files.autoSave": "afterDelay",
+
+  // explorer
+  "explorer.compactFolders": false,
+
+  // workbench
+  "workbench.editor.enablePreview": false,
+  "workbench.iconTheme": "material-icon-theme",
+  "workbench.colorTheme": "Omni",
+
+  // prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
+  "prettier.singleQuote": false,
+  "prettier.tabWidth": 2,
+  "prettier.semi": false,
+
+  // terminal
+  "terminal.integrated.fontSize": 16,
+  "terminal.integrated.profiles.windows": {
+    "Git Bash": {
+      "source": "Git Bash"
+    }
+  },
+  "terminal.integrated.defaultProfile.windows": "Git Bash"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+<h1 align="center"> Habits </h1>
+
+<p align="center">
+NLW é um evento exclusivo e gratuito, promovido pela Rocketseat para ensino de tecnologias WEB. <br/>
+</p>
+
+<p align="center">
+  <a href="#-tecnologias">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-projeto">Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-layout">Layout</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#memo-licença">Licença</a>
+</p>
+
+<p align="center">
+  <img alt="License" src="https://img.shields.io/static/v1?label=license&message=MIT&color=49AA26&labelColor=000000">
+</p>
+
+<br>
+
+<p align="center">
+  <img alt="projeto Habits" src=".github/preview.jpg" width="100%">
+</p>
+
+## 🚀 Tecnologias
+
+Esse projeto foi desenvolvido com as seguintes tecnologias:
+
+- HTML e CSS
+- JavaScript
+- Git e Github
+- Figma
+
+## 💻 Projeto
+
+O Habits é um app para ajudar a rastrear os hábitos.
+
+- [Visite o projeto online](https://maykbrito.github.io/nlw-setup)
+
+## 🔖 Layout
+
+Você pode visualizar o layout do projeto através [DESSE LINK](https://www.figma.com/community/file/1195327109778210238). É necessário ter conta no [Figma](https://figma.com) para acessá-lo.
+
+## :memo: Licença
+
+Esse projeto está sob a licença MIT.
+
+---
+
+Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat)
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/plus.svg b/assets/plus.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Roboto+Mono:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+    <title>Habits</title>
+  </head>
+  <body>
+
+    <header>
+    	<img src="./assets/logo.svg" alt="Logo da Habit">
+    	<button>
+    		<img src="./assets/plus.svg" alt="Sinal de mais">
+    		<div>Registrar meu dia</div>
+    	</button>
+    </header>
+    <form id="form-habits">
+    	<div class="habits">
+    		<div class="habit" data-name="run">🏃</div>
+    		<div class="habit" data-name="water">💧</div>
+    		<div class="habit" data-name="food">🍎</div>
+    		<div class="habit" data-name="journal">📕</div>
+    		<div class="habit" data-name="takePills">💊</div>
+    		<div class="habit" data-name="study">📚</div>
+    		<div class="habit" data-name="gym">️💪</div>
+    	</div>
+    	<div class="days"></div>
+    </form>
+		<script src="https://cdn.jsdelivr.net/gh/maykbrito/libs/NLWSetup/source/NLWSetup.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,25 @@
+const form = document.querySelector("#form-habits")
+const nlwSetup = new NLWSetup(form)
+const button = document.querySelector("header button")
+
+button.addEventListener("click", add)
+form.addEventListener("change", save)
+
+function add(){
+	const today = new Date().toLocaleDateString("pt-br").slice(0,-5)
+	const dayExists = nlwSetup.dayExists(today)
+	if (dayExists){
+		alert("Dia já incluso ❎")
+		return
+	}
+	alert("Adicionado com sucesso ✅")
+	nlwSetup.addDay(today)
+}
+
+function save(){
+	localStorage.setItem("NLWSetup@habits",JSON.stringify(nlwSetup.data))
+}
+
+const data = JSON.parse(localStorage.getItem("NLWSetup@habits")) || {}
+nlwSetup.setData(data)
+nlwSetup.load()
diff --git a/style.css b/style.css
@@ -0,0 +1,99 @@
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body{
+	background: #09090a;
+	color: white;
+	height: 100vh;
+}
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 48px;
+  position: fixed;
+  width: 100%;
+  background-color: #09090a;
+}
+
+button {
+  padding: 16px 24px;
+  border-radius: 8px;
+  border: 1px solid #8b5cf6;
+  background-color: transparent;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: 'Inter';
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 125%;
+}
+
+#form-habits{
+	display: flex;
+	padding: 182px 48px 48px;
+	width: fit-content;
+}
+
+.habits{
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.habit{
+	width: 64px;
+  height: 64px;
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.days{
+	display: flex;
+	margin-left: 32px;
+	gap: 48px;
+}
+
+.day{
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.day div{
+	margin-bottom: 8px;
+  font-family: 'Roboto Mono';
+  font-size: 20px;
+  line-height: 125%;
+  color: #A1A1AA;
+  text-align: center;
+}
+
+input{
+	appearance: none;
+  -webkit-appearance: none;
+	width: 64px;
+	height: 64px;
+	border: 2px solid #27272A;
+	border-radius: 8px;
+	background: #18181B;
+}
+
+input:checked{
+	background: #8B5CF6;
+	border: 2px solid #A78BFA; 
+}
+
+@media (max-width: 570px){
+	button div{
+		display: none;
+	}
+}