Browse Source

add buttons

4 changed files with 142 additions and 32 deletions
  1. 30 0
      js/02/css/style.css
  2. 1 0
      js/02/debug.log
  3. 15 0
      js/02/index.html
  4. 96 32
      js/02/js/main.js

+ 30 - 0
js/02/css/style.css

@@ -0,0 +1,30 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    padding: 0;
+}
+.container {
+    width: 50%;
+    height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+button {
+    width: 250px;
+    height: 100px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 30px;
+}
+.blue-belt {
+    width: 100%;
+    height: 150px;
+    color: blue;
+    font-size: 60px;
+    font-weight: bold;
+}

+ 1 - 0
js/02/debug.log

@@ -0,0 +1 @@
+[1109/112727.997:ERROR:directory_reader_win.cc(43)] FindFirstFile: Ñèñòåìå íå óäàåòñÿ íàéòè óêàçàííûé ïóòü. (0x3)

+ 15 - 0
js/02/index.html

@@ -3,9 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
     <title>Document</title>
 </head>
 <body>
+    <main class="main">
+        <div class="container">
+            <button class="how-old-are-you">HowOldAreYou</button>
+            <button class="temperature">Temperature</button>
+            <button class="number-divide">Number: divide</button>
+            <button class="number-odd">Number: odd</button>
+            <button class="string-greeting">String: greeting</button>
+            <button class="string-lexics">String: lexics</button>
+            <button class="confirm">confirm</button>
+            <button class="boolean">Boolean</button>
+            <button class="boolean-if">Boolean: if</button>
+            <button class="blue-belt">BLUE BELT</button>
+        </div>
+    </main>
     <script src="js/main.js"></script>
 </body>
 </html>

+ 96 - 32
js/02/js/main.js

@@ -1,69 +1,123 @@
 //                  Год рождения                //
 
-//let years = prompt('How old are you ?')
-//alert('You were born in ' + (2020 - years))
+function old() {
+let years = prompt('How old are you ?')
+alert('You were born in ' + (2020 - years))
+}
+let whenBorn = document.querySelector('.how-old-are-you')
+whenBorn.onclick = function() {
+    old();
+}
 
 // =============================================//
 //                  Температура                 //
 
-//let degree = prompt('what is your temperature ?')
-//alert('Your temperature is ' + (degree * (9/5) + 32) + ' Fahrenheit');
+function temp(){
+let degree = prompt('what is your temperature ?')
+alert('Your temperature is ' + (degree * (9/5) + 32) + ' Fahrenheit');
+}
+let tempShow = document.querySelector('.temperature')
+tempShow.onclick = function() {
+    temp();
+}
 
 //==============================================//
 //                  Number: divide              //
 
-//let firstNumber = prompt('Write some number');
-//let secondNumber = prompt('Write some number');
-//alert(Math.floor(firstNumber/secondNumber));
+function numberDivide() {
+let firstNumber = prompt('Write some number');
+let secondNumber = prompt('Write some number');
+alert(Math.floor(firstNumber/secondNumber));
+}
+let divideShow = document.querySelector('.number-divide')
+divideShow.onclick = function() {
+    numberDivide();
+}
 
 //==============================================//
 //                  Number: odd                 //
 
-// let number = prompt('Write a number');
-// if(+number) {
-//    alert('good job');
-// } else {
-//    alert('Print an even number or not even');
-//    number;
-// }
+function numberOdd() {
+let number = prompt('Write a number');
+if(+number) {
+   alert('good job');
+} else {
+   alert('Print an even number or not even');
+   number;
+}
+}
+let oddShow = document.querySelector('.number-odd')
+oddShow.onclick = function() {
+    numberOdd();
+}
 
 //==============================================//               
 //                  String: greeting            //
 
-// let name = prompt('What is your name ?');
-// alert('Hello ' + name);
+function stringGreeting() {
+let name = prompt('What is your name ?');
+alert('Hello ' + name);
+}
+let greetingShow = document.querySelector('.string-greeting')
+greetingShow.onclick = function() {
+    stringGreeting();
+}
 
 //==============================================//
 //                  String: lexics              //
 
-// let text = prompt('Write some text here');
-// if(text.includes('fuck')) {
-//     alert("Don't use curse words, you fucking asshole");
-// } else {
-//     alert("It's fine, bro");
-// }
+function stringLexic() {
+let text = prompt('Write some text here');
+if(text.includes('fuck')) {
+    alert("Don't use curse words, you fucking asshole");
+} else {
+    alert("It's fine, bro");
+}
+}
+let lexicShow = document.querySelector('.string-lexics')
+lexicShow.onclick = function() {
+    stringLexic();
+}
 
 //==============================================//
 //                  confirm                     //
 
-// let idiot = confirm('Are you idiot ?')
-// alert(idiot);
+function confirmA() {
+let idiot = confirm('Are you idiot ?')
+alert(idiot);
+}
+let confirmShow = document.querySelector('.confirm')
+confirmShow.onclick = function() {
+    confirmA();
+}
 
 //==============================================//
 //                  Boolean                     //
 
-// let children = confirm('Do you have children ?')
-// let childrenNumber = children;
+function booleanA() {
+let children = confirm('Do you have children ?')
+let childrenNumber = children;
+}
+let booleanAShow = document.querySelector('.boolean')
+booleanAShow.onclick = function() {
+    booleanA();
+}
 
 //==============================================//
 //                  Boolean: if                 //
 
-// let penis = confirm('Do you have a penis ?')
-// if(penis == true) {
-//     alert('Congratulations, you are the man ! ! ! ! !')
-// } else {
-//     alert('Feel sorry for you, you are the girl')
-// }
+function booleanIf() {
+let penis = confirm('Do you have a penis ?')
+if(penis == true) {
+    alert('Congratulations, you are the man ! ! ! ! !')
+} else {
+    alert('Feel sorry for you, you are the girl')
+}
+}
+let booleanIfShow = document.querySelector('.boolean-if')
+booleanIfShow.onclick = function() {
+    booleanIf();
+}
 
 //==============================================//
 //                  Array: real                 //
@@ -75,6 +129,7 @@
 
 //                  СНИНИЙ ПОЯС                 //
 
+function blueBeltPog() {
 let apps = 144;
 let entry = 4;
 let floor = 9;
@@ -83,6 +138,15 @@ let a = apps / (entry * floor); // квартир на этаже
 let ab = apps / entry; // в одном подъезде квартир
 let cb = Math.trunc(1 + (k - 1) / ab); // Номер подъезда
 let cd = Math.trunc(1 + ((k - 1) % ab) / a); // Номер этажа
+if(k > 144) {
+    alert('Нет такой квриты')
+} else {
 alert('Подъезд: ' + cb + ' Этаж; ' + cd);
+}
+}
+let blueBeltPogShow = document.querySelector('.blue-belt')
+blueBeltPogShow.onclick = function() {
+    blueBeltPog();
+}
 
 //==============================================//