Strona główna Odkrywaj Pomoc
Zaloguj się
LenDoc
/
homework
Obserwuj 1
Polub 0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

first hw js

LenDoc 3 lat temu
commit
e4e104b80e
3 zmienionych plików z 188 dodań i 0 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 54 0
      01/index.html
  2. 56 0
      01/main.js
  3. 78 0
      01/style.css

+ 54 - 0
01/index.html
Wyświetl plik 

@@ -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
Wyświetl plik 

@@ -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
Wyświetl plik 

@@ -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;
 
+    }