Moim problemem jest wpisywanie danych rejestracji ( i operacji na nich np. sprawdzanie czy taki użytkownik jest zarejestrowany) do pliku .json . Tworze projekt sklepu i nie wiem jak sobie z tym poradzić. Problemem jest też koszyk, który nie działa, nie wiem jak go zrobić, tzn dodać te wszystkie parametry jak w sklepach ( dynamicznie dodawać i usuwać produkty ) i oczywiście w pliku .json. Z góry dziękuję za jakąkolwiek pomoc w próbie napisania kodu
PS. wiem, że dużo się opisałem ;)
Kod html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Niezwykły sklepik</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<nav class="navbar" id="log">
<div class="navbar-center">
<img src="img/logo.jpg" alt="store logo" />
<div class="cart-btn">
<span class="nav-icon">
<i class="fas fa-cart-plus"></i>
</span>
<div class="cart-items">0</div>
</div>
</div>
<div class="boxx" id="logi">
<!--action="index.html" method="post" -->
<input type="email" placeholder="Login" id="login">
<input type="password" placeholder="Hasło" id="haslo"><br>
<input type="button" value="Zaloguj" id="loguj">
<a href="rejestracja.html">
<input type="button" value="Zarejestruj"></a>
</div>
</nav>
<section class="products">
<div class="section-title">
<h2>Produkty</h2><br>
</div>
<div class="products-center">
<article class="product">
<div class="img-container">
<center><img src="img/titan.jpg" alt="product" class="product-img" /></center>
<button class="bag-btn" data-id="1">
<i class="fas fa-shopping-cart"></i>
Dodaj do koszyka
</button>
</div>
<h3>Titan RTX 24 GB GDDR6</h3>
<h4>12.350 zł</h4>
</article>
</div><br><br>
<!-- jeszcze pare produktów -->
</section>
<div class="cart-overlay">
<div class="cart">
<span class="close-cart"><i class="far fa-window-close"></i></span>
<h2>Koszyk</h2>
<div class="cart-content">
<!-- <div class="cart-item">
<img src="imag/titan.jpeg" alt="product" />
<div>
<h4>TITAN RTX 24 GB GDDR6</h4>
<h5>12.350 zł</h5>
<span class="remove-item">Usuń</span>
</div>
<div>
<i class="fas fa-chevron-up"></i>
<p class="item-amount">
1
</p>
<i class="fas fa-chevron-down"></i>
</div>
</div> -->
</div>
<div class="cart-footer">
<h3>Razem : <span class="cart-total">0</span> zł</h3>
<button class="clear-cart banner-btn">Wyczyść koszyk</button>
</div>
</div>
</div>
<script src="js/app.js">
</script>
</body>
</html>
Kod js:
var log = document.getElementById('loguj');
const logowanie = e => {
var login = document.getElementById('login').value;
var password = document.getElementById('haslo').value;
var user = {
login: login,
password: password
}
console.log(user);
var JSONuser = JSON.stringify(user);
console.log(JSONuser);
if ((login.length > 5) && password.length > 8) {
document.getElementById('logi').innerHTML = '';
document.getElementById('logi').innerHTML = login + '<br><br>'
var menu = document.getElementById('logi');
var backindex = document.createElement('div');
backindex.classList.add("boxx");
var wyloguj = document.createElement('button');
wyloguj.classList.add("boxx");
wyloguj.setAttribute('id', 'logout');
wyloguj.innerHTML = 'Wyloguj się';
menu.appendChild(wyloguj);
} else alert('Złe dane logowania');
wyloguj.addEventListener('click', function() {
location.reload();
})
var config = getJSON("db/config.json");
console.log(config);
loguj.addEventListener('click', logowanie)
const config = {
filepath: "db/config.json",
name: "Niezwykły sklep",
addres: "http://szkola.n-soft.pl/lfraczek/Sklep",
database: {
config: "db/config.json",
users: "db/users.json",
products: "db/products.json",
orders: "db/orders.json",
},
interface: {
defaultSort: "name",
defaultItems: 12,
defaultLang: "pl"
}
}
Strona rejestracji:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>Rejestracja</title>
<!-- <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/skeleton.css"> -->
</head>
<style>
.box {
width: 500px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #e0e0e0;
text-align: center;
}
.box h1 {
color: rgb(31, 2, 2);
text-transform: uppercase;
font-weight: 500;
}
.box input[type="email"],
.box input[type="text"],
.box input[type="date"],
.box input[type="text"],
.box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 1px auto;
text-align: center;
border: 2px solid #b5dd5a;
padding: 4px 10px;
width: 200px;
outline: none;
color: rgb(0, 0, 0);
border-radius: 24px;
transition: 0.25s;
}
.box input[type="email"]:focus,
.box input[type="text"]:focus,
.box input[type="date"]:focus,
.box input[type="password"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"],
.box input[type="button"] {
border: 0;
background: none;
display: block;
margin: 10px auto;
text-align: center;
border: 2px solid #b5dd5a;
padding: 2px 30px;
outline: none;
color: rgb(7, 0, 0);
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover,
.box input[type="button"]:hover {
background: #2ecc71;
}
</style>
<body>
<div>
<center>
<form class="box" action="index.html" method="post">
<h1>Rejestracja</h1>
<input type="text" name="" placeholder="Imie"><br><br>
<input type="text" name="" placeholder="Nazwisko"><br><br>
<input type="text" name="" placeholder="Adres zamieszkania"><br><br>
<input type="text" name="" placeholder="Kod pocztowy"><br><br>
<input type="email" name="" placeholder="Email"><br><br>
<input type="password" name="" placeholder="Hasło"><br><br>
<input type="password" name="" placeholder="Powtórz hasło"><br><br>
<input type="submit" value="Zarejestruj">
</form>
</center><br>
</div>
</body>
</html>
