Home Explore Help
Sign In
pavelefimen95
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

commit

Pavel 7 years ago
parent
11243dc513
commit
c65dfac143
4 changed files with 162 additions and 33 deletions
Split View Show Diff Stats
  1. 99 30
      js12/index.html
  2. 0 1
      js12/js12.md
  3. 13 2
      js12/main.js
  4. 50 0
      js12/normalize.min.css

+ 99 - 30
js12/index.html
View File 

@@ -7,36 +7,115 @@
 
         <meta name="viewport" content="width=device-width">
 
         <title>eval</title>
 
         <link href="index.css" rel="stylesheet" type="text/css" />
 
-        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.3/papaparse.min.js"></script>
 
-        <script src="http://gitlab.a-level.com.ua/gitgod/nanobind/raw/master/static/nb.js"></script>
 
+        <link rel="stylesheet" href="normalize.min.css">
 
+        
 	<style>
 
 		input {
 
 			width: 100%;
 
 			height: 30px;
 
 			font-size: 20px;
 
+			border-radius: 20px;
 
+			border: 1px solid #ccc;
 
+			margin-bottom: 10px;
 
+		}
 
+		input[type="text"] {
 
+			/*color: #dbdbdb;*/
 
+			padding: 5px;
 
+			font-size: 15px;
 
+		}
 
+		input[type="button"] {
 
+			background-color: #5a5491;
 
 		}
 
 		body {
 
-			font-size: 40px;
 
+			font-size: 25px;
 
 			font-family: arial, sans-serif;
 
+			background-color: #6962A8;
 
+			margin: 0;
 
+			padding: 0;
 
+			color: #2d2d2d;
 
+		}
 
+		body * {
 
+			box-sizing: border-box;
 
+			outline: none;
 
+		}
 
+		#result img {
 
+			border-radius: 20px;
 
 		}
 
 		.container {
 
 			position: fixed;
 
-			width: 100%;
 
+			width: 60%;
 
 			background-color: #fff;
 
-			top: 0px;
 
+			bottom: 0px;
 
 			z-index: 10;
 
-			font-size: 20px;
 
+			font-size: 25px;
 
+			border-top-left-radius: 20px;
 
+			border-top-right-radius: 20px;
 
+			padding: 15px;
 
+		}
 
+
 
+		#result {
 
+			background-color: #DFE0E2;
 
+			padding: 15px;
 
+			margin-bottom: 175px;
 
+			border-radius: 15px;
 
+		}
 
+		#result div {
 
+			background-color: #F9F9F9;
 
+			border-radius: 20px;
 
+			margin-bottom: 20px;
 
+			padding: 10px;
 
+			width: 70%;
 
+		}
 
+		main {
 
+			width: 60%;
 
+			margin: 0 auto;
 
+			border-radius: 20px;
 
+		}
 
+		span {
 
+			color: #6962A8;
 
+		}
 
+		.draw img{
 
+			width: 20px;
 
+			height: 20px;
 
+			position: relative;
 
+			left: 5px;
 
+			bottom: 4px;
 
+		}
 
+		.canvas {
 
+			position: fixed;
 
+			visibility: hidden;
 
+			border-radius: 20px;
 
+			background-color: #fff;
 
 		}
 
 		
 	</style>
 
 </head>
 
 <body>
 
+<div class="canvas">
 
+		<canvas id='canvas' width=400 height=400></canvas> 
+        <!--<br/>-->
 
+        <!--<button id='+'>+</button>-->
 
+         <input type="button" value="undo" id="undo">
 
+         <input type="button" value="delete" id="delete">
 
+         <input type="button" value="Send Image" id="to-data-url">
 
+        <input type='color' id='color'>
 
 
-	<div class="container">
 
-		<label for="input1">nick:</label><br>
 
-		<input type="text" id="input1"><br>
 
-		<label for="input2">message:</label><br>
 
+        <select id='tool'>
 
+            <option value='circle'>Circle</option>
 
+            <option value='line' >Line</option>
 
+            <option value='rectangle' >Rectangle</option>
 
+        </select>
 
+        <label for="size">Size(px): </label>
 
+        <input type="number" id="size">
 
+        <script src="index.js"></script>
 
+	</div>
 
+	<main>
 
+		<div class="container">
 
+		<!-- <label for="input1">nick:</label><br> -->
 
+		<input type="text" id="input1" placeholder="Type a name..."><br>
 
+		<!-- <label for="input2">message:</label><br> -->
 
+		
+		<input type="text" id="input2" placeholder="Type a message..."><br>
 
 		<div id="emoji-block">
 
 			<div id="emoji-button" style="display: inline-block;">
 
 				<img src="https://cdn.iconscout.com/public/images/icon/free/png-512/emoji-sad-unhappy-3a93cdaae83e3bb7-512x512.png" alt="" 	width="30px" height="30px">
 
@@ -52,32 +131,22 @@
 
 				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/hunter.gif" alt="img">
 
 			</div>
 
 		</div>
 
-		<input type="text" id="input2"><br>
 
+		<div class="draw">
 
+			<img src="https://cdn.iconscout.com/public/images/icon/premium/png-512/canvas-drawing-painting-color-paint-31e01478fb2fcadd-512x512.png" alt="canvas">
 
+		</div>
 
 		<input type="button" id="button" value="send">
 
 		
 	</div>
 
 <!--//////////////////////////////////////////////////-->
 
-	<div class="canvas">
 
-		<canvas id='canvas' width=400 height=400></canvas> 
-        <!--<br/>-->
 
-        <!--<button id='+'>+</button>-->
 
-         <input type="button" value="undo" id="undo">
 
-         <input type="button" value="delete" id="delete">
 
-         <input type="button" value="Send Image" id="to-data-url">
 
-        <input type='color' id='color'>
 
-
 
-        <select id='tool'>
 
-            <option value='circle'>Circle</option>
 
-            <option value='line' >Line</option>
 
-            <option value='rectangle' >Rectangle</option>
 
-        </select>
 
-        <label for="size">Size(px): </label>
 
-        <input type="number" id="size">
 
-        <script src="index.js"></script>
 
-	</div>
 
+	
 	
 <!--//////////////////////////////////////////////////-->
 
 	<div id="result"></div>
 
+	</main>
 
+	
+	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.3/papaparse.min.js"></script>
 
+    <script src="http://gitlab.a-level.com.ua/gitgod/nanobind/raw/master/static/nb.js"></script>
 
 	<script src="main.js"></script>
 
 	<script src="emoji.js"></script>
 
 	<script src="canvas/index.js"></script>

+ 0 - 1
js12/js12.md
View File 

@@ -1 +0,0 @@
 
-http://homework.pavelefimen95.fe.a-level.com.ua/js12

+ 13 - 2
js12/main.js
View File 

@@ -3,6 +3,8 @@ var myObj = 0;
 
 var button = document.getElementById("button");
 
 var result = document.getElementById('result');
 
 var emoji = document.querySelectorAll(".emoji-item");
 
+var canvasIcon = document.querySelector(".draw img");
 
+var canvasBar = document.querySelector(".canvas");
 
 for (var i = 0; i < emoji.length; i++) {
 
 	emoji[i].onclick = function(){
 
 		var xmlhttp = new XMLHttpRequest();  
@@ -19,7 +21,16 @@ for (var i = 0; i < emoji.length; i++) {
 
 	}
 
 }
 
 
-
 
+var cansvasIsVisible = false;
 
+canvasIcon.onclick = function(){
 
+	if(!cansvasIsVisible){
 
+		canvasBar.style.visibility = "visible";
 
+	}
 
+	else{
 
+		canvasBar.style.visibility = "hidden";
 
+	}
 
+	
+}
 
 
 //
 
 button.onclick = function(){
 
@@ -89,7 +100,7 @@ setInterval(function(){
 
 
 					}
 
 					else{
 
-						result.innerHTML += obj[i].nick + ": "+ obj[i].message + '<br>';  
+						result.innerHTML += "<div><span>" + obj[i].nick + "</span><br> "+ obj[i].message + '</div>';  
 					}
 
 					 
 				}

+ 50 - 0
js12/normalize.min.css
View File 

@@ -0,0 +1,50 @@
 
+/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
 
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
 
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
 
+audio:not([controls]){display:none;height:0}
 
+[hidden]{display:none}
 
+html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
 
+html,button,input,select,textarea{font-family:sans-serif}
 
+body{margin:0}
 
+a:focus{outline:thin dotted}
 
+a:active,a:hover{outline:0}
 
+h1{font-size:2em;margin:.67em 0}
 
+h2{font-size:1.5em;margin:.83em 0}
 
+h3{font-size:1.17em;margin:1em 0}
 
+h4{font-size:1em;margin:1.33em 0}
 
+h5{font-size:.83em;margin:1.67em 0}
 
+h6{font-size:.75em;margin:2.33em 0}
 
+abbr[title]{border-bottom:1px dotted}
 
+b,strong{font-weight:bold}
 
+blockquote{margin:1em 40px}
 
+dfn{font-style:italic}
 
+mark{background:#ff0;color:#000}
 
+p,pre{margin:1em 0}
 
+code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
 
+pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
 
+q{quotes:none}
 
+q:before,q:after{content:'';content:none}
 
+small{font-size:80%}
 
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
 
+sup{top:-0.5em}
 
+sub{bottom:-0.25em}
 
+dl,menu,ol,ul{margin:1em 0}
 
+dd{margin:0 0 0 40px}
 
+menu,ol,ul{padding:0 0 0 40px}
 
+nav ul,nav ol{list-style:none;list-style-image:none}
 
+img{border:0;-ms-interpolation-mode:bicubic}
 
+svg:not(:root){overflow:hidden}
 
+figure{margin:0}
 
+form{margin:0}
 
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
 
+legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
 
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
 
+button,input{line-height:normal}
 
+button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
 
+button[disabled],input[disabled]{cursor:default}
 
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
 
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
 
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
 
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
 
+textarea{overflow:auto;vertical-align:top}
 
+table{border-collapse:collapse;border-spacing:0}