Skip to content

Commit

Permalink
Merge pull request #2 from szymonpachucki/develop
Browse files Browse the repository at this point in the history
some fixes
  • Loading branch information
szymonpachucki authored Dec 28, 2023
2 parents 61e85ab + 9b5e600 commit 16a6ed8
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 51 deletions.
68 changes: 31 additions & 37 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3 class="header__nav-title">witch of mountain winds</h3>
class="burger__close"
src="./images/close.svg"
alt="menu"
onclick="toggleOpenClass()"
onclick="handleBurgerNav()"
>
</div>
<nav class="burger__nav">
Expand Down Expand Up @@ -245,15 +245,30 @@ <h2 class="contact__title">Contact us</h2>
<form class="contact__info-form" action="your-backend-url"
method="POST" target="myFrame">
<h3 class="contact__text">We will help you choose a product that suits you and answer your other questions</h3>
<input class="contact__info-form-element" type="text"
placeholder=" Name" name="name"
required>
<input class="contact__info-form-element" type="email"
placeholder=" Email" name="email"
required>
<textarea class="contact__info-form-message" placeholder=" Message"
name="message" rows="1"
required></textarea>
<input
class="contact__info-form-element"
type="text"
placeholder="Name"
name="name"
id="name"
required
>
<input
class="contact__info-form-element"
type="email"
placeholder="Email"
name="email"
id="email"
required
>
<textarea
class="contact__info-form-message"
placeholder="Message"
name="message"
rows="1"
id="message"
required
></textarea>
<button class="contact__info-button" type="submit">Send a message</button>
</form>
</div>
Expand Down Expand Up @@ -296,42 +311,21 @@ <h3 class="contact__text">We will help you choose a product that suits you and a
</footer>
<script type="text/javascript" src="scripts/main.js"></script>
<script>
function toggleOpenClass() {
const element = document.getElementById('menu');
const cartBox = document.getElementById('cartBox');

// Sprawdź, czy element istnieje
if (element && cartBox) {
// Sprawdź, czy element ma już klasę "open"
if (element.classList.contains('open')) {
// Jeśli ma, usuń ją
element.classList.remove('open');
console.error('remove');
// Przywróć widoczność logo i koszyka
document.querySelector('.logo').style.display = 'flex';
cartBox.style.display = 'block';
burger.style.display = 'none';
home.style.display = 'block';
} else {
// Jeśli nie ma, dodaj ją
element.classList.add('open');
console.error('add');
// Ukryj logo i koszyk
document.querySelector('.logo').style.display = 'none';
cartBox.style.display = 'none';
burger.style.display = 'block';
home.style.display = 'none';
}
} else {
console.error("Element 'menu' or 'cartBox' not found.");
}
const header = document.getElementById('home');
const burger = document.getElementById('burger');
function toggleOpenClass() {
header.style.display = 'none';
burger.style.display = 'block';
}
function handleBurgerNav() {
cartBox.style.display = 'block';
burger.style.display = 'none';
home.style.display = 'block';
document.querySelector('.logo').style.display = 'flex';
}

</script>
</body>
</html>
80 changes: 80 additions & 0 deletions src/scripts/main.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,82 @@
/* eslint-disable no-console */
'use strict';

document.addEventListener('DOMContentLoaded', function() {
const submitButton = document.querySelector('.contact__info-button');

function submitForm(event) {
event.preventDefault();

const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
const nameFrame = document.getElementById('name');
const emailFrame = document.getElementById('email');
const messageFrame = document.getElementById('message');
let valid = true;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {
// alert('It is not an e-mail!');
emailFrame.style.border = '1px solid red';
document.getElementById('email').value = '';
document.getElementById('email').placeholder = 'It is not an e-mail!';

setTimeout(() => {
emailFrame.style.border = '';
document.getElementById('email').placeholder = 'Email';
}, 3000);

valid = false;
}

if (name.length < 2 || name.length > 20) {
nameFrame.style.border = '1px solid red';
document.getElementById('name').value = '';
// eslint-disable-next-line max-len
document.getElementById('name').placeholder = 'Name must be between 2 and 20 letters';

setTimeout(() => {
nameFrame.style.border = '';
document.getElementById('name').placeholder = 'Name';
}, 3000);

valid = false;
}

if (message.length < 5 || message.length > 90) {
messageFrame.style.border = '1px solid red';
document.getElementById('message').value = '';
// eslint-disable-next-line max-len
document.getElementById('message').placeholder = 'Message must be between 5 and 90 letters';

setTimeout(() => {
messageFrame.style.border = '';
document.getElementById('message').placeholder = 'Message';
}, 3000);

valid = false;
}

if (valid) {
// alert('Data send successfully.');
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('message').value = '';
submitButton.style.backgroundColor = 'green';

setTimeout(() => {
submitButton.style.backgroundColor = '#333';
}, 3000);

return true;
}
submitButton.style.backgroundColor = 'red';

setTimeout(() => {
submitButton.style.backgroundColor = '#333';
}, 3000);
}

submitButton.addEventListener('click', submitForm);
});
12 changes: 8 additions & 4 deletions src/styles/aboutMe.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.aboutMe {
width: 280px;
width: 270px;
margin: 0 auto;
&__imgBox {
display: none;
Expand All @@ -21,12 +21,17 @@
&__button {
font-weight: 600;
font-size: 16px;
color: #f2f2f2; // Change here
color: #f2f2f2;
width: 100%;
height: 60px;
background-color: $c-gray;
margin-top: 25px;
margin-bottom: 100px;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
}

Expand All @@ -39,14 +44,13 @@
width: 342px;
margin-right: 30px;
}
// ... (remaining styles)
}
}

@media screen and (min-width: 1201px) {
.logo {
box-sizing: border-box;
border: solid 1px #344f10; // Change here
border: solid 1px #344f10;
border-radius: 40px;
height: 50px;
width: 50px;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/aboutUs.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.about-us {
width: 280px;
width: 270px;
margin: 0 auto 100px;

&__text {
Expand Down
1 change: 1 addition & 0 deletions src/styles/burger.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
width: 15px;
height: 15px;
margin: 10vw;
cursor: pointer;
}

&__nav {
Expand Down
9 changes: 8 additions & 1 deletion src/styles/contact.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.contact {
margin: 100px auto;
width: 280px;
width: 270px;
&__info-img {
display: none;
}
Expand All @@ -12,6 +12,11 @@
font-size: 16px;
line-height: 21px;
width: 100%;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
&__text {
font-weight: 400;
Expand All @@ -33,8 +38,10 @@
border-bottom: solid 1px $c-green;
color: $c-gray;
margin-bottom: 25px;
padding-left: 6px;
}
&__info-form-message {
padding-left: 6px;
width: 100%;
font-weight: 400;
line-height: 21px;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
padding-top: 30px;
padding-bottom: 40px;
&__content {
width: 280px;
width: 270px;
height: 100%;
margin: 0 auto;
}
Expand Down
9 changes: 7 additions & 2 deletions src/styles/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,19 @@
max-height: 100%;
max-width: 100%;
align-self: center;
display: block; /* Add this line */
display: block;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
&-imgBox {
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
display: flex; /* Add this line */
display: flex;
&-logo {
box-sizing: border-box;
border: solid 1px #344f10;
Expand Down
7 changes: 6 additions & 1 deletion src/styles/home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
width: 100vw;
}
&__content {
width: 280px;
width: 270px;
margin: 25px auto 100px;
&-button {
font-weight: 600;
Expand All @@ -13,6 +13,11 @@
width: 100%;
height: 60px;
background-color: $c-gray;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
&-text {
font-weight: 400;
Expand Down
5 changes: 4 additions & 1 deletion src/styles/powder.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,13 @@
@media screen and (min-width: 768px) and (max-width: 1200px) {

.powder {
width: 740px;
width: calc((100vw - 740px) / 2 + 740px);
margin: 0 auto;
margin-right: 0;
margin-bottom: 100px;
&__demo {
margin-left: calc(100vw - 740px);

display: flex;
&-ing {
width: 98px;
Expand Down
11 changes: 8 additions & 3 deletions src/styles/shop.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@
font-weight: 600;
font-size: 16px;
color: #f2f2f2;
width: 280px;
width: 270px;
height: 60px;
background-color: $c-gray;
margin: 0 auto;
margin-left: calc(50vw - 140px);
margin-left: calc(50vw - 135px);
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
&__productCard-text {
font-size: 18px;
Expand All @@ -28,7 +33,7 @@
display: none;
}
&__content {
width: 280px;
width: 270px;
margin: 0 auto;
}
&__title {
Expand Down

0 comments on commit 16a6ed8

Please sign in to comment.