Merge pull request #28 from Tudwall/feature/get-infos-forms

Feature/get infos forms

index.html

@@ -100,7 +100,9 @@
 		</main>
 
 		<footer>
-			<div class="lines"></div>
+			<div class="line yellow"></div>
+			<div class="line red"></div>
+			<div class="line blue"></div>
 		</footer>
 	</body>
 </html>

js/login.js

@@ -0,0 +1,15 @@
+const loginBtn = document.getElementById("login-btn");
+
+function getLoginInfos() {
+	const email = document.getElementById("email").value;
+	const password = document.getElementById("password").value;
+	const loginInfos = {
+		email: email,
+		password: password,
+	};
+	return loginInfos;
+}
+
+loginBtn.addEventListener("click", () => {
+	console.log(getLoginInfos());
+});

login.html

@@ -107,13 +107,16 @@
 						required
 						aria-required="true"
 					/>
-					<button type="submit"><a href="home.html">Connexion</a></button>
+					<button id="login-btn" type="submit">
+						<a href="#">Connexion</a>
+					</button>
 				</fieldset>
 			</form>
 		</main>
 
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/login.js"></script>
 	</body>
 </html>

style/_mixins.scss

@@ -93,3 +93,10 @@
 		padding-right: 0.2em;
 	}
 }
+
+@mixin line($color) {
+	height: 100px;
+	background-image: linear-gradient(to bottom, $color, $color 100%);
+	box-shadow: $box-shadow;
+	background-size: 100% 100px;
+}

style/style.scss

@@ -103,20 +103,17 @@ main {
 }
 
 /* Trouver moyen pour mettre les ombres sur chaque ligne, peut être en faisant un gradient par ligne et en les ombrant */
-.lines {
-	height: 100px;
-	background-image: linear-gradient(
-		to bottom,
-		$line-color-1,
-		$line-color-1 33%,
-		$line-color-2 33%,
-		$line-color-2 66%,
-		$line-color-3 66%,
-		$line-color-3 100%
-	);
-	background-size: 100% 100px;
+.yellow {
+	@include line($line-color-1);
 }
 
+.red {
+	@include line($line-color-2);
+}
+
+.blue {
+	@include line($line-color-3);
+}
 .header-wrapper {
 	display: flex;
 	align-items: center;