Most of this was taken from a YouTube video but their way of signing up wasn't what I need because I need it in a mysql database for the rest of the website. I thought it had to do with the node.js server and how I have to put the js and css in the html page document but I couldn't figure out how to change that either. This is my html document called login page.html:
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
});
});
// below is where i want to add the entered data into the database
document.getElementById("signUp").onclick = submitcrap;
function submitcrap() {
console.log("howdareyou")
const mysql = require('mysql2');
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
database: 'weapondatabase1',
password: '325177',
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
let startsql = "INSERT INTO weapondatabase1.useraccount (username, password, emailadress) VALUES ('";
var name = document.getElementById.value("signupUsername");
var password = document.getElementById.value("signupPassword");
var email = document.getElementById.value("signupEmail");
let inputsql = startsql.concat(name, "', '", password, "', '", email, "'");
pool.query(
inputsql,
function (err) {
if (err) {
console.log(err);
}
else {
console.log("all good bro");
}
console.log(inputsql);
}
);
}body {
--color-primary: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-error: #cc3333;
--color-success: #4bb544;
--border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background-color: chartreuse;
}
.container {
width: 800px;
max-width: 800px;
margin: 1rem;
padding: 2rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background: #ffffff;
}
.container,
.form__input,
.form__button {
font: 500 1rem 'Quicksand', sans-serif;
}
.form--hidden {
display: none;
}
.form > *:first-child {
margin-top: 0;
}
.form > *:last-child {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
}
.form__message {
text-align: center;
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
color: var(--color-error);
}
.form__input-group {
margin-bottom: 1rem;
}
.form__input {
display: block;
width: 100%;
padding: 0.75rem;
box-sizing: border-box;
border-radius: var(--border-radius);
border: 1px solid #dddddd;
outline: none;
background: #eeeeee;
transition: background 0.2s, border-color 0.2s;
}
.form__input:focus {
border-color: var(--color-primary);
background: #ffffff;
}
.form__input--error {
color: var(--color-error);
border-color: var(--color-error);
}
.form__input-error-message {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: #ffffff;
border: none;
border-radius: var(--border-radius);
outline: none;
cursor: pointer;
background: var(--color-primary);
}
.form__button:hover {
background: var(--color-primary-dark);
}
.form__button:active {
transform: scale(0.98);
}
.form__text {
text-align: center;
}
.form__link {
color: var(--color-secondary);
text-decoration: none;
cursor: pointer;
}
.form__link:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>errno</title>
<link rel="shortcut icon" href="/assets/favicon.ico">
</head>
<body>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<h3>welcome</h3>
<p>
hi my name is umar and i am here to introduce you to the world of information, information is an important thing especially in a game called Destiny 2.
Destiny 2 has a massive amount of weapons, most of which have a unique randomised pool of traits, 2 of which will end up on your weapon roll with each trait
having it's own description as to what it does. Now im not an encyclopedia or anything but thats alot of information when you consider the 1163 different weapons
in the game. This means the only way for Destiny 2 players to know what traits can roll on a specific weapon is to keep on getting it over and over again, which will
take alot of time just to find out whether a weapon is the right weapon for them. Well never fear for this very website is here, this website will allow you to search
for any weapon and then it will show you all of the random roll traits which can roll on the weapon, also it will tell you what the traits do. Also if you would like
to favourite any weapons or traits and be able to view them later we've got you covered. And thanks to our new rating feature weapons and traits can be rated in 1 to 5
stars and the top 3 of each will be displayed in the homepage
</p>
<p>you will have to login to be able to rate or favourite things however if you dont want to you can continue as guest</p>
<p>the username must be below 16 characters</p>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a href="#" class="form__link">Forgot your password?</a>
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" id ="signupEmail" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" id ="signupPassword" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button id="signUp" class="form__button" type="submit" onclick="submitcrap()">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
</body>
</html>
This is my server.js file:
'use strict';
var http = require('http');
var fs = require('fs');
var port = process.env.PORT || 1337;
function onRequest(request, response) {
response.writeHead(200, { 'Content-Type': 'text/html' });
fs.readFile('./login page.html', null, function (error, data) {
if (error) {
response.writeHead(404);
response.write('file not found');
}
else {
response.write(data)
}
response.end();
});
}
http.createServer(onRequest).listen(port)
