Skip to content

Commit

Permalink
правки4
Browse files Browse the repository at this point in the history
  • Loading branch information
Maria0701 committed Jun 30, 2019
1 parent 92d6b96 commit 75a722b
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 112 deletions.
14 changes: 7 additions & 7 deletions catalog.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta charset="utf-8">
<title>Сливочное мороженое</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
</head>
<body>
Expand Down Expand Up @@ -38,8 +38,8 @@
<form action="search.html" method="get" name="form_search">
<p class="visually-hidden">Поиск по сайту</p>
<label>
<input type="search" name="search-results" required/>
<span>Что ищем?</span>
<input type="search" name="search-results" placeholder="Что ищем?" required/>
<span class="visually-hidden">Что ищем?</span>
</label>
</form>
</div>
Expand All @@ -50,12 +50,12 @@
<p class="visually-hidden">Вход в личный кабинет</p>
<form class="" name="form-entrance" action="index.html" method="post">
<label >
<input type="email" id="entrance-email" name="email" required />
<span>Электронная почта</span>
<input type="email" id="entrance-email" name="email" placeholder="Электронная почта" required />
<span class="visually-hidden">Электронная почта</span>
</label>
<label >
<input type="password" name="password" required/>
<span>Введите пароль</span>
<input type="password" name="password" placeholder="Введите пароль" required/>
<span class="visually-hidden">Введите пароль</span>
</label>
<input type="submit" class="btn btn-small" value="Войти">
<div class="modal-entrance-links">
Expand Down
162 changes: 116 additions & 46 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -531,66 +531,136 @@ img {
margin-bottom: 20px;
}

.modal-entrance span,
.modal-search span,
.modal-feedback span {
position: absolute;
left: 14px;
/*display: block;*/
font-size: 14px;
line-height: 24px;
.modal-feedback input::-webkit-input-placeholder {
color: #999999;
background-color: transparent;
letter-spacing: 1px;
}

.modal-entrance span,
.modal-feedback span {
top: 12px;
.modal-feedback input::-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-search span {
top: 9px;

/* Firefox 19+ */

.modal-feedback input:-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-entrance input[type="password"]:active,
.modal-entrance input[type="email"]:active,
.modal-search input[type="search"]:active,
.modal-feedback input[type="text"]:active,
.modal-feedback input[type="email"]:active,
.modal-feedback textarea:active,
.subscription-form input[type="email"]:active {
color: #323232;

/* Firefox 18- */

.modal-feedback input:-ms-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-entrance input[type="password"]:active~span,
.modal-entrance input[type="email"]:active~span,
.modal-search input[type="search"]:active~span,
.modal-feedback input[type="text"]:active~span,
.modal-feedback input[type="email"]:active~span,
.modal-feedback textarea:active~span,
.subscription-form input[type="email"]:active~span,
.modal-entrance input[type="password"]:focus~span,
.modal-entrance input[type="email"]:focus~span,
.modal-search input[type="search"]:focus~span,
.modal-feedback input[type="text"]:focus~span,
.modal-feedback input[type="email"]:focus~span,
.modal-feedback textarea:focus~span,
.subscription-form input[type="email"]:focus~span,
.modal-entrance input[type="password"]:valid~span,
.modal-entrance input[type="email"]:valid~span,
.modal-search input[type="search"]:valid~span,
.modal-feedback input[type="text"]:valid~span,
.modal-feedback input[type="email"]:valid~span,
/*.modal-feedback textarea:valid~span,*/
.subscription-form input[type="email"]:valid~span {
display: none;
.modal-feedback textarea::-webkit-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-feedback textarea::-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-feedback textarea:not(:empty)~span {
display: none;

/* Firefox 19+ */

.modal-feedback textarea:-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 18- */

.modal-feedback textarea:-ms-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-entrance input::-webkit-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-entrance input::-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 19+ */

.modal-entrance input:-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 18- */

.modal-entrance input:-ms-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-search input::-webkit-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-search input::-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 19+ */

.modal-search input:-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 18- */

.modal-search input:-ms-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.subscription-form input::-webkit-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.subscription-form input::-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 19+ */

.subscription-form input:-moz-placeholder {
color: #999999;
letter-spacing: 1px;
}


/* Firefox 18- */

.subscription-form input:-ms-input-placeholder {
color: #999999;
letter-spacing: 1px;
}

.modal-entrance input[type="password"]:hover,
.modal-entrance input[type="email"]:hover,
.modal-search input[type="search"]:hover,
Expand Down
2 changes: 1 addition & 1 deletion css/style.min.css

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta charset="utf-8">
<title>Магазин мороженного Glaccy</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
</head>
<body>
Expand Down Expand Up @@ -42,8 +42,8 @@
<form action="search.html" method="get" name="form_search">
<p class="visually-hidden">Поиск по сайту</p>
<label>
<input type="search" name="search-results" required/>
<span>Что ищем?</span>
<input type="search" name="search-results" placeholder="Что ищем?" required/>
<span class="visually-hidden">Что ищем?</span>
</label>
</form>
</div>
Expand All @@ -54,12 +54,12 @@
<p class="visually-hidden">Вход в личный кабинет</p>
<form class="" name="form-entrance" action="index.html" method="post">
<label >
<input type="email" id="entrance-email" name="email" required />
<span>Электронная почта</span>
<input type="email" id="entrance-email" name="email" placeholder="Электронная почта" required />
<span class="visually-hidden">Электронная почта</span>
</label>
<label >
<input type="password" name="password" required/>
<span>Введите пароль</span>
<input type="password" name="password" placeholder="Введите пароль" required/>
<span class="visually-hidden">Введите пароль</span>
</label>
<input type="submit" class="btn btn-small" value="Войти">
<div class="modal-entrance-links">
Expand Down Expand Up @@ -221,8 +221,8 @@ <h2>Новое в нашем блоге</h2>
<h2>Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой ненужной ерунды. Честно =) </h2>
<form class="" action="index.html" method="post">
<label class="subscription-form">
<input type="email" name="subscription-male" required>
<span>Электронная почта</span>
<input type="email" name="subscription-male" placeholder="Электронная почта" required>
<span class="visually-hidden">Электронная почта</span>
</label>
<button type="submit" class="btn btn-medium">Отправить</button>
</form>
Expand Down Expand Up @@ -313,21 +313,21 @@ <h2>Мы обязательно Вам ответим</h2>
<span class="close"></span>
<form method="post" name="form_feedback" class="feedback_form" action="send-phone.php">
<label >
<input type="text" name="user-name" id="feedback_name" value="" placeholder="" required />
<span>Как Вас зовут?</span>
<input type="text" name="user-name" id="feedback_name" value="" placeholder="Как Вас зовут?"/>
<span class="visually-hidden">Как Вас зовут?</span>
</label>
<label >
<input type="email" id="feedback_email" name="email" placeholder="" required />
<span>Ваша почта для ответа</span>
<input type="email" id="feedback_email" name="email" value="" placeholder="Ваша почта для ответа"/>
<span class="visually-hidden">Ваша почта для ответа</span>
</label>
<label>
<textarea name="message" rows="5" cols="30" id="feedback_message" placeholder="" required ></textarea>
<span>Напишите что-нибудь</span>
<textarea name="message" rows="5" cols="30" id="feedback_message" value="" placeholder="Напишите что-нибудь"></textarea>
<span class="visually-hidden">Напишите что-нибудь</span>
</label>
<button type="submit" class="btn btn-small">Отправить</button>
</form>
</section>
<div class="overlay"></div>
<script src="js/popup.js"></script>
<script src="js/popup.min.js"></script>
</body>
</html>
75 changes: 38 additions & 37 deletions js/popup.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,61 @@
var link = document.querySelector(".feedback-link");
var popup = document.querySelector(".modal-feedback");
var close = document.querySelector(".close");
var overlayClose= document.querySelector(".overlay");
var overlayClose = document.querySelector(".overlay");
var userName = popup.querySelector("[name=user-name]");
var userEmail = popup.querySelector("[name=email]");
var userMessage = popup.querySelector("[name=message]");
var form = popup.querySelector(".feedback_form");
var isStorageSupport = true;
var storage = "";


try {
storage = localStorage.getItem("userName")
storage = localStorage.getItem("userName")
} catch (err) {
isStorageSupport = false;
isStorageSupport = false;
}

link.addEventListener("click", function (evt) {
evt.preventDefault();
popup.classList.add("modal-show");
evt.preventDefault();
popup.classList.add("modal-show");

if (storage) {
userName.value=storage;
userEmail.focus();
} else {
userName.focus();
}
if (storage) {
userName.value = storage;
userEmail.focus();
} else {
userName.focus();
}
})
close.addEventListener("click", function (evt) {
evt.preventDefault();
popup.classList.remove("modal-show");
evt.preventDefault();
popup.classList.remove("modal-show");
});
overlayClose.addEventListener("click", function(evt) {
evt.preventDefault();
popup.classList.remove("modal-show");
popup.classList.remove("modal-error");
overlayClose.addEventListener("click", function (evt) {
evt.preventDefault();
popup.classList.remove("modal-show");
popup.classList.remove("modal-error");
})

form.addEventListener("submit", function (evt) {
if (!userName.value || !userEmail.value || !userMessage.value) {
evt.preventDefault();
popup.classList.remove("modal-error");
popup.offsetWidth = popup.offsetWidth;
popup.classList.add("modal-error");
} else {
if (isStorageSupport) {
localStorage.setItem("userName", userName.value );
}
}
})
if (!userName.value || !userEmail.value || !userMessage.value) {
evt.preventDefault();
popup.classList.remove("modal-error");
popup.offsetWidth = popup.offsetWidth;
popup.classList.add("modal-error");
} else {
if (isStorageSupport) {
localStorage.setItem("userName", userName.value);
}
}
})

window.addEventListener("keydown", function(evt) {
if (evt.keyCode === 27) {
if (popup.classList.contains("modal-show")) {
evt.preventDefault();
popup.classList.remove("modal-show");
popup.classList.remove("modal-error");
}
}
})
window.addEventListener("keydown", function (evt) {
if (evt.keyCode === 27) {
if (popup.classList.contains("modal-show")) {
evt.preventDefault();
popup.classList.remove("modal-show");
popup.classList.remove("modal-error");
}
}
})
Loading

0 comments on commit 75a722b

Please sign in to comment.