首页 发现 帮助
注册 登录
serg1557733
/
HomeWorks
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

fix derictories

serg155alternate 2 年之前
父节点
e710f9dc03
当前提交
7dca808aa2
共有 7 个文件被更改，包括 301 次插入 和 0 次删除
分列视图 显示文件统计
  1. 27 0
      HW1/HWBLUE/index.html
  2. 37 0
      HW1/HWBLUE/script.js
  3. 63 0
      HW1/HWBLUE/style.css
  4. 47 0
      HW1/index.html
  5. 1 0
      HW1/readme.md
  6. 60 0
      HW1/script.js
  7. 66 0
      HW1/style.css

+ 27 - 0
HW1/HWBLUE/index.html
查看文件 

@@ -0,0 +1,27 @@
 
+<!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">
 
+    <title>Login</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <form action="#">
 
+             <h4>Внесите данные </h4>
 
+            <input required placeholder="логин" name="login" type="text" class="form__login">
 
+            <input required placeholder="пароль" name="password" type="text" class="form__password">
 
+            <button class="btn">Login</button>
 
+        </form>
 
+
 
+        <div class="modal">
 
+            <div data-close class="close">&times;</div>
 
+            <span class="modal__title"></span>
 
+        </div>
 
+    </div>
 
+    
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 37 - 0
HW1/HWBLUE/script.js
查看文件 

@@ -0,0 +1,37 @@
 
+let credentials = {
 
+    login: 'admin',
 
+    password: 'qwerty',
 
+};
 
+
 
+const btnLogin = document.querySelector('.btn'),
 
+    modal = document.querySelector('.modal'),
 
+    close = document.querySelector('.close'),
 
+    textMessageArea = document.querySelector('.modal__title');
 
+
 
+let inputLogin = document.querySelector('.form__login'),
 
+    inputPassword = document.querySelector('.form__password');
 
+
 
+/* inputPassword.addEventListener('change', () => {
 
+    inputPassword.value = inputPassword.value.replace(/[\s\S]/g, "*");
 
+}) */
 
+
 
+btnLogin.addEventListener('click', (e) => {
 
+    e.preventDefault();
 
+    if (inputLogin.value === credentials.login && inputPassword.value === credentials.password) {
 
+        modal.style.display = 'block';
 
+        modal.style.backgroundColor = 'green';
 
+        textMessageArea.innerText = 'Поздравляем - вы ввели верные данные';
 
+        inputLogin.value = '';
 
+        inputPassword.value = '';
 
+    } else {
 
+        modal.style.display = 'block';
 
+        modal.style.backgroundColor = 'red';
 
+        textMessageArea.innerText = 'Ошибка ввода пароля или логина. Попробуйте снова';
 
+        inputPassword.value = '';
 
+    }
 
+
 
+});
 
+
 
+close.addEventListener('click', () => {
 
+    modal.style.display = 'none';
 
+})

+ 63 - 0
HW1/HWBLUE/style.css
查看文件 

@@ -0,0 +1,63 @@
 
+*, html {
 
+    box-sizing: border-box;
 
+    margin: 0;
 
+    padding: 0;
 
+    font-family: 'Roboto', sans-serif;
 
+}
 
+html {
 
+    background-color:rgb(210, 248, 248);
 
+}
 
+.container {
 
+    max-width: 1200px;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+    
+}
 
+form {
 
+
 
+    width: 500px;
 
+    height: 300px;
 
+    margin:  0 auto;
 
+    
+}
 
+h4 {
 
+    margin-bottom: 20px;
 
+    text-align: center;
 
+}
 
+.btn {
 
+    width: 80px;
 
+}
 
+
 
+.modal { 
+         display: none;
 
+         position: fixed;
 
+         top: 50px;
 
+         left: 35%;
 
+         width: 550px;
 
+         margin: 0 auto;
 
+         padding: 40px;
 
+         border: 1px solid rgba(0,0,0,.2);
 
+         border-radius: 4px;
 
+         text-align: center;
 
+
 
+        }
 
+.close {
 
+         position: absolute;
 
+         top: 8px;
 
+         right: 14px;
 
+         font-size: 30px;
 
+         color: #000;
 
+         opacity: .5;
 
+         font-weight: 700;
 
+         border: none;
 
+         background-color: transparent;
 
+         cursor: pointer;
 
+     }
 
+.modal__title {
 
+         text-align: center;
 
+         font-size: 18px;
 
+         text-transform: uppercase;
 
+}
 
+
 
+
 
+

+ 47 - 0
HW1/index.html
查看文件 

@@ -0,0 +1,47 @@
 
+<!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">
 
+    <title>HW - Calculator</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div class="calc__wrapper">
 
+            <h3>Калькулятор расхода топлива</h3>
 
+            <div class="calc__item">
 
+                <span>Затрачено топлива</span>
 
+                <input type="number"  name="liters">
 
+                <label for="liters">литров</label>
 
+            </div>
 
+            <div class="calc__item">
 
+                <span class="way">Пройдено пути</span>
 
+                <input type="number"  name="km">
 
+                <label for="km">километров</label>
 
+            </div>
 
+            <div class="radio__wrapper">
 
+                <input type="radio" id="liter" name="choise">
 
+                <label for="liter">В литрах на 100км</label>
 
+                <input type="radio" id="uah" name="choise">
 
+                <label for="uah">В гривнах на 100км</label>
 
+                <div class="price__item">
 
+                    <span class="price">Цена топлива за литр</span>
 
+                    <input type="number" name="price" required>
 
+                    <label for="price">грн</label>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="outer"> </div>
 
+
 
+            <button class="btn"> Очистить </button>
 
+
 
+        </div>
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+
 
+</html>

+ 1 - 0
HW1/readme.md
查看文件 

@@ -0,0 +1 @@
 
+try to use http://fuelcalculator.serg15577330.fe.a-level.com.ua/

+ 60 - 0
HW1/script.js
查看文件 

@@ -0,0 +1,60 @@
 
+let fuel = document.querySelector('[name = "liters"]'),
 
+    way = document.querySelector('[name = "km"]'),
 
+    checkLiter = document.querySelector('#liter'),
 
+    checkUah = document.querySelector('#uah'),
 
+    priceInput = document.querySelector('.price__item'),
 
+    price = document.querySelector('[name = "price"]'),
 
+    reset = document.querySelector('.btn'),
 
+    outer = document.querySelector('.outer');
 
+
 
+
 
+function calcMyConsumption(fuelLiters, kmWay, pricePerLiter) {
 
+    if (fuelLiters && kmWay && pricePerLiter) {
 
+        pricePerLiter = price.value;
 
+        const result = (fuelLiters / kmWay) * 100 * pricePerLiter;
 
+        outer.textContent = `Ваш затраты на 100км пути ${result.toFixed(2)} грн`;
 
+        reset.style.display = 'block';
 
+
 
+    } else {
 
+        const result = (fuelLiters / kmWay) * 100;
 
+        outer.textContent = `Ваш расход на 100км пути ${result.toFixed(2)} литров`;
 
+        reset.style.display = 'block';
 
+
 
+    }
 
+}
 
+
 
+checkLiter.addEventListener('change', () => {
 
+    if (checkLiter.checked && fuel.value && way.value) {
 
+        priceInput.style.display = 'none';
 
+        calcMyConsumption(fuel.value, way.value);
 
+       
+    } else {
 
+        outer.textContent = `Заполните все формы`;
 
+
 
+    }
 
+})
 
+
 
+
 
+checkUah.addEventListener('change', () => {
 
+    if (checkUah.checked && fuel.value && way.value ) {
 
+        priceInput.style.display = 'block';
 
+        price.value = '';
 
+        outer.textContent = `Внесите цену`;
 
+        price.addEventListener('input', () => calcMyConsumption(fuel.value, way.value, price));
 
+    
+    } else {
 
+        outer.textContent = `Заполните данные формы`;
 
+
 
+    }
 
+})
 
+
 
+reset.addEventListener('click', () => {
 
+    fuel.value = ''; 
+    way.value = '';
 
+    price.value = '';
 
+    outer.textContent = '';
 
+    priceInput.style.display = 'none';
 
+    reset.style.display = 'none';
 
+
 
+
 
+})

+ 66 - 0
HW1/style.css
查看文件 

@@ -0,0 +1,66 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+}
 
+
 
+.calc__wrapper {
 
+    width: 540px;
 
+    height: 350px;
 
+    padding: 20px;
 
+    margin: 0 auto;
 
+    border: 2px solid grey;
 
+    background-color: ivory;
 
+    box-shadow: 12px 12px 2px 1px rgba(93, 93, 95, 0.2);
 
+    border-radius: 25px;
 
+    text-align: center;
 
+  
+}
 
+h3 {
 
+    margin-bottom: 20px;
 
+}
 
+
 
+input {
 
+    width: 60px;
 
+    margin-left: 10px;
 
+    padding: 2px;
 
+}
 
+
 
+.calc__item {
 
+    display: grid;
 
+    grid-template-columns: 1fr 90px 1fr;
 
+    align-items: baseline;
 
+    padding: 10px;
 
+    text-align: left;
 
+} 
+ .price__item{
 
+    display: none;
 
+    margin-top: 20px;
 
+}
 
+
 
+
 
+.outer {
 
+    margin-top: 20px;
 
+    margin-bottom: 10px;
 
+    font-size: 24px;
 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 
+    color: rgb(19, 16, 207);
 
+}
 
+
 
+.btn {
 
+    display: none;
 
+    margin: 0 auto;
 
+    padding: 5px;
 
+    border-radius: 10px;
 
+    background-color:linen;
 
+    color: rgb(92, 44, 44);
 
+    box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
 
+    align-self: end;
 
+}
 
+
 
+