index.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. // Additionally Task 10.3
  2. // Объявить функцию-конструктор User
  3. // Конструктор должен принимать аргументы, описывающие юзера
  4. var User = function ( name = "user",
  5. email = "user@sample.com",
  6. photo = User.getAvatar() ) {
  7. this.name = name
  8. this.email = email
  9. this.photoURL = photo
  10. this.info = ''
  11. }
  12. User.admin = {
  13. photoURL: "https://i.pinimg.com/originals/3d/47/4f/3d474f82ff71595e8081f9a120892ae8.gif",
  14. name: "admin"
  15. }
  16. User.getAvatar = function () {
  17. return this.avatars.shift ()
  18. }
  19. User.avatars = [
  20. "https://pngimage.net/wp-content/uploads/2018/05/avatar-png-5.png",
  21. "https://pngimg.com/uploads/avatar/avatar_PNG47.png",
  22. "https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-31-512.png",
  23. "http://icons.iconarchive.com/icons/hopstarter/face-avatars/256/Male-Face-L3-icon.png",
  24. "https://findicons.com/files/icons/1072/face_avatars/300/i05.png",
  25. "http://www.iconarchive.com/download/i51043/hopstarter/halloween-avatars/Gomez.ico",
  26. "http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/256/Zombie-2-icon.png",
  27. "https://vignette.wikia.nocookie.net/yogscast/images/8/8a/Avatar_Turps_2015.jpg"
  28. ]
  29. User.prototype.messageBox = ( function () {
  30. var box = document.createElement ( 'div' )
  31. document.body.appendChild ( box )
  32. box.style = `
  33. position: fixed;
  34. bottom: 0;
  35. right: 0;
  36. width: 300px;
  37. height: 200px;
  38. overflow: auto;
  39. border: 1px solid gray;
  40. padding: 10px;
  41. background-color: #000;
  42. `
  43. box.picture = box.appendChild ( document.createElement ( 'img' ) )
  44. box.picture.style.width = "50px"
  45. box.name = box.appendChild ( document.createElement ( 'span' ) )
  46. box.name.style = "font-weight: bold; color: #9ab; padding-left:10px;"
  47. box.message = box.appendChild ( document.createElement ( 'textarea' ) )
  48. box.message.placeholder = "Сообщение"
  49. box.message.oninput = function ( event ) {
  50. event.target.parentNode.querySelector ( 'img' ).src = User.admin.photoURL
  51. event.target.parentNode.querySelector ( 'span' ).innerHTML = User.admin.name
  52. }
  53. box.message.style = "width: 100%; height: 100%;"
  54. return box
  55. })()
  56. User.prototype.write = function ( text ) {
  57. this.messageBox.picture.src = this.photoURL
  58. this.messageBox.name.innerHTML = this.name
  59. this.messageBox.message.value = text
  60. }
  61. User.prototype.read = function () {
  62. this.messageBox.picture.src = this.photoURL
  63. this.messageBox.name.innerHTML = this.name
  64. this.info = this.messageBox.message.value
  65. console.log ( `${this.name} прочитал сообщение:\n${this.info}` )
  66. this.messageBox.message.value = "OK"
  67. }
  68. var users = []
  69. users.push ( new User ( "Иван" ) )
  70. users.push ( new User ( 'Alex', "alex@gmail.com" ) )
  71. users.push ( new User ( 'Bob', "bob777@gmail.com" ) )
  72. users.push ( new User ( 'Dima', "dima888@gmail.com" ) )
  73. users.push ( new User ( 'Fima', "fima999@gmail.com" ) )
  74. var k = 1
  75. users.forEach (
  76. function ( user ) {
  77. setTimeout (
  78. function () {
  79. user.write ( `Hello, I'm ${user.name}` )
  80. }, 3000 * k++
  81. )
  82. } )