Accueil Explorer Aide
S'inscrire Connexion
Hryhorii
/
hw-js-06
Suivre 1
Voter 0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

done fucking sheetgit add .! listeners changes did not work properly ,hate thish rubish

unknown il y a 2 ans
Parent
38245db966
commit
958127e030
9 fichiers modifiés avec 53 ajouts et 289 suppressions
Vue séparée Afficher les stats Diff
  1. 0 3
      README.md
  2. 0 41
      html-css/css/styles.css
  3. 20 14
      html-css/index.html
  4. 0 77
      javascript/homework.js
  5. 0 95
      javascript/homework.ts
  6. 0 21
      tsconfig.json
  7. 11 14
      websockets/index.js
  8. 18 24
      websockets/package.json
  9. 4 0
      websockets/public/chat.js

+ 0 - 3
README.md
Voir le fichier 

@@ -1,3 +0,0 @@
 
-// to start , create example.ts in directory javascript after that open powershell
 
-// in directory javascript and write down command "tsc example.ts"
 
-// to control changes use command tsc "example.ts -w"

+ 0 - 41
html-css/css/styles.css
Voir le fichier 

@@ -1,41 +0,0 @@
 
-table {
 
-    padding: 10px;
 
-    background-color: rgb(201, 199, 199);
 
-}
 
-
 
-td {
 
-    width: 20px;
 
-    text-align: center;
 
-    background-color: grey;
 
-}
 
-
 
-.calc{
 
-    width: 100%;
 
-    display: flex;
 
-    justify-content: center;
 
-    flex-wrap: wrap;
 
-    padding: 30px 0;
 
-}
 
-.input {
 
-    width: 120px;
 
-    margin-right: 5px;
 
-    border: solid 2px black;
 
-    border-radius:5px ;
 
-}
 
-.input::placeholder{
 
-    font-size: 10px;
 
-}
 
-button{
 
-    width: 40px;
 
-    background-color: rgb(236, 232, 235);
 
-    border: solid 2px black;
 
-    border-radius:5px ;
 
-}
 
-
 
-p {
 
-    display: block;
 
-    width: 100%;
 
-    text-align: center;
 
-    color: rgb(177, 177, 174);
 
-
 
-}

+ 20 - 14
html-css/index.html
Voir le fichier 

@@ -3,21 +3,27 @@
 
 	<head>
 
 		<meta charset="UTF-8" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-		<link href="../html-css/css/styles.css" rel="stylesheet" />
 
-		<title>Document-js</title>
 
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+		<title>Homework</title>
 
+		<link rel="stylesheet" href="./css/style.css" />
 
 	</head>
 
 	<body>
 
-		<input
 
-			class="input"
 
-			id="input"
 
-			placeholder="Write number into calc"
 
-			name="calc"
 
-		/>
 
-		<!-- <div class="calc">
 
-			 <input id="input" placeholder="Write number into calc" /> 
-			 <button id = "calc" >Calc</button> 
-			 <p>Result</p> 
-		</div>  -->
 
+		<div class="calc">
 
+			<input
 
+				id="first"
 
+				type="number"
 
+				class="input"
 
+				placeholder="Write number into calc"
 
+			/>
 
+			<input
 
+				id="second"
 
+				type="number"
 
+				class="input"
 
+				placeholder="Write number into calc"
 
+			/>
 
+			<button type="button" id="submitCalc">Calc</button>
 
+		</div>
 
+		<p id="result"></p>
 
 	</body>
 
-	<script src="../javascript/homework.js" type="module"></script>
 
+	<script src="../javascript/hw.js" type="module"></script>
 
 </html>

+ 0 - 77
javascript/homework.js
Voir le fichier 

@@ -1,77 +0,0 @@
 
-"use strict";
 
-//DOM: ДЗ
 
-//Таблица умножения
 
-//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
 
-//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
 
-// const table = document.createElement('table')
 
-// for (let i = 0; i < 10; i++){
 
-// 	const tr = document.createElement('tr')
 
-// 	for (let j = 1; j < 11; j++){
 
-// 		const td = document.createElement('td')
 
-// 			td.id = String(i) + String(j)
 
-// 			td.dataset.col = String(i)
 
-// 		if (j === 10) {
 
-// 			td.textContent = String(i)
 
-// 			tr.prepend(td)
 
-// 			continue
 
-// 		}
 
-// 		td.textContent = String((i === 0 ? 1 : i) * j)
 
-// 		tr.append(td)
 
-// 	}
 
-// 	table.append(tr)
 
-// }
 
-// document.body.append(table)
 
-//Подсветить ячейку
 
-//над которой находится курсор мыши. Используйте события mouseover и mouseout, 
-//и style.backgroundColor для подсветки.
 
-//Читкоды:
 
-//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
-//Внимание: :hover это читерство :-
 
-// let tdId;
 
-// table.onmouseover = function (e: MouseEvent): void {
 
-// 	const {tagName,id} = e.target
 
-// 	const oldTd = document.getElementById(tdId)
 
-// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
 
-// 	if (tagName === "TD") {
 
-// 		const td = document.getElementById(id)
 
-// 		td.style.backgroundColor = 'green'
 
-// 		tdId = id
 
-// 	} //event -   это объект с информацией о событии,
 
-//                              //передается первым параметром в обработчик события.
 
-// }
 
-// Подсветить строку и столбец,
 
-//в которой находится подсвеченная ячейка. Используйте parentElement 
-//(родительский элемент элемента DOM), и список его детей: children.
 
-//Читкоды:
 
-//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
-//у td есть свойство cellIndex, в котором лежит номер ячейки;
 
-//у tr, аналогично есть свойство rowIndex - номер строки;
 
-// table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
 
-// 		this.childNodes.forEach(element => {
 
-// 			element.childNodes.forEach(td => {
 
-// 				if (td.cellIndex === cellIndex) {
 
-// 					td.style.backgroundColor = 'yellow'
 
-// 				} else if (td.dataset.col === col) {
 
-// 					td.style.backgroundColor = 'orange'
 
-// 				} else {
 
-// 					td.style.backgroundColor = 'grey'
 
-// 				}
 
-// 	   });
 
-// 	});
 
-// 	if (tagName === "TD") document.getElementById(id).
 
-// 		style.backgroundColor = 'green'
 
-// }
 
-//Calc
 
-//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input 
-//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
 
-//Для запуска раcчета используйте, например < button id = "calc" > и
 
-//Также можете создать поле ввода для результата и записывать результат в value этого поля.
 
-var inputCalc = document.querySelector('.input');
 
-console.log(inputCalc);
 
-var i;
 
-inputCalc.addEventListener('change', updateValue);
 
-function updateValue(e) {
 
-    i += 1;
 
-    console.log(i);
 
-}
 
-console.log(i);

+ 0 - 95
javascript/homework.ts
Voir le fichier 

@@ -1,95 +0,0 @@
 
-"use strict";
 
-//DOM: ДЗ
 
-//Таблица умножения
 
-//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
 
-//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
 
-
 
-// const table = document.createElement('table')
 
-// for (let i = 0; i < 10; i++){
 
-// 	const tr = document.createElement('tr')
 
-// 	for (let j = 1; j < 11; j++){
 
-// 		const td = document.createElement('td')
 
-// 			td.id = String(i) + String(j)
 
-// 			td.dataset.col = String(i)
 
-// 		if (j === 10) {
 
-// 			td.textContent = String(i)
 
-// 			tr.prepend(td)
 
-// 			continue
 
-// 		}
 
-// 		td.textContent = String((i === 0 ? 1 : i) * j)
 
-// 		tr.append(td)
 
-// 	}
 
-// 	table.append(tr)
 
-// }
 
-// document.body.append(table)
 
-
 
-//Подсветить ячейку
 
-//над которой находится курсор мыши. Используйте события mouseover и mouseout, 
-//и style.backgroundColor для подсветки.
 
-//Читкоды:
 
-//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
-//Внимание: :hover это читерство :-
 
-// let tdId;
 
-
 
-// table.onmouseover = function (e: MouseEvent): void {
 
-// 	const {tagName,id} = e.target
 
-// 	const oldTd = document.getElementById(tdId)
 
-// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
 
-// 	if (tagName === "TD") {
 
-// 		const td = document.getElementById(id)
 
-// 		td.style.backgroundColor = 'green'
 
-// 		tdId = id
 
-// 	} //event -   это объект с информацией о событии,
 
-//                              //передается первым параметром в обработчик события.
 
-// }
 
-
 
-// Подсветить строку и столбец,
 
-	//в которой находится подсвеченная ячейка. Используйте parentElement 
-	//(родительский элемент элемента DOM), и список его детей: children.
 
-	//Читкоды:
 
-	//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
-	//у td есть свойство cellIndex, в котором лежит номер ячейки;
 
-	//у tr, аналогично есть свойство rowIndex - номер строки;
 
-
 
-	
-
 
-// table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
 
-// 		this.childNodes.forEach(element => {
 
-// 			element.childNodes.forEach(td => {
 
-// 				if (td.cellIndex === cellIndex) {
 
-// 					td.style.backgroundColor = 'yellow'
 
-// 				} else if (td.dataset.col === col) {
 
-// 					td.style.backgroundColor = 'orange'
 
-// 				} else {
 
-// 					td.style.backgroundColor = 'grey'
 
-// 				}
 
-// 	   });
 
-// 	});
 
-// 	if (tagName === "TD") document.getElementById(id).
 
-// 		style.backgroundColor = 'green'
 
-// }
 
-
 
-//Calc
 
-//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input 
-//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
 
-//Для запуска раcчета используйте, например < button id = "calc" > и
 
-//Также можете создать поле ввода для результата и записывать результат в value этого поля.
 
-
 
-const inputCalc = document.querySelector('.input')
 
-console.log(inputCalc)
 
-let i;
 
-inputCalc.addEventListener('change', updateValue);
 
-
 
-function updateValue(e) {
 
-	i +=1
 
-  console.log(i)
 
-}
 
-console.log(i)
 
-// const calcWrapper = document.getElementsByClassName('calc')[0]
 
-// const handleCalc = (e) => {
 
-// 	console.log(parseFloat(inputCalc.value))
 
-// 	console.log(inputCalc)
 
-// 	e.preventDefault()
 
-// }
 
-// console.log(calcWrapper)
 
-// calcWrapper.addEventListener('submit',handleCalc)

+ 0 - 21
tsconfig.json
Voir le fichier 

@@ -1,21 +0,0 @@
 
-{
 
-    "compileOnSave": false,
 
-    "compilerOptions": {
 
-        "baseUrl": "./",
 
-        "rootDir": "./javascript",
 
-        "outDir": "./dist/out-tsc",
 
-        "sourceMap": true,
 
-        "declaration": false,
 
-        "moduleResolution": "node",
 
-        "emitDecoratorMetadata": true,
 
-        "experimentalDecorators": true,
 
-        "target": "es2017",
 
-        "typeRoots": [
 
-            "node_modules/@types"
 
-        ],
 
-        "lib": [
 
-            "es2017",
 
-            "dom"
 
-        ]
 
-    }
 
-}

+ 11 - 14
websockets/index.js
Voir le fichier 

@@ -3,8 +3,8 @@ var socket = require('socket.io');
 
 
 // App setup
 
 var app = express();
 
-var server = app.listen(4000, function(){
 
-    console.log('listening for requests on port 4000,');
 
+var server = app.listen(4000, function () {
 
+	console.log('listening for requests on port 4000,');
 
 });
 
 
 // Static files
 
@@ -13,18 +13,15 @@ app.use(express.static('public'));
 
 // Socket setup & pass server
 
 var io = socket(server);
 
 io.on('connection', (socket) => {
 
+	console.log('made socket connection', socket.id);
 
 
-    console.log('made socket connection', socket.id);
 
-
 
-    // Handle chat event
 
-    socket.on('chat', function(data){
 
-        // console.log(data);
 
-        io.sockets.emit('chat', data);
 
-    });
 
-
 
-    // Handle typing event
 
-    socket.on('typing', function(data){
 
-        socket.broadcast.emit('typing', data);
 
-    });
 
+	// Handle chat event
 
+	socket.on('chat', function (data) {
 
+		io.sockets.emit('chat', data);
 
+	});
 
 
+	// Handle typing event
 
+	socket.on('typing', function (data) {
 
+		socket.broadcast.emit('typing', data);
 
+	});
 
 });

+ 18 - 24
websockets/package.json
Voir le fichier 

@@ -1,26 +1,20 @@
 
 {
 
-  "name": "websockets-playlist",
 
-  "version": "1.0.0",
 
-  "description": "A chat app using WebSockets",
 
-  "main": "index.js",
 
-  "scripts": {
 
-    "test": "echo \"Error: no test specified\" && exit 1"
 
-  },
 
-  "repository": {
 
-    "type": "git",
 
-    "url": "git+https://github.com/iamshaunjp/websockets-playlist.git"
 
-  },
 
-  "author": "The Net Ninja",
 
-  "license": "ISC",
 
-  "bugs": {
 
-    "url": "https://github.com/iamshaunjp/websockets-playlist/issues"
 
-  },
 
-  "homepage": "https://github.com/iamshaunjp/websockets-playlist#readme",
 
-  "dependencies": {
 
-    "express": "^4.15.2",
 
-    "socket.io": "^1.7.3"
 
-  },
 
-  "devDependencies": {
 
-    "nodemon": "^1.11.0"
 
-  }
 
+	"name": "websockets-playlist",
 
+	"version": "1.0.0",
 
+	"description": "A chat app using WebSockets",
 
+	"main": "index.js",
 
+	"scripts": {
 
+		"test": "echo \"Error: no test specified\" && exit 1"
 
+	},
 
+	"license": "ISC",
 
+	"bugs": {
 
+		"url": "https://github.com/iamshaunjp/websockets-playlist/issues"
 
+	},
 
+	"dependencies": {
 
+		"express": "^4.15.2",
 
+		"socket.io": "^1.7.3"
 
+	},
 
+	"devDependencies": {
 
+		"nodemon": "^1.11.0"
 
+	}
 
 }

+ 4 - 0
websockets/public/chat.js
Voir le fichier 

@@ -14,6 +14,10 @@ btn.addEventListener('click', function () {
 
 		message: message.value,
 
 		nickName: nickName.value,
 
 	});
 
+	const youTubeReg =
 
+		'(?:.+?)?(?:/v/|watch/|?v=|&v=|youtu.be/|/v=|^youtu.be/)([a-zA-Z0-9_-]{11})+';
 
+
 
+	console.log(message.matches(youTubeReg));
 
 	message.value = '';
 
 });