Browse Source

first hw js

LenDoc 2 years ago
commit
e4e104b80e
3 changed files with 188 additions and 0 deletions
  1. 54 0
      01/index.html
  2. 56 0
      01/main.js
  3. 78 0
      01/style.css

+ 54 - 0
01/index.html

@@ -0,0 +1,54 @@
+    <!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="stylesheet" href="style.css">
+        <title>Converter+Login/Password</title>
+    </head>
+    <body>
+        <div class="wrapper">
+    <p class="task"> 1. Calculate </p>
+    <div class="converter">
+        <h1> CONVERTER </h1>
+        <p> Enter the number to convert</p>
+        <p> &#36; </p>
+        <input id="input_dol" type="number" min="0" placeholder="&#36;" />
+        <button class="btn" onclick="moneyConverterUSD()"> Calculate </button>
+    <p class="left" > &#8372; <span id="output_grn1">    </span> </p>
+
+    <p> &#8364; </p>
+    <input id="input_evro" type="number" min="0" placeholder="&#8364;" />
+        <button class="btn" onclick="moneyConverterEUR()"> Calculate </button>
+    <p  class="left"> &#8372;<span id="output_grn2">  </span> </p>
+    
+    <p > Złoty </p>
+        <input id="input_zloty" type="number" min="0" placeholder="Złoty" />
+        <button class="btn" onclick="moneyConverterPLN()"> Calculate </button>
+    <p class="left">  &#8372; <span id="output_grn3"> </span> </span>
+
+    <p>  &#8383; </p>
+    <input id="input_bitcoin" type="number" min="0" placeholder="&#8383;" />
+    <button class="btn" onclick="moneyConverterBitcoin()"> Calculate </button>
+    <p class="left">  &#8372; <span id="output_grn4"> </span> </p>
+    </div>
+    
+    <p class="task"> 2. Check the login and password</p>
+    <div class="check"> 
+        <h1> CHECK </h1>
+        <p> Enter the login and password</p>
+        <form  id="form_input" >
+        <input id="login" type="text"  minlength="4" maxlength="15" required placeholder="login" />
+        <input id="password" type="password"   minlength="4"  required placeholder="password" />
+        </form>
+        <div class="wrapper">
+        <button  class="btn" form="form_input" type="submit"  >Data validation </button>
+        <button  class="btn" type="button "  onclick="check()"  > Check the login and password </button>
+     </div>
+    <div id="correct"> </div>
+    <div id="wrong"> </div>
+        </div>
+        <script src="main.js"></script>
+    </body>
+    </html>

+ 56 - 0
01/main.js

@@ -0,0 +1,56 @@
+    function moneyConverterUSD(){
+        usd=26.35;
+        number=document.getElementById("input_dol");
+        result=(number.value*usd).toFixed(2);
+        document.getElementById("output_grn1").innerHTML=result
+    }
+    function moneyConverterEUR(){
+        eur=30.52;
+        number=document.getElementById("input_evro");
+        result=(number.value*eur).toFixed(2);
+        document.getElementById("output_grn2").innerHTML=result;
+    }
+    function moneyConverterPLN(){
+        pln=6.64;
+        number=document.getElementById("input_zloty");
+        result=(number.value*6.64).toFixed(2);
+        document.getElementById("output_grn3").innerHTML=result;
+    }
+    function moneyConverterBitcoin(){
+        bitcoin=1645030.38;
+        number=document.getElementById("input_bitcoin");
+        result=(number.value*bitcoin).toFixed(2);
+        document.getElementById("output_grn4").innerHTML=result;
+    }
+
+    var credentials = {
+        login: 'admin',
+        password: 'qwerty',
+    };
+
+  let div= document.createElement('div');
+    function check() { 
+        const login= document.getElementById("login").value;
+        const password= document.getElementById("password").value;
+
+        if (login==credentials.login&&password==credentials.password)
+        {
+            div.innerHTML = "You entered correct login and password!";
+            document.querySelector('#correct').append(div);
+        }
+        else if( login==credentials.login){
+        
+            div.innerHTML = "You entered correct login, but wrong password!";
+            document.querySelector('#wrong').append(div);
+        }
+        else if( password==credentials.password){
+            div.innerHTML = "You entered correct password, but wrong login!";
+            document.querySelector('#wrong').append(div);
+        }
+        else{
+            div.innerHTML = "You entered wrong login and password!";
+            document.querySelector('#wrong').append(div);
+        }
+            
+        
+    }

+ 78 - 0
01/style.css

@@ -0,0 +1,78 @@
+    input,body,p,span,button{font-size: 20px;}
+    body{
+        padding:0 auto;
+        margin:0 auto;
+        font-style:oblique;
+        color:#4f757c;
+        background-color:#6797A1;
+    }
+    p{
+        padding:0 auto;
+        margin:0 auto;
+    }
+    .task{color:#F2F8EA}
+    input{
+        
+        border-color: rgb(177, 174, 170);
+        border-radius: 5px;
+        border-width: 3px;
+        margin: 10px;
+        padding:10px;
+    }
+    input:focus{
+        outline:none;
+        border-color:#4ae2ce;
+    }
+    .converter{
+        display:block;
+        width: 450px;
+        background-color:#FABFA1;
+        margin:0 auto;
+        padding: 30px;
+    }
+    .btn{ 
+        margin:10px;
+        padding: 5px;
+        border-radius: 5px;
+        border-width: 3px;
+        background-color:#ECEFA9;
+    }
+    .btn:hover{
+        background: rgb(69, 185, 127);
+    }
+    .btn:active{
+        background: rgb(90, 196, 143);
+        box-shadow: 0 5px rgba(83, 156, 120, 0.63) inset;
+        color:white;
+    }
+    .check{
+        margin:0 auto;
+        width: 300px;
+        height: 400px;
+        display:block;
+        background-color: #FABFA1;;
+        padding: 30px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .wrapper{
+        display:flex;
+    }
+    #correct{
+        margin-left:20px;
+        margin-top: 10px;
+        color:green;
+        font-weight: 600;
+    }
+    #wrong{
+        margin-left:20px;
+        color:red;
+        font-weight: 600;
+    }
+    span{
+    padding-left: 20px;
+    }
+    .left{
+        padding-left: 200px;
+    }