New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project #1

Closed
wants to merge 7 commits into
from
View
@@ -0,0 +1,4 @@
# Created by .ignore support plugin (hsz.mobi)
/node_modules
/.idea
View
@@ -0,0 +1,26 @@
# -vanilla.js-form-validation
Here's a live preview: https://yewhral.github.io/-vanilla.js-form-validation/
Here's a screenshot: http://i.imgur.com/QWvi4Aq.jpg
This was one of a test projects that I got to do while looking for a job.
As nothing indicates what company gave me this task and they are changing recruitment tasks every time anyway - I am putting it here on GitHub.
I don't quite agree with a visual design or some html parts that I got to work with, but I'm posting it "as is".
This project allowed me to learn more about validating form on frontend side (obviously), but what especially interested me was how to properly validate an email adress.
I read some very rich discussions about that. What was fun about this project was that the form isn't submitted anywhere, but gets saved to a localstorage.
It was my first project where I tried testing my code, but as I was short on time I used some native javascript functions for that.
This project was supposed to work on every browser on every screen and that was very challenging, but rewarding as well!
Gulp.js was used here, it was the first time where I tried to applied so many different Gulp plugins at once. I still think I prefer Grunt.js, but Gulp isn't scary at all now.
If, for some reason, you want to create your own build version you should write in commandline:
- gulp dev (for developer version)
- gulp release (for version adapted to older browsers, for example by transcompiling ECMA6 with Babel, please launch this version)
if you are busy, or lazy and don't want to install gulp for that, fear not. I added both of those folders here on GitHub.
View
@@ -0,0 +1,265 @@
html {
min-height: 100%;
}
body {
min-height:100%;
background-repeat: no-repeat;
background-attachment: fixed;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(black),
color-stop(32%, black),
color-stop(62%, #ff7a00),
to(#ff7a00)
);
background:
linear-gradient(
black 0%,
black 32%,
#ff7a00 62%,
#ff7a00 100%
);
background-color:#ff7a00;
overflow:hidden;
margin: 15vh;
}
form {
text-align: center;
margin-top: 0;
}
input {
font-family: 'Myriad Pro', sans-serif;
}
h1 {
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
textarea {
resize: none;
}
.boundary {
height:100%;
}
.form_field {
background: -webkit-gradient(linear,left top, left bottom,from(#ffffff),color-stop(10%, #ffffff),to(#ffca99));
background: linear-gradient(#ffffff 0%,#ffffff 10%,#ffca99);
border:none;
border-radius: 2px;
margin:5px;
width:290px;
height:30px;
padding:6px 5px 6px 10px;
font-family: 'Myriad Pro', sans-serif;
font-size:15px;
color: #8c8c8c;
}
#mail_password{
margin-top:-2px;
}
.message_bubble {
-webkit-transition: opacity 300ms linear;
transition: opacity 300ms linear;
transition-delay: 3700ms;
-webkit-transition-delay: 3700ms;
text-align: center;
margin-top:5px;
border-radius: 3px;
width: 300px;
height:auto;
min-height:40px;
color: white;
border:none;
background-color: #1b3647;
}
.relative_holder {
position:relative;
width:0;
height:0;
}
.absolute_tooltip {
position:absolute;
width:320px;
height:40px;
background-color: #1b3647;
border-radius: 5px;
color: white;
display: none;
font-family: 'Myriad Pro', sans-serif;
font-size: 96%;
}
.absolute_tooltip:before {
content: "";
position: absolute;
top: 100%;
left: 20px;
width: 0;
border-top: 10px solid #1b3647;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
#main {
height:100%;
display: grid;
-ms-grid-rows: 180px 407px;
grid-template-rows: 180px 407px;
}
#form_holder {
color:#ff7a00;
}
#bubble_holder {
display: block;
position: absolute;
bottom: 20px;
right: 20px;
}
#wrapper {
display:block;
height:100%;
}
#space {
background-color: transparent;
}
#logo {
display:block;
max-width:308px;
max-height:77px;
width: auto;
height: auto;
margin: 0 auto;
}
#headline {
text-align: center;
color:#ffffff;
font-family: 'PT Sans', sans-serif;
}
#promo_text {
text-decoration: underline;
}
#last_ticket {
margin-bottom: 30px;
}
#last_field {
margin-bottom: 80px;
}
#final_block {
color:#ffffff;
font-family: 'Myriad Pro', sans-serif;
margin:0;
}
#vid {
border:none;
border-radius: 3px;
width: 90px;
height:40px;
padding:6px 5px 6px 10px;
font-family: 'Myriad Pro', sans-serif;
color: darkgrey;
font-size:15px;
}
#amount_box {
text-align: center;
margin-left:8px;
margin-right:8px;
border:none;
border-radius: 3px;
width: 40px;
height: 40px;
padding:6px 5px 6px 10px;
font-family: 'Myriad Pro', sans-serif;
font-size:15px;
color: darkgrey;
}
#submit_button {
border-radius: 3px;
width: 300px;
height:40px;
color: white;
border:none;
background-color: #1b3647;
margin-top:10px;
font-size:16px;
}
#text1_warning {
bottom: 55px;
}
#text2_warning {
bottom: 55px;
}
#vid_warning {
bottom: 38px;
}
@media all and (max-width: 958px) {
body {
overflow:auto;
margin:10vh;
}
#main {
height:100%;
-ms-grid-rows: 180px 407px;
grid-template-rows: 180px 407px;
}
#last_field {
margin-bottom: 10px;
}
#bubble_holder {
margin-left: 10%;
margin-right: 10%;
bottom: 60px;
}
}
@media all and (max-width: 750px) {
#text2_warning{
top:-1vh;
right:0;
}
#bubble_holder{
position:absolute;
bottom:20%;
}
}
@media all and (max-width: 500px) {
body {
margin: 2vh
}
#main {
-ms-grid-rows: 178px 470px;
grid-template-rows: 178px 470px;
}
}
View
Binary file not shown.
View
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grab your tickets today!</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<div id="wrapper">
<div id="chrome">
<div id="main">
<div id="headline">
<img src="img/logo.png">
<h1>WEEKEND PROMOTION</h1>
<span id="promo_text">PROMOTION ENDS:</span>
<span>20.03.2014, 12:00PM</span>
</div>
<div id="form_holder">
<form onsubmit="return validateForm()">
<div>
<input type="radio" name="ticket" value=""> 1 TICKET €109
<input type="radio" name="ticket" value="" id="last_ticket"> 5 TICKETS €495
</div>
<div>
<input type="text" value="first_name" name="first_name" class="form_field">
<input type="text" value="last_name" name="last_name" class="form_field">
</div>
<div>
<span class="relative_holder">
<span class="absolute_tooltip" id="text1_warning"> </span>
</span>
<textarea name="textarea_1" class="form_field" oninput="createWarning('textarea_1','text1_warning',10);">textarea_1</textarea>
<span class="relative_holder">
<span class="absolute_tooltip" id="text2_warning"></span>
</span>
<textarea name="textarea_2" class="form_field" oninput="createWarning('textarea_2','text2_warning',20);">textarea_2</textarea>
</div>
<div id="mail_password">
<input type="text" name="email" value="email" class="form_field" >
<input type="password" name="password" value="password" class="form_field" id="last_field" >
</div>
<div id="final_block">
<span class="relative_holder">
<span class="absolute_tooltip" id="vid_warning"> </span>
</span>
<input type="text" name="vid_number" value="vid_number" id="vid" oninput="createWarning('vid_number','vid_warning',5);">
<input type="text" name="tickets_count" value="1" id="amount_box"> x Number of tickets
</div>
<div>
<span class="relative_holder">
<span class="absolute_tooltip" id="success"> </span>
</span>
<input type="submit" value="REGISTER" id="submit_button">
</div>
</form>
</div>
</div>
<div id="bubble_holder"></div>
</div>
</div>
<!-- build:js -->
<script type="text/javascript" src="js/placeholders.js"></script>
<script type="text/javascript" src="js/warnings.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/tests.js"></script>
<!-- endbuild -->
</body>
</html>
Oops, something went wrong.