Skip to content

Commit 289a01a

Browse files
nandini7637nandini7637
authored
Merge pull request Dezenix#95 from Im-Abhi/main
Custom Input Field
2 parents efdafde + 7ecc148 commit 289a01a

File tree

5 files changed

+320
-0
lines changed

5 files changed

+320
-0
lines changed

‎Custom _Input_Fields/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Custom Input Field
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
![](./assets/preview.gif)

‎Custom _Input_Fields/assets/Preview.gif

261 KB
Loading

‎Custom _Input_Fields/code/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Custom Input Field</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body class="main">
13+
<div class='ctrl'>
14+
<div class='ctrl__button ctrl__button--decrement'>&ndash;</div>
15+
<div class='ctrl__counter'>
16+
<input class='ctrl__counter-input' maxlength='10' type='text' value='0'>
17+
<div class='ctrl__counter-num'>0</div>
18+
</div>
19+
<div class='ctrl__button ctrl__button--increment'>+</div>
20+
</div>
21+
<script src="index.js"></script>
22+
</body>
23+
24+
</html>

‎Custom _Input_Fields/code/index.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
(function () {
2+
'use strict';
3+
4+
function ctrls() {
5+
var _this = this;
6+
7+
this.counter = 0;
8+
this.els = {
9+
decrement: document.querySelector('.ctrl__button--decrement'),
10+
counter: {
11+
container: document.querySelector('.ctrl__counter'),
12+
num: document.querySelector('.ctrl__counter-num'),
13+
input: document.querySelector('.ctrl__counter-input')
14+
},
15+
increment: document.querySelector('.ctrl__button--increment')
16+
};
17+
18+
this.decrement = function () {
19+
var counter = _this.getCounter();
20+
var nextCounter = (_this.counter > 0) ? --counter : counter;
21+
_this.setCounter(nextCounter);
22+
};
23+
24+
this.increment = function () {
25+
var counter = _this.getCounter();
26+
var nextCounter = (counter < 9999999999) ? ++counter : counter;
27+
_this.setCounter(nextCounter);
28+
};
29+
30+
this.getCounter = function () {
31+
return _this.counter;
32+
};
33+
34+
this.setCounter = function (nextCounter) {
35+
_this.counter = nextCounter;
36+
};
37+
38+
this.debounce = function (callback) {
39+
setTimeout(callback, 100);
40+
};
41+
42+
this.render = function (hideClassName, visibleClassName) {
43+
_this.els.counter.num.classList.add(hideClassName);
44+
45+
setTimeout(function () {
46+
_this.els.counter.num.innerText = _this.getCounter();
47+
_this.els.counter.input.value = _this.getCounter();
48+
_this.els.counter.num.classList.add(visibleClassName);
49+
}, 100);
50+
51+
setTimeout(function () {
52+
_this.els.counter.num.classList.remove(hideClassName);
53+
_this.els.counter.num.classList.remove(visibleClassName);
54+
}, 1100);
55+
};
56+
57+
this.ready = function () {
58+
_this.els.decrement.addEventListener('click', function () {
59+
_this.debounce(function () {
60+
_this.decrement();
61+
_this.render('is-decrement-hide', 'is-decrement-visible');
62+
});
63+
});
64+
65+
_this.els.increment.addEventListener('click', function () {
66+
_this.debounce(function () {
67+
_this.increment();
68+
_this.render('is-increment-hide', 'is-increment-visible');
69+
});
70+
});
71+
72+
_this.els.counter.input.addEventListener('input', function (e) {
73+
var parseValue = parseInt(e.target.value);
74+
if (!isNaN(parseValue) && parseValue >= 0) {
75+
_this.setCounter(parseValue);
76+
_this.render();
77+
}
78+
});
79+
80+
_this.els.counter.input.addEventListener('focus', function (e) {
81+
_this.els.counter.container.classList.add('is-input');
82+
});
83+
84+
_this.els.counter.input.addEventListener('blur', function (e) {
85+
_this.els.counter.container.classList.remove('is-input');
86+
_this.render();
87+
});
88+
};
89+
};
90+
91+
// init
92+
var controls = new ctrls();
93+
document.addEventListener('DOMContentLoaded', controls.ready);
94+
})();

‎Custom _Input_Fields/code/style.css

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
* {
2+
-webkit-user-select: none;
3+
-moz-user-select: none;
4+
-ms-user-select: none;
5+
user-select: none;
6+
box-sizing: border-box;
7+
}
8+
9+
.main {
10+
height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
background-color: #EDF1F6;
15+
-webkit-appearance: none !important;
16+
-moz-appearance: none !important;
17+
appearance: none !important;
18+
-webkit-backface-visibility: hidden;
19+
backface-visibility: hidden;
20+
-webkit-font-smoothing: antialiased;
21+
-moz-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
-webkit-overflow-scrolling: touch;
24+
text-rendering: optimizelegibility;
25+
}
26+
27+
.ctrl {
28+
flex: 0 0 auto;
29+
display: flex;
30+
align-items: center;
31+
border-bottom: 1px solid #D5DCE6;
32+
background-color: #fff;
33+
border-radius: 5px;
34+
font-size: 30px;
35+
}
36+
37+
.ctrl__counter {
38+
position: relative;
39+
width: 200px;
40+
height: 100px;
41+
color: #333C48;
42+
text-align: center;
43+
overflow: hidden;
44+
}
45+
46+
.ctrl__counter.is-input .ctrl__counter-num {
47+
opacity: 0;
48+
transition: opacity 100ms ease-in;
49+
}
50+
51+
.ctrl__counter.is-input .ctrl__counter-input {
52+
opacity: 1;
53+
transition: opacity 100ms ease-in;
54+
}
55+
56+
.ctrl__counter-input {
57+
width: 100%;
58+
margin: 0;
59+
padding: 0;
60+
position: relative;
61+
z-index: 2;
62+
box-shadow: none;
63+
outline: none;
64+
border: none;
65+
color: #333C48;
66+
font-size: 30px;
67+
line-height: 100px;
68+
text-align: center;
69+
opacity: 0;
70+
transition: opacity 100ms ease-in;
71+
}
72+
73+
.ctrl__counter-num {
74+
position: absolute;
75+
z-index: 1;
76+
top: 0;
77+
left: 0;
78+
right: 0;
79+
bottom: 0;
80+
line-height: 100px;
81+
opacity: 1;
82+
transition: opacity 1000ms ease-in;
83+
}
84+
85+
.ctrl__counter-num.is-increment-hide {
86+
opacity: 0;
87+
transform: translateY(-50px);
88+
-webkit-animation: increment-prev 100ms ease-in;
89+
animation: increment-prev 100ms ease-in;
90+
}
91+
92+
.ctrl__counter-num.is-increment-visible {
93+
opacity: 1;
94+
transform: translateY(0);
95+
-webkit-animation: increment-next 100ms ease-out;
96+
animation: increment-next 100ms ease-out;
97+
}
98+
99+
.ctrl__counter-num.is-decrement-hide {
100+
opacity: 0;
101+
transform: translateY(50px);
102+
-webkit-animation: decrement-prev 100ms ease-in;
103+
animation: decrement-prev 100ms ease-in;
104+
}
105+
106+
.ctrl__counter-num.is-decrement-visible {
107+
opacity: 1;
108+
transform: translateY(0);
109+
-webkit-animation: decrement-next 100ms ease-out;
110+
animation: decrement-next 100ms ease-out;
111+
}
112+
113+
.ctrl__button {
114+
width: 100px;
115+
line-height: 100px;
116+
text-align: center;
117+
color: #fff;
118+
cursor: pointer;
119+
background-color: #8498a7;
120+
transition: background-color 100ms ease-in;
121+
}
122+
123+
.ctrl__button:hover {
124+
background-color: #90a2b0;
125+
transition: background-color 100ms ease-in;
126+
}
127+
128+
.ctrl__button:active {
129+
background-color: #778996;
130+
transition: background-color 100ms ease-in;
131+
}
132+
133+
.ctrl__button--decrement {
134+
border-radius: 5px 0 0 5px;
135+
}
136+
137+
.ctrl__button--increment {
138+
border-radius: 0 5px 5px 0;
139+
}
140+
141+
@-webkit-keyframes decrement-prev {
142+
from {
143+
opacity: 1;
144+
transform: translateY(0);
145+
}
146+
}
147+
148+
@keyframes decrement-prev {
149+
from {
150+
opacity: 1;
151+
transform: translateY(0);
152+
}
153+
}
154+
155+
@-webkit-keyframes decrement-next {
156+
from {
157+
opacity: 0;
158+
transform: translateY(-50px);
159+
}
160+
}
161+
162+
@keyframes decrement-next {
163+
from {
164+
opacity: 0;
165+
transform: translateY(-50px);
166+
}
167+
}
168+
169+
@-webkit-keyframes increment-prev {
170+
from {
171+
opacity: 1;
172+
transform: translateY(0);
173+
}
174+
}
175+
176+
@keyframes increment-prev {
177+
from {
178+
opacity: 1;
179+
transform: translateY(0);
180+
}
181+
}
182+
183+
@-webkit-keyframes increment-next {
184+
from {
185+
opacity: 0;
186+
transform: translateY(50px);
187+
}
188+
}
189+
190+
@keyframes increment-next {
191+
from {
192+
opacity: 0;
193+
transform: translateY(50px);
194+
}
195+
}

0 commit comments

Comments
 (0)