Skip to content

Commit bdf984b

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #16 from Hetu1107/master
35 - Decimal to Binar Project added#4
2 parents 6636cfa + 8cd337c commit bdf984b

File tree

7 files changed

+186
-0
lines changed

7 files changed

+186
-0
lines changed

‎30DaysOfJavaScript/assets/35.png

33.9 KB
Loading

‎35 - Decimal To Binary/assests/Binary icon.png

49 KB
Loading

‎35 - Decimal To Binary/font/sans.ttf

54.5 KB
Binary file not shown.

‎35 - Decimal To Binary/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="shortcut icon"
9+
href="assests/Binary icon.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Decimal To Binary</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h2>Decimal To Binary</h2>
18+
<div class="input">
19+
<h4>Decimal</h4>
20+
<input type="number" id="input_number" />
21+
</div>
22+
<button id="Binary_convert" onclick="calculate()">Convert</button>
23+
<div class="input">
24+
<h4>Binary</h4>
25+
<input type="number" id="output_number" />
26+
</div>
27+
</div>
28+
<footer>
29+
<p>
30+
&#x3c; &#47; &#x3e; with ❤️ by
31+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
32+
<br />
33+
<a
34+
href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
35+
target="_blank"
36+
>#30DaysOfJavaScript</a
37+
>
38+
</p>
39+
</footer>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
</html>

‎35 - Decimal To Binary/script.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
let input = document.getElementById('input_number');
2+
let output = document.getElementById('output_number');
3+
4+
5+
function calculate(){
6+
let number = input.value;
7+
if(isNaN(number) || number==""){
8+
alert("given value is not a number");
9+
output.value = "";
10+
}
11+
if(number==0){
12+
output.value = 0;
13+
}
14+
else{
15+
let response = "";
16+
while(number>0){
17+
response=number%2 + response;
18+
number=Math.floor(number/2);
19+
}
20+
output.value = response;
21+
}
22+
23+
}

‎35 - Decimal To Binary/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: "sans";
6+
}
7+
8+
@font-face {
9+
font-family: "sans";
10+
src: url(font/sans.ttf);
11+
}
12+
13+
body {
14+
background-color: #19172e;
15+
}
16+
17+
.container {
18+
width: 40%;
19+
height: 500px;
20+
margin: 3rem auto;
21+
text-align: center;
22+
background: rgba(255, 255, 255, 0.05);
23+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
24+
border-radius: 20px;
25+
backdrop-filter: blur(20px);
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: center;
29+
align-items: center;
30+
position: relative
31+
}
32+
.container h2{
33+
position: absolute;
34+
top: 10px;
35+
color: white;
36+
}
37+
.container .input{
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: flex-start;
41+
width: 100%;
42+
/* align-items: center; */
43+
height: fit-content;
44+
position: relative;
45+
}
46+
.container .input h4{
47+
text-align: left;
48+
color: rgba(255, 255, 255, 0.795);
49+
font-size: 16px;
50+
margin-bottom: 5px;
51+
font-weight: 400;
52+
margin-left: 3%;
53+
}
54+
.container .input input{
55+
width: 90%;
56+
height: 40px;
57+
outline: none;
58+
border: none;
59+
font-size: 20px;
60+
padding: 0 2%;
61+
margin-left: 3%;
62+
border-radius: 3px;
63+
}
64+
.container button{
65+
width: 100px;
66+
height: 35px;
67+
outline: none;
68+
border: none;
69+
margin: 20px 0;
70+
font-size: 18px;
71+
border-radius: 3px;
72+
background-color: white;
73+
cursor: pointer;
74+
transition: all 300ms ease;
75+
}
76+
.container button:hover{
77+
background-color: rgb(253, 207, 78);
78+
}
79+
.container button:active{
80+
background-color: #1e8e3e;
81+
}
82+
83+
84+
85+
86+
/* remove up and down arrow in input number */
87+
input[type="number"]::-webkit-inner-spin-button,
88+
input[type="number"]::-webkit-outer-spin-button {
89+
-webkit-appearance: none;
90+
margin: 0;
91+
}
92+
93+
footer {
94+
color: white;
95+
position: absolute;
96+
text-align: center;
97+
font-size: 1rem;
98+
left: 0;
99+
right: 0;
100+
bottom: 0;
101+
padding: 5px;
102+
line-height: 3vh;
103+
}
104+
105+
footer a:visited {
106+
color: inherit;
107+
}
108+
109+
110+
@media (max-width: 800px){
111+
.container{
112+
width: 80%;
113+
}
114+
}

‎index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,12 @@ <h4>Virtual Piano</h4>
244244
<img src="30DaysOfJavaScript/assets/34.png" alt="Virtual Piano">
245245
</a>
246246
</div>
247+
<div class="item">
248+
<a target="_blank" href="35 - Decimal To Binary/index.html">
249+
<h4>Decimal to Binary</h4>
250+
<img src="30DaysOfJavaScript/assets/35.png" alt="Virtual Piano">
251+
</a>
252+
</div>
247253
</div>
248254
<footer>
249255
<p>&#x3c; &#47; &#x3e; with ❤️ by

0 commit comments

Comments
 (0)