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

control-buttons done

Olga_Brekhuntsova 3 years ago
parent
df2cbc0352
commit
74213e95ec
12 changed files with 460 additions and 4 deletions
Split View Show Diff Stats
  1. 104 0
      classwork-control-rolling-buttons/.gitignore
  2. 12 0
      classwork-control-rolling-buttons/.prettierrc.json
  3. 3 0
      classwork-control-rolling-buttons/.vscode/settings.json
  4. BIN
      classwork-control-rolling-buttons/1@3x.png
  5. 2 0
      classwork-control-rolling-buttons/README.md
  6. 136 0
      classwork-control-rolling-buttons/index.html
  7. 13 0
      classwork-control-rolling-buttons/js/myFilter.js
  8. 19 0
      classwork-control-rolling-buttons/js/table.js
  9. 6 0
      classwork-control-rolling-buttons/js/task-sum-array.js
  10. 6 0
      classwork-control-rolling-buttons/style.css
  11. 158 3
      classwork-table-array/index.html
  12. 1 1
      hw-js-01/index.html

+ 104 - 0
classwork-control-rolling-buttons/.gitignore
View File 

@@ -0,0 +1,104 @@
 
+# Logs
 
+logs
 
+*.log
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+lerna-debug.log*
 
+
 
+# Diagnostic reports (https://nodejs.org/api/report.html)
 
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
+
 
+# Runtime data
 
+pids
 
+*.pid
 
+*.seed
 
+*.pid.lock
 
+
 
+# Directory for instrumented libs generated by jscoverage/JSCover
 
+lib-cov
 
+
 
+# Coverage directory used by tools like istanbul
 
+coverage
 
+*.lcov
 
+
 
+# nyc test coverage
 
+.nyc_output
 
+
 
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 
+.grunt
 
+
 
+# Bower dependency directory (https://bower.io/)
 
+bower_components
 
+
 
+# node-waf configuration
 
+.lock-wscript
 
+
 
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 
+build/Release
 
+
 
+# Dependency directories
 
+node_modules/
 
+jspm_packages/
 
+
 
+# TypeScript v1 declaration files
 
+typings/
 
+
 
+# TypeScript cache
 
+*.tsbuildinfo
 
+
 
+# Optional npm cache directory
 
+.npm
 
+
 
+# Optional eslint cache
 
+.eslintcache
 
+
 
+# Microbundle cache
 
+.rpt2_cache/
 
+.rts2_cache_cjs/
 
+.rts2_cache_es/
 
+.rts2_cache_umd/
 
+
 
+# Optional REPL history
 
+.node_repl_history
 
+
 
+# Output of 'npm pack'
 
+*.tgz
 
+
 
+# Yarn Integrity file
 
+.yarn-integrity
 
+
 
+# dotenv environment variables file
 
+.env
 
+.env.test
 
+
 
+# parcel-bundler cache (https://parceljs.org/)
 
+.cache
 
+
 
+# Next.js build output
 
+.next
 
+
 
+# Nuxt.js build / generate output
 
+.nuxt
 
+dist
 
+
 
+# Gatsby files
 
+.cache/
 
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
 
+# https://nextjs.org/blog/next-9-1#public-directory-support
 
+# public
 
+
 
+# vuepress build output
 
+.vuepress/dist
 
+
 
+# Serverless directories
 
+.serverless/
 
+
 
+# FuseBox cache
 
+.fusebox/
 
+
 
+# DynamoDB Local files
 
+.dynamodb/
 
+
 
+# TernJS port file
 
+.tern-port

+ 12 - 0
classwork-control-rolling-buttons/.prettierrc.json
View File 

@@ -0,0 +1,12 @@
 
+{
 
+    "printWidth": 80,
 
+    "tabWidth": 2,
 
+    "useTabs": false,
 
+    "semi": true,
 
+    "singleQuote": true,
 
+    "trailingComma": "all",
 
+    "bracketSpacing": true,
 
+    "jsxBracketSameLine": false,
 
+    "arrowParens": "avoid",
 
+    "proseWrap": "always"
 
+  }

+ 3 - 0
classwork-control-rolling-buttons/.vscode/settings.json
View File 

@@ -0,0 +1,3 @@
 
+{
 
+  "liveServer.settings.port": 5501
 
+}

BIN
classwork-control-rolling-buttons/1@3x.png
View File


+ 2 - 0
classwork-control-rolling-buttons/README.md
View File 

@@ -0,0 +1,2 @@
 
+# JS-1
 
+Hometask-1

+ 136 - 0
classwork-control-rolling-buttons/index.html
View File 

@@ -0,0 +1,136 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width" />
 
+  <link rel="stylesheet" href="style.css">
 
+  <title>Control Buttons</title>
 
+  <style>
 
+    #container1 {
 
+      padding: 400px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+
 
+<div id='colorMixer' style='width:50px; height:50px; border-radius:50%; border: 3px solid grey'></div>
 
+<div id='buttonContainer' class='buttonContainer'></div>>  
+<div id='container1'></div>
 
+
 
+  <script>
 
+
 
+  function Control(el, { value = 0,
 
+    min = 0,
 
+    max = 100,
 
+    minAngle = 0,
 
+    maxAngle = 360,
 
+    wheelSpeed = 0.05,
 
+    step = 1 } = {}) {
 
+
 
+    const img = document.createElement('img')
 
+    img.src = '1@3x.png'
 
+    el.append(img);
 
+    img.className = "colorButton";
 
+
 
+    const ratio = (maxAngle - minAngle) / (max - min)
 
+    const getAngle = () => (value - min) * ratio + minAngle
 
+
 
+    this.setValue = newValue => {
 
+      if (newValue > max)
 
+        newValue = max
 
+      if (newValue < min)
 
+        newValue = min
 
+
 
+      if (typeof this.onchange === 'function' && newValue !== value)
 
+        this.onchange(newValue)
 
+
 
+      value = newValue
 
+
 
+      img.style.transform = `rotate(${getAngle()}deg)`
 
+    }
 
+
 
+    img.onmousewheel = (event) => {
 
+      const { deltaY } = event
 
+      //console.log(deltaY)
 
+      this.setValue(value + deltaY * wheelSpeed)
 
+      event.preventDefault()
 
+    }
 
+
 
+    img.onclick = (event) => {
 
+      const { layerX } = event
 
+      if (layerX < img.width / 2)
 
+        this.setValue(value - step)
 
+      else
 
+        this.setValue(value + step)
 
+      event.preventDefault()
 
+    }
 
+
 
+    const event2Deg = event => {
 
+      const { layerX, layerY } = event
 
+      const { width, height } = img
 
+      const x = layerX - width / 2
 
+      const y = height / 2 - layerY
 
+      return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
 
+    }
 
+
 
+    let prevAngle = null
 
+
 
+    img.onmousedown = (event) => {
 
+      prevAngle = event2Deg(event)
 
+    }
 
+
 
+    img.onmousemove = (event) => {
 
+      if (prevAngle === null) return
 
+
 
+      const currentAngle = event2Deg(event)
 
+      const deltaValue = (prevAngle - currentAngle) / ratio
 
+      this.setValue(value + deltaValue)
 
+      prevAngle = currentAngle
 
+      event.preventDefault()
 
+    }
 
+
 
+    img.onmouseup = (event) => {
 
+      prevAngle = null
 
+    }
 
+
 
+
 
+    this.setValue(value)
 
+    this.getValue = () => value
 
+  }
 
+
 
+  const volumeControl = new Control(container1, {
 
+    value: 75,
 
+    min: 0,
 
+    max: 100,
 
+    minAngle: -90, maxAngle: 90
 
+  })
 
+  volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
 
+  console.log(volumeControl.getValue())
 
+  //пришейте к нему тэг audio для громкости
 
+
 
+  function setRGB() {
 
+  
+  colorMixer.style.backgroundColor=`rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
 
+  
+    //какой то блок, которому меняем цвет через rgba и цвета крутилок
 
+  }
 
+
 
+const red  = new Control(buttonContainer, {min: 0, max: 255})
 
+red.onchange = setRGB
 
+const green  = new Control(buttonContainer, {min: 0, max: 255})
 
+green.onchange = setRGB
 
+const blue  = new Control(buttonContainer, {min: 0, max: 255})
 
+blue.onchange = setRGB
 
+
 
+////сделать три крутилки для RGB
 
+////и обновлять цвет блока/фона блока при вращении любой из трех
 
+
 
+//setTimeout(() => volumeControl.setValue(80), 2000)
 
+
 
+
 
+  </script>
 
+  </body>
 
+</html>
 
+

+ 13 - 0
classwork-control-rolling-buttons/js/myFilter.js
View File 

@@ -0,0 +1,13 @@
 
+// const f = x => x % 2;
 
+// const f = x => x / 2;
 
+const f =x => confirm(x);
 
+function myFilter(arr, f) {
 
+    let result = [];
 
+    for (let item of arr) {
 
+        if (f(item)) { result.push(item)}
 
+    }
 
+    return result;
 
+}
 
+
 
+// console.log(myFilter([1, 2, 3, 4, 5], f));
 
+console.log(myFilter(["холодно?", "сонно?"], f));

+ 19 - 0
classwork-control-rolling-buttons/js/table.js
View File 

@@ -0,0 +1,19 @@
 
+// task-table
 
+let i;
 
+let j;
 
+
 
+const array = [i, j];
 
+
 
+let str = "<table>";
 
+for (i = 1; i <10; i++) {
 
+    str += "<tr>";
 
+    for (j = 1; j < 10; j++) {
 
+        str += "<td style='width:70px'>" + i +"*"+j+"="+ i * j + "</td>";
 
+    }
 
+    str += "</tr>";
 
+}
 
+str +="</table>";
 
+document.body.insertAdjacentHTML("afterbegin", str);
 
+
 
+
 
+

+ 6 - 0
classwork-control-rolling-buttons/js/task-sum-array.js
View File 

@@ -0,0 +1,6 @@
 
+// task-sum-array
 
+let arr = [1, 2, 3, 4,10];
 
+let sum = 0;
 
+for (let item of arr) { sum = sum+item };
 
+// console.log(arr.concat(sum));
 
+console.log([...arr,sum]);

+ 6 - 0
classwork-control-rolling-buttons/style.css
View File 

@@ -0,0 +1,6 @@
 
+.colorButton {
 
+  width: 100px;
 
+}
 
+.buttonContainer {
 
+  display: flex;
 
+}

+ 158 - 3
classwork-table-array/index.html
View File 

@@ -1,13 +1,168 @@
 
 <!DOCTYPE html>
 
-<html lang="ru">
 
+<!-- <html lang="ru">
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>JS-classwork-array</title>
 
   </head>
 
   <body>
 
- <script src="/js/task-sum-array.js" type="module"></script>
 
- <script src="/js/table.js" type="module"></script>
 
+    <button id='button1'>button1</button>
 
+    <button id='button2'>button2</button> -->
 
+
 
+
 
+
 
+<html>
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width" />
 
+  <link rel="stylesheet" href="style.css">
 
+  <title>Другой тайтл ПРИВЕТ 17й</title>
 
+  <style>
 
+    #container1 {
 
+      padding: 400px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+
 
+<div id='colorMixer' style='width:50px; height:50px; border-radius:50%; border: 3px solid grey'></div>
 
+<div id='buttonContainer' class='buttonContainer'></div>>  
+<div id='container1'></div>
 
+ <!-- <script src="/js/task-sum-array.js" type="module"></script>
 
+ <script src="/js/table.js" type="module"></script> -->
 
+  <!-- <script src="/js/myFilter.js" type="module"></script> -->
 
+  <!-- <script> -->
 
+      <!-- //  let counter = 0;
 
+    // function clickCounter (element) {
 
+    //    let counter = 0;
 
+    //   element.onclick = function () {
 
+          //  let counter = 0;
 
+  //      return element.innerText=counter++;
 
+  //     }
 
+  //   }
 
+  //   clickCounter (button1);
 
+  //    clickCounter(button2);
 
+  // </script> -->
 
+  <script>
 
+
 
+  function Control(el, { value = 0,
 
+    min = 0,
 
+    max = 100,
 
+    minAngle = 0,
 
+    maxAngle = 360,
 
+    wheelSpeed = 0.05,
 
+    step = 1 } = {}) {
 
+
 
+    const img = document.createElement('img')
 
+    img.src = '1@3x.png'
 
+    el.append(img);
 
+    img.className = "colorButton";
 
+
 
+    const ratio = (maxAngle - minAngle) / (max - min)
 
+    const getAngle = () => (value - min) * ratio + minAngle
 
+
 
+    this.setValue = newValue => {
 
+      if (newValue > max)
 
+        newValue = max
 
+      if (newValue < min)
 
+        newValue = min
 
+
 
+      if (typeof this.onchange === 'function' && newValue !== value)
 
+        this.onchange(newValue)
 
+
 
+      value = newValue
 
+
 
+      img.style.transform = `rotate(${getAngle()}deg)`
 
+    }
 
+
 
+    img.onmousewheel = (event) => {
 
+      const { deltaY } = event
 
+      //console.log(deltaY)
 
+      this.setValue(value + deltaY * wheelSpeed)
 
+      event.preventDefault()
 
+    }
 
+
 
+    img.onclick = (event) => {
 
+      const { layerX } = event
 
+      if (layerX < img.width / 2)
 
+        this.setValue(value - step)
 
+      else
 
+        this.setValue(value + step)
 
+      event.preventDefault()
 
+    }
 
+
 
+    const event2Deg = event => {
 
+      const { layerX, layerY } = event
 
+      const { width, height } = img
 
+      const x = layerX - width / 2
 
+      const y = height / 2 - layerY
 
+
 
+      //console.log(x, y, width, height)
 
+
 
+      return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
 
+    }
 
+
 
+    let prevAngle = null
 
+
 
+    img.onmousedown = (event) => {
 
+      prevAngle = event2Deg(event)
 
+    }
 
+
 
+    img.onmousemove = (event) => {
 
+      if (prevAngle === null) return
 
+
 
+      const currentAngle = event2Deg(event)
 
+      const deltaValue = (prevAngle - currentAngle) / ratio
 
+      //console.log(prevAngle - currentAngle, deltaValue)
 
+      this.setValue(value + deltaValue)
 
+      prevAngle = currentAngle
 
+      event.preventDefault()
 
+    }
 
+
 
+    img.onmouseup = (event) => {
 
+      prevAngle = null
 
+    }
 
+
 
+
 
+    this.setValue(value)
 
+    this.getValue = () => value
 
+  }
 
+
 
+
 
+
 
+  const volumeControl = new Control(container1, {
 
+    value: 75,
 
+    min: 0,
 
+    max: 100,
 
+    minAngle: -90, maxAngle: 90
 
+  })
 
+  volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
 
+  console.log(volumeControl.getValue())
 
+  //пришейте к нему тэг audio для громкости
 
+
 
+  function setRGB() {
 
+  
+  colorMixer.style.backgroundColor=`rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
 
+  
+    //какой то блок, которому меняем цвет через rgba и цвета крутилок
 
+  }
 
+
 
+const red  = new Control(buttonContainer, {min: 0, max: 255})
 
+red.onchange = setRGB
 
+const green  = new Control(buttonContainer, {min: 0, max: 255})
 
+green.onchange = setRGB
 
+const blue  = new Control(buttonContainer, {min: 0, max: 255})
 
+blue.onchange = setRGB
 
+
 
+////сделать три крутилки для RGB
 
+////и обновлять цвет блока/фона блока при вращении любой из трех
 
+
 
+//setTimeout(() => volumeControl.setValue(80), 2000)
 
+
 
+
 
+  </script>
 
   </body>
 
 </html>

+ 1 - 1
hw-js-01/index.html
View File 

@@ -22,7 +22,7 @@
 
     <!-- <script src="/js/task-13.js" type="module"></script> -->
 
     <!-- <script src="/js/task-14.js" type="module"></script> -->
 
     <!-- <script src="/js/task-15.js" type="module"></script> -->
 
-    <!-- <script src="/js/task-16.js" type="module"></script> -->
 
+    <script src="/js/task-16.js" type="module"></script>
 
     <!-- <script src="/js/task-17.js" type="module"></script> -->
 
     <!-- <script src="/js/task-18.js" type="module"></script> -->