Merge pull request #16 from Hetu1107/master

35 - Decimal to Binar Project added#4
swapnilsparsh · Oct 1, 2021 · bdf984b · bdf984b
2 parents 6636cfa + 8cd337c
commit bdf984b
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 0 deletions.
diff --git a/30DaysOfJavaScript/assets/35.png b/30DaysOfJavaScript/assets/35.png
diff --git a/35 - Decimal To Binary/assests/Binary icon.png b/35 - Decimal To Binary/assests/Binary icon.png
diff --git a/35 - Decimal To Binary/font/sans.ttf b/35 - Decimal To Binary/font/sans.ttf
diff --git a/35 - Decimal To Binary/index.html b/35 - Decimal To Binary/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="assests/Binary icon.png"
+      type="image/x-icon"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Decimal To Binary</title>
+  </head>
+  <body>
+    <div class="container">
+      <h2>Decimal To Binary</h2>
+      <div class="input">
+        <h4>Decimal</h4>
+        <input type="number" id="input_number" />
+      </div>
+      <button id="Binary_convert" onclick="calculate()">Convert</button>
+      <div class="input">
+        <h4>Binary</h4>
+        <input type="number" id="output_number" />
+      </div>
+    </div>
+    <footer>
+      <p>
+        &#x3c; &#47; &#x3e; with ❤️ by
+        <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
+        <br />
+        <a
+          href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
+          target="_blank"
+          >#30DaysOfJavaScript</a
+        >
+      </p>
+    </footer>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/35 - Decimal To Binary/script.js b/35 - Decimal To Binary/script.js
@@ -0,0 +1,23 @@
+let input = document.getElementById('input_number');
+let output = document.getElementById('output_number');
+
+
+function calculate(){
+    let number = input.value;
+    if(isNaN(number) || number==""){
+        alert("given value is not a number");
+        output.value = "";
+    }
+    if(number==0){
+        output.value = 0;
+    }
+    else{
+        let response = "";
+        while(number>0){
+            response=number%2 + response;
+            number=Math.floor(number/2);
+        }
+        output.value = response;
+    }
+
+}
diff --git a/35 - Decimal To Binary/style.css b/35 - Decimal To Binary/style.css
@@ -0,0 +1,114 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "sans";
+}
+
+@font-face {
+  font-family: "sans";
+  src: url(font/sans.ttf);
+}
+
+body {
+  background-color: #19172e;
+}
+
+.container {
+  width: 40%;
+  height: 500px;
+  margin: 3rem auto;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  backdrop-filter: blur(20px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative
+}
+.container h2{
+    position: absolute;
+    top: 10px;
+    color: white;
+}
+.container .input{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+    /* align-items: center; */
+    height: fit-content;
+    position: relative;
+}
+.container .input h4{
+    text-align: left;
+    color: rgba(255, 255, 255, 0.795);
+    font-size: 16px;
+    margin-bottom: 5px;
+    font-weight: 400;
+    margin-left: 3%;
+}
+.container .input input{
+    width: 90%;
+    height: 40px;
+    outline: none;
+    border: none;
+    font-size: 20px;
+    padding: 0 2%;
+    margin-left: 3%;
+    border-radius: 3px;
+}
+.container button{
+    width: 100px;
+    height: 35px;
+    outline: none;
+    border: none;
+    margin: 20px 0;
+    font-size: 18px;
+    border-radius: 3px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 300ms ease;
+}
+.container button:hover{
+    background-color: rgb(253, 207, 78);
+}
+.container button:active{
+    background-color: #1e8e3e;
+}
+
+
+
+
+/* remove up and down arrow in input number */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+footer {
+  color: white;
+  position: absolute;
+  text-align: center;
+  font-size: 1rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 5px;
+  line-height: 3vh;
+}
+
+footer a:visited {
+  color: inherit;
+}
+
+
+@media (max-width: 800px){
+    .container{
+        width: 80%;
+    }
+}
diff --git a/index.html b/index.html
@@ -244,6 +244,12 @@ <h4>Virtual Piano</h4>
           <img src="30DaysOfJavaScript/assets/34.png" alt="Virtual Piano">
       </a>
     </div>
+    <div class="item">
+      <a target="_blank" href="35 - Decimal To Binary/index.html">
+        <h4>Decimal to Binary</h4>
+          <img src="30DaysOfJavaScript/assets/35.png" alt="Virtual Piano">
+      </a>
+    </div>
   </div>
   <footer>
     <p>&#x3c; &#47; &#x3e; with ❤️ by