From 109856ef232dd4e9c2381c0c2e478df6e877a59b Mon Sep 17 00:00:00 2001 From: Victoria Kolomytseva Date: Wed, 16 Oct 2024 17:44:14 +0200 Subject: [PATCH] unsociaReact #179 --- .../{unsocial => unsocial.10}/compo/Button.js | 0 .../{unsocial => unsocial.10}/compo/Code.js | 0 .../{unsocial => unsocial.10}/compo/Compo.js | 0 .../{unsocial => unsocial.10}/compo/Form.js | 0 .../compo/Heading.js | 0 .../{unsocial => unsocial.10}/compo/Image.js | 0 .../{unsocial => unsocial.10}/compo/Input.js | 0 .../{unsocial => unsocial.10}/compo/Label.js | 0 .../{unsocial => unsocial.10}/compo/Link.js | 0 .../compo/ListItem.js | 0 .../compo/Paragraph.js | 0 .../compo/PasswordInput.js | 0 .../compo/Preformatted.js | 0 .../compo/Snippet.js | 0 .../{unsocial => unsocial.10}/compo/Span.js | 0 .../{unsocial => unsocial.10}/compo/Time.js | 0 .../compo/UnorderedList.js | 0 .../compo/createPost.js | 0 .../compo/index.html | 0 .../{unsocial => unsocial.10}/compo/main.js | 0 .../unsocial.10/data/posts.js | 14 +++ .../unsocial.10/data/users.js | 4 + .../unsocial.10/index.html | 53 ++++++++++ .../unsocial.10/logic/authenticateUser.js | 14 +++ .../unsocial.10/logic/getPosts.js | 1 + .../unsocial.10/logic/registerUser.js | 26 +++++ .../victoria-kolomytseva/unsocial.10/main.js | 16 +++ .../proto-chain/index.js | 0 .../{unsocial => unsocial.10}/styles.css | 0 .../view/CreatePost.js | 0 .../{unsocial => unsocial.10}/view/Home.js | 0 .../{unsocial => unsocial.10}/view/Login.js | 0 .../view/PostItem.js | 0 .../view/PostList.js | 0 .../view/Register.js | 0 staff/victoria-kolomytseva/unsocial/.gitkeep | 0 .../unsocial/data/posts.js | 12 +-- .../unsocial/data/users.js | 4 +- .../victoria-kolomytseva/unsocial/index.html | 38 +++---- .../unsocial/logic/authenticateUser.js | 1 - .../unsocial/logic/createPost.js | 15 +++ .../unsocial/logic/getPosts.js | 2 +- .../unsocial/logic/registerUser.js | 3 +- staff/victoria-kolomytseva/unsocial/main.js | 99 +++++++++++++++++-- staff/victoria-kolomytseva/unsocial/style.css | 21 ++++ 45 files changed, 275 insertions(+), 48 deletions(-) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Button.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Code.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Compo.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Form.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Heading.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Image.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Input.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Label.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Link.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/ListItem.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Paragraph.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/PasswordInput.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Preformatted.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Snippet.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Span.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/Time.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/UnorderedList.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/createPost.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/index.html (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/compo/main.js (100%) create mode 100644 staff/victoria-kolomytseva/unsocial.10/data/posts.js create mode 100644 staff/victoria-kolomytseva/unsocial.10/data/users.js create mode 100644 staff/victoria-kolomytseva/unsocial.10/index.html create mode 100644 staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js create mode 100644 staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js create mode 100644 staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js create mode 100644 staff/victoria-kolomytseva/unsocial.10/main.js rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/proto-chain/index.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/styles.css (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/CreatePost.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/Home.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/Login.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/PostItem.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/PostList.js (100%) rename staff/victoria-kolomytseva/{unsocial => unsocial.10}/view/Register.js (100%) create mode 100644 staff/victoria-kolomytseva/unsocial/.gitkeep create mode 100644 staff/victoria-kolomytseva/unsocial/logic/createPost.js create mode 100644 staff/victoria-kolomytseva/unsocial/style.css diff --git a/staff/victoria-kolomytseva/unsocial/compo/Button.js b/staff/victoria-kolomytseva/unsocial.10/compo/Button.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Button.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Button.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Code.js b/staff/victoria-kolomytseva/unsocial.10/compo/Code.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Code.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Code.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Compo.js b/staff/victoria-kolomytseva/unsocial.10/compo/Compo.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Compo.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Compo.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Form.js b/staff/victoria-kolomytseva/unsocial.10/compo/Form.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Form.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Form.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Heading.js b/staff/victoria-kolomytseva/unsocial.10/compo/Heading.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Heading.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Heading.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Image.js b/staff/victoria-kolomytseva/unsocial.10/compo/Image.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Image.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Image.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Input.js b/staff/victoria-kolomytseva/unsocial.10/compo/Input.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Input.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Input.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Label.js b/staff/victoria-kolomytseva/unsocial.10/compo/Label.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Label.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Label.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Link.js b/staff/victoria-kolomytseva/unsocial.10/compo/Link.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Link.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Link.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/ListItem.js b/staff/victoria-kolomytseva/unsocial.10/compo/ListItem.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/ListItem.js rename to staff/victoria-kolomytseva/unsocial.10/compo/ListItem.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Paragraph.js b/staff/victoria-kolomytseva/unsocial.10/compo/Paragraph.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Paragraph.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Paragraph.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/PasswordInput.js b/staff/victoria-kolomytseva/unsocial.10/compo/PasswordInput.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/PasswordInput.js rename to staff/victoria-kolomytseva/unsocial.10/compo/PasswordInput.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Preformatted.js b/staff/victoria-kolomytseva/unsocial.10/compo/Preformatted.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Preformatted.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Preformatted.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Snippet.js b/staff/victoria-kolomytseva/unsocial.10/compo/Snippet.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Snippet.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Snippet.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Span.js b/staff/victoria-kolomytseva/unsocial.10/compo/Span.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Span.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Span.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/Time.js b/staff/victoria-kolomytseva/unsocial.10/compo/Time.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/Time.js rename to staff/victoria-kolomytseva/unsocial.10/compo/Time.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/UnorderedList.js b/staff/victoria-kolomytseva/unsocial.10/compo/UnorderedList.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/UnorderedList.js rename to staff/victoria-kolomytseva/unsocial.10/compo/UnorderedList.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/createPost.js b/staff/victoria-kolomytseva/unsocial.10/compo/createPost.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/createPost.js rename to staff/victoria-kolomytseva/unsocial.10/compo/createPost.js diff --git a/staff/victoria-kolomytseva/unsocial/compo/index.html b/staff/victoria-kolomytseva/unsocial.10/compo/index.html similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/index.html rename to staff/victoria-kolomytseva/unsocial.10/compo/index.html diff --git a/staff/victoria-kolomytseva/unsocial/compo/main.js b/staff/victoria-kolomytseva/unsocial.10/compo/main.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/compo/main.js rename to staff/victoria-kolomytseva/unsocial.10/compo/main.js diff --git a/staff/victoria-kolomytseva/unsocial.10/data/posts.js b/staff/victoria-kolomytseva/unsocial.10/data/posts.js new file mode 100644 index 00000000..bb9c653a --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/data/posts.js @@ -0,0 +1,14 @@ +const posts = [ + { + image: 'https://fantasiapersonajes.es/blog/wp-content/uploads/2023/11/El-Grinch-de-Navidad.jpg', + text: 'here i am', + username: 'grinch', + date: new Date + }, + { + image: 'https://static.abc.es/media/play/2018/11/30/grinch-kBPE--1248x698@abc.jpg', + text: 'here i am', + username: 'grinch', + date: new Date + } +] \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial.10/data/users.js b/staff/victoria-kolomytseva/unsocial.10/data/users.js new file mode 100644 index 00000000..db695932 --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/data/users.js @@ -0,0 +1,4 @@ +const users = [ + { name: 'Grinch', email: 'peter@pan.com', username: 'grinch', password: '123123123' }, + { name: 'Grinch', email: 'grincg@darling.com', username: 'grinch', password: '123123123' } +] \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial.10/index.html b/staff/victoria-kolomytseva/unsocial.10/index.html new file mode 100644 index 00000000..55979f62 --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/index.html @@ -0,0 +1,53 @@ + + + + + + + Unsocial + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js b/staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js new file mode 100644 index 00000000..f1c844dc --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js @@ -0,0 +1,14 @@ +const authenticateUser = (username, password) => { + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 8) + throw new Error('invalid password') + + const user = users.find(user => user.username === username && user.password === password) + + if (user === undefined) + throw new Error('wrong credentials') + + return user +} \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js b/staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js new file mode 100644 index 00000000..60d294bb --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js @@ -0,0 +1 @@ +const getPosts = () => posts diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js b/staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js new file mode 100644 index 00000000..b1d53a33 --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js @@ -0,0 +1,26 @@ +const registerUser = (name, email, username, password, passwordRepeat) => { + if (name.length < 2) + throw new Error('invalid name') + + if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email)) + throw new Error('invalid e-mail') + + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 8) + throw new Error('invalid password') + + if (password !== passwordRepeat) + throw new Error('passwords do not match') + + let user = users.find(user => user.username === username || user.email === email) + + + if (user !== undefined) + throw new Error('user already exists') + + user = { name: name, email: email, username: username, password: password } + + users.push(user) +} \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial.10/main.js b/staff/victoria-kolomytseva/unsocial.10/main.js new file mode 100644 index 00000000..29e9720d --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial.10/main.js @@ -0,0 +1,16 @@ +let loggedInUser = null + +const page = new Compo(document.querySelector('body')) +console.log(page) + + +const title = new Heading('Unsocial', 1) +page.add(title) + +const login = new Login() +page.add(login) + +// loggedInUser = users[0] +let home +// home = new Home() +// page.add(home) \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/proto-chain/index.js b/staff/victoria-kolomytseva/unsocial.10/proto-chain/index.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/proto-chain/index.js rename to staff/victoria-kolomytseva/unsocial.10/proto-chain/index.js diff --git a/staff/victoria-kolomytseva/unsocial/styles.css b/staff/victoria-kolomytseva/unsocial.10/styles.css similarity index 100% rename from staff/victoria-kolomytseva/unsocial/styles.css rename to staff/victoria-kolomytseva/unsocial.10/styles.css diff --git a/staff/victoria-kolomytseva/unsocial/view/CreatePost.js b/staff/victoria-kolomytseva/unsocial.10/view/CreatePost.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/CreatePost.js rename to staff/victoria-kolomytseva/unsocial.10/view/CreatePost.js diff --git a/staff/victoria-kolomytseva/unsocial/view/Home.js b/staff/victoria-kolomytseva/unsocial.10/view/Home.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/Home.js rename to staff/victoria-kolomytseva/unsocial.10/view/Home.js diff --git a/staff/victoria-kolomytseva/unsocial/view/Login.js b/staff/victoria-kolomytseva/unsocial.10/view/Login.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/Login.js rename to staff/victoria-kolomytseva/unsocial.10/view/Login.js diff --git a/staff/victoria-kolomytseva/unsocial/view/PostItem.js b/staff/victoria-kolomytseva/unsocial.10/view/PostItem.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/PostItem.js rename to staff/victoria-kolomytseva/unsocial.10/view/PostItem.js diff --git a/staff/victoria-kolomytseva/unsocial/view/PostList.js b/staff/victoria-kolomytseva/unsocial.10/view/PostList.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/PostList.js rename to staff/victoria-kolomytseva/unsocial.10/view/PostList.js diff --git a/staff/victoria-kolomytseva/unsocial/view/Register.js b/staff/victoria-kolomytseva/unsocial.10/view/Register.js similarity index 100% rename from staff/victoria-kolomytseva/unsocial/view/Register.js rename to staff/victoria-kolomytseva/unsocial.10/view/Register.js diff --git a/staff/victoria-kolomytseva/unsocial/.gitkeep b/staff/victoria-kolomytseva/unsocial/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/staff/victoria-kolomytseva/unsocial/data/posts.js b/staff/victoria-kolomytseva/unsocial/data/posts.js index bb9c653a..9fcd4ba0 100644 --- a/staff/victoria-kolomytseva/unsocial/data/posts.js +++ b/staff/victoria-kolomytseva/unsocial/data/posts.js @@ -1,14 +1,14 @@ const posts = [ { - image: 'https://fantasiapersonajes.es/blog/wp-content/uploads/2023/11/El-Grinch-de-Navidad.jpg', - text: 'here i am', - username: 'grinch', + image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg', + text: 'here we are', + username: 'peterpan', date: new Date }, { - image: 'https://static.abc.es/media/play/2018/11/30/grinch-kBPE--1248x698@abc.jpg', + image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg', text: 'here i am', - username: 'grinch', + username: 'wendydarling', date: new Date } -] \ No newline at end of file +] diff --git a/staff/victoria-kolomytseva/unsocial/data/users.js b/staff/victoria-kolomytseva/unsocial/data/users.js index db695932..702bf71f 100644 --- a/staff/victoria-kolomytseva/unsocial/data/users.js +++ b/staff/victoria-kolomytseva/unsocial/data/users.js @@ -1,4 +1,4 @@ const users = [ - { name: 'Grinch', email: 'peter@pan.com', username: 'grinch', password: '123123123' }, - { name: 'Grinch', email: 'grincg@darling.com', username: 'grinch', password: '123123123' } + { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' }, + { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' } ] \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/index.html b/staff/victoria-kolomytseva/unsocial/index.html index 55979f62..9bb02f99 100644 --- a/staff/victoria-kolomytseva/unsocial/index.html +++ b/staff/victoria-kolomytseva/unsocial/index.html @@ -2,16 +2,24 @@ + Unsocial - + + + +
@@ -21,33 +29,11 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js b/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js index f1c844dc..3ab42d4d 100644 --- a/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js +++ b/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js @@ -1,7 +1,6 @@ const authenticateUser = (username, password) => { if (username.length < 4 || username.length > 12) throw new Error('invalid username') - if (password.length < 8) throw new Error('invalid password') diff --git a/staff/victoria-kolomytseva/unsocial/logic/createPost.js b/staff/victoria-kolomytseva/unsocial/logic/createPost.js new file mode 100644 index 00000000..d121a185 --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial/logic/createPost.js @@ -0,0 +1,15 @@ +const createPost = (username, image, text) => { + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + // TODO input validation (and throw error) + + const post = { + image: image, + text: text, + username: username, + date: new Date + } + + postMessage.push(post) +} \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/logic/getPosts.js b/staff/victoria-kolomytseva/unsocial/logic/getPosts.js index 60d294bb..0ccae925 100644 --- a/staff/victoria-kolomytseva/unsocial/logic/getPosts.js +++ b/staff/victoria-kolomytseva/unsocial/logic/getPosts.js @@ -1 +1 @@ -const getPosts = () => posts +const getPosts = () => posts \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/logic/registerUser.js b/staff/victoria-kolomytseva/unsocial/logic/registerUser.js index b1d53a33..f91ec68a 100644 --- a/staff/victoria-kolomytseva/unsocial/logic/registerUser.js +++ b/staff/victoria-kolomytseva/unsocial/logic/registerUser.js @@ -16,8 +16,7 @@ const registerUser = (name, email, username, password, passwordRepeat) => { let user = users.find(user => user.username === username || user.email === email) - - if (user !== undefined) + if (user !== underfined) throw new Error('user already exists') user = { name: name, email: email, username: username, password: password } diff --git a/staff/victoria-kolomytseva/unsocial/main.js b/staff/victoria-kolomytseva/unsocial/main.js index 29e9720d..a4a79d91 100644 --- a/staff/victoria-kolomytseva/unsocial/main.js +++ b/staff/victoria-kolomytseva/unsocial/main.js @@ -1,16 +1,95 @@ let loggedInUser = null -const page = new Compo(document.querySelector('body')) -console.log(page) +const rootElement = document.getElementById('root') +const root = ReactDOM.createRoot(rootElement) +const title = React.createElement('h1', { style: { backgroundColor: 'red' } }, 'Hola, React') -const title = new Heading('Unsocial', 1) -page.add(title) +const button = React.createElement('button', { type: 'button', onClick: () => alert('Clicked') }, 'Click me!') + +const red = React.createElement('li', { style: { backgroundColor: 'red' } }, 'RED') +const green = React.createElement('li', { style: { backgroundColor: 'green' } }, 'GREEN') +const blue = React.createElement('li', { style: { backgroundColor: 'blue' } }, 'BLUE') +const list = React.createElement('ul', { style: { border: '1px solid black' } }, [red, green, blue]) + +const input = React.createElement('Input', { type: 'text', id: 'whatever', className: 'pepito', placeholder: 'Whatever!?' }) +const submit = React.createElement('button', { type: 'submit' }, 'Do') +const form = React.createElement('form', { + onSubmit: event => { + event.preventDefault() + + console.log(event.target.whatever.value) + } +}, [input, submit]) + +const link = React.createElement('a', { + href: '', + onClick: event => { + event.preventDefault() + + console.log('link clicked') + }, + style: { + color: 'magenta' + } +}, 'click me') + +function ReactiveEmoji(props) { + const content = React.createElement('span', { + onClick: () => alert(`${props.emoji} Ouch!`), + style: { + cursor: 'pointer' + + } + + }, + props.emoji) + const box = React.createElement('div', { + style: { + border: '2px solid black', + display: 'inline-block', + padding: '3px' + } + }, + content) + + return box +} +//class Car extends React.Component { } +// const Component = React.Component +const { Component } = React +class Car extends Component { + constructor(props) { + super(props) + } + + render() { + const content = React.createElement('span', { style: { padding: '2px' } }, this.props.car) + + return content + + } + +} + +const blueCar = new Car({ car: '🚙' }) +const redCar = new Car({ car: '🚗' }) +const yellowCar = new Car({ car: '🚕' }) + +root.render([ + title, + button, + list, + blueCar.render(), + redCar.render(), + yellowCar.render(), + form, + link, + ReactiveEmoji({ emoji: '😊' }), + ReactiveEmoji({ emoji: '❤️' }), + + + +]) -const login = new Login() -page.add(login) -// loggedInUser = users[0] -let home -// home = new Home() -// page.add(home) \ No newline at end of file diff --git a/staff/victoria-kolomytseva/unsocial/style.css b/staff/victoria-kolomytseva/unsocial/style.css new file mode 100644 index 00000000..e21cb04e --- /dev/null +++ b/staff/victoria-kolomytseva/unsocial/style.css @@ -0,0 +1,21 @@ +@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap'); + +:root { + --color: dodgerblue; + --font: 'Sixtyfour'; + font-family: var(--font); +} + +body { + background-color: lightgrey; + color: var(--color); +} + +input { + background-color: inherit; + font-family: inherit; +} + +a:visited { + color: var(--color); +} \ No newline at end of file